关于react.js:react-useCallback-闭包陷阱

1. 为什么须要useCallback

  • 在应用useCallback 和 useMemo钩子之前,如果每次批改parent的count,都会导致child从新渲染
const Child = (props) => {
  console.log('Child render');
  return (
    <div>
      <button onClick={props.clickCallback}>Child click</button>
    </div>
  )
}

const parent = () => {
  const [count, setCount] = useState(1);
  const cb = () => {
    console.log(count);
  };
  
  return (
    <div>
      parent
      <button onClick={() => setCount()}>click</button>
      <Child clickCallback={cb} />
    </div>
  )
}

2. 场景复现

  • 函数组件中,个别 useCallback 和 useMemo都是搭配应用, 模仿componentShouldUpdate钩子,防止不必要的渲染。优化之后,咱们就发现,在parent中,一直的setCount批改状态,也不会触发Child组件的更新。彷佛解决了 父函数组件更新状态,导致子组件的不必要更新问题。然而当点击子组件的button时,就会发现,打印的是 count的初始值 1,这也就是 useCallback的闭包陷阱,不能拿到最新的state。
const Child = (props) => {
  console.log('Child render');
  return (
    <div>
      <button onClick={props.clickCallback}>Child click</button>
    </div>
  )
}

const parent = () => {
  const [count, setCount] = useState(1);
  
  const cb = React.useCallback(() => {
    console.log(count);
  }, []);

  const ChildMemo = React.useMemo(() => <Child clickCallback={cb} />, [cb]);

  return (
    <div style={{ 
      width: '100vw', height: '100vh', 
      justifyContent: 'center', alignItems: 'center', 
      display: 'flex', 
      flexDirection: 'column' }}
     >
      parent count : {count}
      <button onClick={() => setCount(count + 1)}>click</button>
      {ChildMemo}
    </div>
  )
}

3. 解决形式有两种: 两种形式都是将callback保留在一个援用对象中,区别就在于,形式2不须要去批改子组件,然而也减少了了解的老本

  • 放弃useCallback, 应用 useRef钩子,用ref.current去援用箭头函数。应用useRef还须要对子组件回调的调用批改一下。
const Child = (props) => {
  console.log('Child render');
  return (
    <div>
      <button onClick={() => {
        props.callbackRef.current();
           }}
       >Child click</button>
    </div>
  )
}

const parent = () => {
  const [count, setCount] = useState(1);
  
  const cbRef = React.useRef(null);
  cbRef.current = () => {
    console.log(count);
  };

  const ChildMemo = React.useMemo(
    () => <Child callbackRef={cbRef} />,
    []
  );

  return (
    <div style={{ 
      width: '100vw', height: '100vh', 
      justifyContent: 'center', alignItems: 'center', 
      display: 'flex', 
      flexDirection: 'column' }}
     >
      parent count : {count}
      <button onClick={() => setCount(count + 1)}>click</button>
      {ChildMemo}
    </div>
  )
}
  • 自定义一个hook,应用 useCallback搭配useRef
const useImmediateValue = (cb) => {
  const ref = useRef(cb);
  ref.current = cb;
  const val = useCallback(() => {
     ref.current();
  }, []);
  return val;
}

const Child = (props) => {
  console.log('Child render');
  return (
    <div>
      <button onClick={props.clickCallback}>Child click</button>
    </div>
  )
}

const parent = () => {
  const [count, setCount] = useState(1);
  
  const cb = useImmediateValue(() => {
    console.log(count);
  })

  const ChildMemo = React.useMemo(
    () => <Child clickCallback={cb} />,
    []
  );

  return (
    <div style={{ 
      width: '100vw', height: '100vh', 
      justifyContent: 'center', alignItems: 'center', 
      display: 'flex', 
      flexDirection: 'column' }}
     >
      parent count : {count}
      <button onClick={() => setCount(count + 1)}>click</button>
      {ChildMemo}
    </div>
  )
}

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年50元

阿里云限时活动-2核2G-5M带宽-60G SSD-1000G月流量 ,特惠价99元/年(原价1234.2元/年,可以直接买3年),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表评论

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据