或者在父级就直接生成一个自带 memo 的子元素：
function Parent({ a, b }) { // Only re-rendered if `a` changes: const child1 = useMemo(() => <Child1 a={a} />, [a]); // Only re-rendered if `b` changes: const child2 = useMemo(() => <Child2 b={b} />, [b]); return ( <> {child1} {child2} </> ); }相比之下，Class Component 的写法通常是：
class Button extends React.PureComponent {}这样就自带了 shallowEqual 的 shouldComponentUpdate。
怎么替代 componentDidUpdate由于 useEffect 每次 Render 都会执行，因此需要模拟一个 useUpdate 函数：
const mounting = useRef(true); useEffect(() => { if (mounting.current) { mounting.current = false; } else { fn(); } });更多可以查看
怎么替代 forceUpdateReact 官方文档提供了一种方案：
const [ignored, forceUpdate] = useReducer(x => x + 1, 0); function handleClick() { forceUpdate(); }每次执行 dispatch 时，只要 state 变化就会触发组件更新。当然 useState 也同样可以模拟：
const useUpdate = () => useState(0)[1];我们知道 useState 下标为 1 的项是用来更新数据的，而且就算数据没有变化，调用了也会刷新组件，所以我们可以把返回一个没有修改数值的 setValue，这样它的功能就仅剩下刷新组件了。
更多可以查看
state 拆分过多useState 目前的一种实践，是将变量名打平，而非像 Class Component 一样写在一个 State 对象里：
class ClassComponent extends React.PureComponent { state = { left: 0, top: 0, width: 100, height: 100 }; } // VS function FunctionComponent { const [left,setLeft] = useState(0) const [top,setTop] = useState(0) const [width,setWidth] = useState(100) const [height,setHeight] = useState(100) }实际上在 Function Component 中也可以聚合管理 State：
function FunctionComponent() { const [state, setState] = useState({ left: 0, top: 0, width: 100, height: 100 }); }只是更新的时候，不再会自动 merge，而需要使用 ...state 语法：
setState(state => ({ ...state, left: e.pageX, top: e.pageY }));可以看到，更少的黑魔法，更可预期的结果。
获取上一个 props虽然不怎么常用，但是毕竟 Class Component 可以通过 componentWillReceiveProps 拿到 previousProps 与 nextProps，对于 Function Component，最好通过自定义 Hooks 方式拿到上一个状态：
function Counter() { const [count, setCount] = useState(0); const prevCount = usePrevious(count); return ( <h1> Now: {count}, before: {prevCount} </h1> ); } function usePrevious(value) { const ref = useRef(); useEffect(() => { ref.current = value; }); return ref.current; }通过 useEffect 在组件渲染完毕后再执行的特性，再利用 useRef 的可变特性，让 usePrevious 的返回值是 “上一次” Render 时的。
可见，合理运用 useEffect useRef，可以做许多事情，而且封装成 CustomHook 后使用起来仍然很方便。
未来 usePrevious 可能成为官方 Hooks 之一。
性能注意事项useState 函数的参数虽然是初始值，但由于整个函数都是 Render，因此每次初始化都会被调用，如果初始值计算非常消耗时间，建议使用函数传入，这样只会执行一次：
function FunctionComponent(props) { const [rows, setRows] = useState(() => createRows(props.count)); }useRef 不支持这种特性，需要。
掌握了这些，Function Component 使用起来与 Class Component 就几乎没有差别了！
4. 总结Function Component 功能已经可以与 Class Component 媲美了，但目前最佳实践比较零散，官方文档推荐的一些解决思路甚至不比社区第三方库的更好，可以预料到，Class Component 的功能会被五花八门的实现出来，那些没有被收纳进官方的 Hooks 乍看上去可能会眼花缭乱。
总之选择了 Function Component 就同时选择了函数式的好与坏。好处是功能强大，几乎可以模拟出任何想要的功能，坏处是由于可以灵活组合，如果自定义 Hooks 命名和实现不够标准，函数与函数之间对接的沟通成本会更大。
讨论地址是：精读《Stateless VS Class 组件》 · Issue #137 · dt-fe/weekly
如果你想参与讨论，请 点击这里，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。
关注 前端精读微信公众号
special Sponsors
DevOps 全流程平台
版权声明：自由转载-非商用-非衍生-保持署名（创意共享 3.0 许可证）