React Hooks 深入系列 —— 设计模式 (2)

可以使用 useReducer 来 hack forceUpdate, 但是尽量避免 forceUpdate 的使用。

const [ignored, forceUpdate] = useReduce(x => x + 1, 0) function handleClick() { forceUpdate() } Hooks 中 shouldComponentUpdate 的替代方案

在 Hooks 中可以使用 useMemo 来作为 shouldComponentUpdate 的替代方案, 但 useMemo 只对 props 进行浅比较。

React.useMemo((props) => { // your component }) useMemo 与 useCallback 的区别 useMemo(() => <component />) 等价于 useCallback(<component />)

useCallback: 一般用于缓存函数

useMemo: 一般用于缓存组件

依赖列表中移除函数是否是安全的?

通常来说依赖列表中移除函数是不安全的。观察如下 demo

const { useState, useEffect } = React function Example({ someProp }) { function doSomething() { console.log(someProp) // 这里只输出 1, 点击按钮的 2 并没有输出。 } useEffect( () => { doSomething() }, [] //