【前端学习笔记】React的state和生命周期

参考自：http://react.html.cn/docs/state-and-lifecycle.html

React的生命周期：

• 挂载时 componentDidMount() 钩子在组件输出被渲染到 DOM 之后运行。 适合代码：适合 AJAX 请求

• 卸载前 componentWillUnmount() 钩子在组件卸载之前立即调用。 适合代码：清理监听器

• 获取对象信息更新组件 getDeriveStateFromProps(nextProps, prevProps) 从此函数返回的对象。适合代码：

正确使用state

1，不要直接修改state状态，唯一可以修改的地方是构造函数。
应该使用setState()修改state状态。
2，state状态更新可能是异步的
因为this.props和this.state可能是异步更新的，此时应该使用setState的第二个形式。
它接收一个函数，而不是一个对象。
该函数接收前一个状态值作为第 1 个参数， 并将更新后的值作为第 2 个参数:

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

3，state状态更新会被合并
当你调用 setState()， React 将合并你提供的对象到当前的状态中。

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 的值。

数据向下流动

无论作为父组件还是子组件，它都无法获悉一个组件是否有状态，同时也不需要关心另一个组件是定义为函数组件还是类组件。

这就是 state(状态) 经常被称为 本地状态 或 封装状态的原因。 它不能被拥有并设置它的组件 以外的任何组件访问。

一个组件可以选择将 state(状态) 向下传递，作为其子组件的 props(属性)：

<h2>It is {this.state.date.toLocaleTimeString()}.</h2>

同样适用于用户定义组件:

<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 只能影响树中 “下方” 的组件。

如果把组件树想像为 props(属性) 的瀑布，所有组件的 state(状态) 就如同一个额外的水源汇入主流，且只能随着主流的方向向下流动。