回顾函数组件
函数组件
// class 组件
class List extends React.Component {
constructor(props) {
super(props)
}
render() {
const { list } = this.props
return <ul>{list.map((item, index) => {
return <li key={item.id}>
<span>{item.title}</span>
</li>
})}</ul>
}
}
// 函数组件
function List(props) {
const { list } = props
return <ul>{list.map((item, index) => {
return <li key={item.id}>
<span>{item.title}</span>
</li>
})}</ul>
}class 组件 vs 函数组件
class 组件有如下问题
按照 React 函数式编程的思维来说，一个组件更像一个函数，而不像一个 class ，即 view = fn(props) 所以，函数组件会看起来更简洁、符合逻辑。
但函数组件没有 state ，没有生命周期，还无法取代 class 组件。所以，才有了 React Hooks 。
state hook
函数组件，要求必需是纯函数，不能有副作用。因此，要在函数组件使用 state ，不能直接使用，而是要“钩”进来，这就是 Hooks
那如何把 state “钩”到函数组件呢？
代码总结
注意命名规范
effect hook
有了 state 之后，还差一个常用的功能 —— 组件生命周期。例如，组件经常会在 didMount 里发请求
模拟声生命周期
effect 实现的是副作用，解释一下这个词
模拟 ComponentWillUnMount 和 class 组件的 WillUnMount 还不一样。
以一个“监听好友在线状态（支持途中好友切换）”的组件为例子说明 —— FriendStatusClass.js 和 FriendStatus.js ，对比着看。
小结
有了 state ，有了最基本的 3 个生命周期，日常见的功能也就都能做了
