用useCallback函数包裹事件响应函数的必要性

Question

 const onSize = useCallback(() =>{
    console.log('render onsize')
    setSize({
      width:document.documentElement.clientWidth,
      height:document.documentElement.clientHeight
    })
  },[size]) 

老师如果这个函数不写callback我也觉得没有问题呢，会有什么影响吗，难道是避免其他的状态影响他重新渲染吗

Answer 1

茵风泳月 2019-05-23 13:47:15

同学你好，事实上这里的useCallback是有用的，看下面的代码：

    useEffect(() => {
        window.addEventListener('resize', onResize, false);

        return () => {
            window.removeEventListener('resize', onResize, false);
        };
    }, []);

我们在组件的整个生命周期中，只进行一次事件绑定和事件解绑，那么在解绑的时候，我们必须传入和绑定的时候同样的函数句柄才行，否则removeEventListener就是无效的。

如何保证前后两个句柄是同一个呢，一个思路是使用ref：

const onResize = useRef(() => {...});

另一种就是useCallback/useMemo，为了每次返回的句柄相同，我们必须把依赖参数设置为空数组[]。

因此你的代码中，依赖参数不应该包括size，同时呢，useCallback也是必要的。

祝您学习愉快！

• 提问者 qq_我的心向大海_ckuGNU #1

  非常感谢！哎妈呀茅塞顿开，感谢老师，就是写空数组就是在第一次渲染的时候，是新的函数，剩下不管状态如何变动，使用useCallback返回的数组还是原来的数组，感谢老师及时回复

• 野猪佩奇哒哒哒 #2

  老师要怎么测试resize事件是否每次都有被remove掉呢？