react 学习(三) 组件更新

我们上一节了了解了函数式组件和类组件的处理方式，本质就是处理基于 babel 处理后的 type 类型，最后还是要处理虚拟 dom。本小节我们学习下组件的更新机制。

我们知道我们定义类组件的时候，只能通过 setState 方式修改状态值，这样页面才会重新渲染。如果你直接修改 state，其实没有什么作用的。

实现简版更新机制

我们先写下 Counter 的例子，点击加一，如下：

// src/index.js

class Counter extends React.Component {
  constructor(props) {
    super(props);
    // 类的构造函数中 唯一给 state 赋值的地方
    this.state = {
      number: 0,
    };
  }

  handleClick = () => {
    // 明显 setState 是继承来的
    this.setState({
      number: ++this.state.number,
    });
  };
  render() {
    return (
      <div>
        <p>{this.props.title}</p>
        <p>{this.state.number}</p>
        <button onClick={this.handleClick}>plus</button>
      </div>
    );
  }
}
ReactDOM.render(<Counter title="加法" />