我们上一节了了解了函数式组件和类组件的处理方式,本质就是处理基于 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="加法" />