React Hooks 原理简析
说明 本文的原理简析基于 React 17.0.2 和 Legacy Mode ，不涉及 Concurrent Mode 。 函数组件与类组件 想要理解 Hooks，需要先理解函数组件与类组件之间的区别。 先看概括 React 设计理念的公式： 1 UI = render(data) React 根据状态渲染视图，且一个状态对应一个渲染结果。也就是说，数据是和渲染结果绑定的。 类组件与可变的 this 在 React 中，推荐使用不可变数据 (immutable data) 描述状态。需要更新状态时，应使用一份新的数据，而不是对原来的数据进行修改。 不过就算使用不可变数据，类组件中还是会有 this 的问题。先看一个类组件示例： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 /** 假设这里是某个用户的个人信息页 点击 Follow 将会关注该用户，关注成功后需要弹出消息，提示关注成功 通过 setTimeout 模拟了一个响应较慢的接口 */ class ProfilePage extends React.Component { showMessage = () => { alert('Followed ' + this....