React 避免不必要的更新(函数组件)

避免子组件的不必要更新

使用memo()对函数组件进行缓存，使其只有在props变化时重新执行。

不必要的赋值

缓存引用类型

当组件执行时，会对组件中的所有变量重新初始化。如下代码：

const myComponent = ()=>{
    const data = [{...},...]
    const [n,setN] = useState(0) 
    return (
    <>
    <button onClick={()=>setN(n+1)}>increment</button>	
    <List dataSource={data}/> // 假设List组件是由memo(List)导出
    </>
    )
}

每次点击 increment 按钮都会出发 myComponent 组件的执行，从而导致 data 的从新初始化。而 List 组件发现 dataSource属性的引用地址发生了变化就会导致组件重新执行。

使用useMemo缓存data引用的地址，有效的避免组件执行时不必要的更新引用的变量

const data = useMemo(()=>[{...},...],[])

缓存函数

至此我们发现了变量的初始化会导致组件的重新渲染，那么上面的代码中视乎还存在一个问题 <button onClick={()=>setN(n+1)}>increment</button>，这里将箭头函数直接写死在了元素上，那么每次执行都会重新创建一个 “新的” 箭头函数。如果当前的组件不是一个元素而是一个组件的话同样会导致组件的不必要执行。

使用useCallback缓存函数，只有在n变化的时候对函数更新

<button onClick={useCallback(()=>setN(n+1),[n])}>increment</button>

可读性上的问题可以通过将代码从模板中抽离解决。

总结

总的来说一句话。在函数组件中等于号右边的初始化操作都需要加上 use 前缀（希望读者能够在工作中很好运用起来）。例如

const fn = useCallback(()=>{},[])

const columns = useMemo(()=>({}),[]) //返回对象时需要使用括号包裹

const [state,setState] = useState()