react State & 生命周期

state

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

将函数组件转换成 class 组件

通过以下五步将函数组件转成 class 组件：

1.创建一个同名的 ES6 class，并且继承于 React.Component。
2.添加一个空的 render() 方法。
3,将函数体移动到 render() 方法之中。
4.在 render() 方法中使用 this.props 替换 props。
5.删除剩余的空函数声明。

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

向 class 组件中添加局部的 state

我们通过以下三步将 date 从 props 移动到 state 中
1.把 render() 方法中的 this.props.date 替换成 this.state.date
2.添加一个 class 构造函数，然后在该函数中为 this.state 赋初值
3.移除 Clock 元素中的 date 属性：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {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')
);

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

componentDidMount() 方法会在组件已经被渲染到 DOM 中后运行
componentWillUnmount() 生命周期方法中清除计时器

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

 componentDidMount() {
   this.timerID = setInterval(
     () => 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使用 setState():

this.setState({comment: 'Hello'});

State 的更新可能是异步的

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

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

State 的更新会被合并

数据是向下流动的