04. State & 生命周期

State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件.

State类似于vue中的data选项

将函数组件转换成 class 组件

在没有useState钩子函数之前，是通过class组件管理State ？

class Clock extends React.Component {
  render() {
    return (
    	<div>
      	<h1>Hello, world</h1>
        <h2>It is {this.props.date.toLocalTimeString()}</h2>
      </div>
    )
  }
}

每次组件更新时 render 方法都会被调用，但只要在相同的 DOM 节点中渲染 <Clock /> ，就仅有一个 Clock 组件的 class 实例被创建使用。这就使得我们可以使用如 state 或生命周期方法等很多其他特性。

单例模式？

向 class 组件中添加局部的 state

class Clock extends React.Component {
  // 第二步：添加构造函数，并给 this.state 赋初始值
  constructor(props) {
    super(props) // 通过super将props传递到父类构造函数中
    this.state = {date: new Date()}
  }
  render() {
    // 第一步：render 方法内，将 this.props 替换成 this.state
    return (
    	<div>
      	<h1>Hello, world</h1>
        <h2>It is {this.state.date.toLocalTimeString()}</h2>
      </div>
    )
  }
}


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

将生命周期方法添加到 Class 中

在具有许多组件的应用程序中，当组件被销毁时释放所占用的资源是非常重要的。

当 Clock 组件第一次被渲染到 DOM 中的时候，就为其设置一个计时器。这在 React 中被称为“挂载（mount）”。

同时，当 DOM 中 Clock 组件被删除的时候，应该清除计时器。这在 React 中被称为“卸载（unmount）”。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  // 挂载 - 挂载完成后执行
  componentDidMount() {
    // 组件挂载后开启定时器
    this.timerID = serInterval( // 可以向this添加任意属性字段
    	() => this.tick(), 1000
    )
  }

  // 卸载
  componentWillUnmount() {
    // 组件卸载后清除定时器，释放内存
    clearInterval(this.timerID)
  }

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

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

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

正确地使用 State

关于 setState() 你应该了解三件事：

不要直接修改 State


// Wrong 不要直接修改state
this.state.comment = 'Hello'

// Correct 应使用 setState() 方法
this.setState({comment: 'Hello'})

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

setState是React内部方法，使state更新具有响应式？

State 的更新可能是异步的

出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。

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

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

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

State 的更新会被合并

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

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

// 分别调用setState单独更新state下的属性
 componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

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