Day8 React State(编辑中)

State概要

React Component 只能透过资料状态的改变来更新UI，资料来源来自於以下两种方式：

• 透过外部传进来Component的 Props
• Component内部自己的 State
  当Props或State的资料有更新时，React就会刷新一次UI。

class Component中的constructor()用 this.state初始化State物件；若要存取使用的话也是透过this.stat。更新State的资料时，使用 React提供的方法 this.setState()更新 State。

下面用一个clock Component作为state范例，透过Sta:

class Clock extends React.Component {

  // 当Component被 ReactDOM.render() 渲染到画面时，React 会先执行constructor里的逻辑判断
  constructor(props) {
    super(props);

    // 初始化state 资料，可以放物件、字串、或阵列
    this.state = {date: new Date()};
  }

  // React call render() 拿到要显示到 DOM 的元素内容
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

修改state

用下列的方式更新constructor()之外的State。

this.setState(更新的内容);

setState相关语法介绍

React为了效能的考量，会将好几次的this.setState()统整後再做一次更新，这表示执行完this.setState()後，下一行this.state不一定能取得最新的State。
以下的语法可以取得当前最新的State和prop:

this.setState( (prevState, props) => stateChange )

prevState和props分别为当前最新的State和props。

State和Props为非同步更新的缘故，React有一个callback function可以在更新完State时进行逻辑判断。

setState(stateChange, callback function)