React State(状态)

React State(状态)

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

一个完整的时钟例子（使Clock设置自己的计时器并每秒更新一次）

class Clock extends React.Component {
    // 构造器
    constructor(props) {
        super(props);
        this.state = {date: new Date()}
    }
    
    // 组件已经被渲染到 DOM 中后运行(挂载 --> mount)
    componentDidMount() {
        this.timerID = setInterval(
            () => this.tick(),
            1000
        );
    }
    
    // 当 DOM 中组件被删除的时执行（卸载 --> unmount）
    componentWillUnMount() {
        clearInterval(timerID);
    }

    tick() {
        this.setState({
            date: new Date()
        });
    }

    render() {
        return (
            <div>
                <h1>Hello Word!</h1>
                <h2>现在是：{this.state.date.toLocaleTimeString()}</h2>
            </div>
        );
    }
}
ReactDOM.render(<Clock />, document.getElementById('root'));

实例解析：
componentDidMount()与componentWillUnmount()方法被称为生命周期钩子。
在组件输出到 DOM 后会执行 componentDidMount() 钩子，我们就可以在这个钩子上设置一个定时器。
this.timerID 为定时器的 ID，我们可以在 componentWillUnmount() 钩子中卸载定时器。

---

时钟例子执行顺序：

1. 当 <Clock /> 被传递给 ReactDOM.render() 时，React 调用 Clock 组件的构造函数。因为 Clock 需要显示当前的时间，所以它会用一个包含当前时间的对象来初始化 this.state 。我们会在之后更新 state 。
2. React 然后调用 Clock 组件的 render() 方法。这是 React 了解屏幕上应该显示什么内容，然后 React 更新 DOM 以匹配 Clock 的渲染输出。
3. 当 Clock 的输出被插入到 DOM 中后，React 就会调用 ComponentDidMount() 生命周期方法。在这个方法中，Clock 组件向浏览器请求设置一个计时器来每秒调用一次组件的 tick() 方法。
4. 浏览器每秒都会调用一次 tick() 方法。 在这方法之中，Clock 组件会通过调用 setState() 来调度 UI 更新。通过调用 setState() ，React 知道 state 已经改变了，然后会重新调用 render() 方法来渲染画面。这一次，render() 方法中的 this.state.date 就不一样了，如此一来就会渲染输出更新过的时间。React 也会相应的更新 DOM。
5. 一旦 Clock 组件从 DOM 中被移除，React 就会调用 componentWillUnmount() 生命周期方法，这样计时器就停止了。

正确的使用 State（关于 setState()）

• 不要直接修改 State

  此代码不会重新渲染组件：

  // 错误写法
  this.state.comment = 'Hello';
  

  而是应该使用 setState():

  // 正确写法
  this.setState({comment: 'Hello'});
  

  构造函数是唯一可以给 this.state 赋值的地方

• State 的更新可能是异步的
  出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。

  因为 this.props 和 this.state 可能会异步更新，所以不要依赖他们的值来更新下一个状态。

  此代码可能会无法更新计数器：

  // 错误写法
  this.setState({
    counter: this.state.count + this.props.increment,
  });
  

  要解决这个问题，可以让 setState() 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 做为第二个参数:

  // 正确写法
  this.setState((state, props) => ({
    counter: state.counter + props.increment
  }));
  

• State 的更新可能被合并

  当你调用 setState() 的时候，React 会把你提供的对象合并到当前的 state。

  例如，你的 state 包含几个独立的变量：

  constructor(props) {
    super(props);
      this.state = {
        posts: [],
        comments: []
      };
  }
  

  然后你可以分别调用 setState() 来单独地更新它们：

  componentDidMount() {
        fetchPosts().then(response => {
            this.setState({
            posts: response.posts
        });
        });
  
      fetchComments().then(response => {
        this.setState({
            comments: response.comments
            });
      });
  }
  

  这里的合并是浅合并，所以 this.setState({comments}) 完整保留了 this.state.posts， 但是完全替换了 this.state.comments。

数据是向下流动的

不管是父组件或是子组件都无法知道某个组件是有状态的还是无状态的，并且它们也并不关心它是函数组件还是 class 组件。

这就是为什么称 state 为局部的或是封装的的原因。除了拥有并设置了它的组件，其他组件都无法访问。

组件可以选择把它的 state 作为 props 向下传递到它的子组件中：

<FormattedDate date={this.state.date} />

FormattedDate 组件会在其 props 中接收参数 date，但是组件本身无法知道它是来自于 Clock 的 state，或是 Clock 的 props，还是手动输入的：

function FormattedDate(props) {
    return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}

这通常会被叫做“自上而下”或是“单向”的数据流。任何的 state 总是所属于特定的组件，而且从该 state 派生的任何数据或 UI 只能影响树中“低于”它们的组件。