本篇文章打算简单介绍react的生命周期，并尝试与无状态组件做个对比。
在我之前的文章中，我几乎都使用无状态组件。在使用redux或者mobx之后，理论上可以全部使用无状态组件。
React.Compont 生命周期
class Hello extends React.Component {
constructor(props) {
super(props)
console.log("constructor")
this.state = {
age: 0
}
}
componentWillMount() {
console.log("componentWillMount")
}
render() {
console.log("render")
return (
<div className='Hello'>
<div>{this.props.name}</div>
<div>{this.state.age}</div>
<Button type="primary" onClick={() =>
this.setState({
age: this.state.age === 0 ? 111 : 0
})}
>Click</Button>
</div>
);
}
componentDidMount() {
console.log("componentDidMount")
}
componentWillReceiveProps() {
console.log("componentWillReceiveProps")
}
shouldComponentUpdate() {
console.log("shouldComponentUpdate")
return true
}
componentWillUpdate() {
console.log("componentWillUpdate")
}
componentDidUpdate() {
console.log("componentDidUpdate")
}
componentWillUnmount() {
console.log("componentWillUnmount")
}
componentDidCatch() {
console.log("componentDidCatch")
}
}
const Home = observer(() => {
return (
<div className='Home'>
<Count />
<ChangeName />
<Hello name="swen"/>
</div>
);
})
如上，Component可以是UI模块化， 可以单独设计，重用，是一个抽象类，基本使用如上。
至少需要一个render方法，父组件可以通过props传递数据到子组件，组件内部通过state去改变数据。
如上，生命周期大概分为三部分
Mounting
image.png
这个时期函数调用如下，几个点需要注意：
constructor()函数用于初始化state和props，绑定方法，必须调用super(props)。
componentDidMount在render()之后执行，调用setState()将会重新渲染组件。
建议在此方法发布订阅
Updating()
点击按钮改变state，根据shouldConponment的返回值调用以下方法。
image.png
componentWillUnmount():组件Unmount或者销毁时调用，可以做一些清理工作，取消网络连接等。
具体看官方文档，讲的比较清楚。
无状态组件
纯函数就是相同的输入，永远都会有相同的输出，没有任何可观察的副作用
故名思议，内部无state(有props)的组件，纯的组件。输出取决于props。
例子可见前面的文章和github。
相比于 class 创建组件
- 语法更简洁
- 占内存更小（class 有 props context _context 等诸多属性），首次 render 的性能更好
- 可以写成无副作用的纯函数
- 可拓展性更强（函数的 compose，currying 等组合方式，比 class 的 extend/inherit 更灵活）
推荐使用无状态组件。
后续待补充。
