为什么这里的handleAdd要用高阶写法，useCallback不行呢？

Question

试了试，handleRemove、handleAdd、handleCartBtn用useCallback不行。
useCallback不是也有记忆功能吗？

Answer 1

西门老舅 2023-03-01 20:46:30

你好，需要这样做才行

const handleAdd = useCallback((id) => {

        return () => {

          let cloneList = _.cloneDeep(list)

          let now = cloneList.find((v)=> v.id === id)

          now.number++

          setList(cloneList)

        }

      }, [list])

      const handleRemove = useCallback((id) => {

        return () => {

          let cloneList = _.cloneDeep(list)

          let now = cloneList.find((v)=> v.id === id)

          if( now.number > 1 ){

            now.number--

          }

          setList(cloneList)

        }

      }, [list])

因为 一开始 list是空数组，如果用useCallback包起来，而第二个参数是空数组的话，那么list只能为空的时候执行一次，后续list更新后，也不会重新创建函数了，那么list在函数内就一直是空函数了。

• LydiaSo #1

  问老师和楼主，为什么会想到用useCallback来包这个函数呢？纯粹为了性能优化吗？是不是高阶函数比较吃性能？另外会不会提倡多用useCallback来包住组件里面的函数呢？
  
  另外有没有让只改变了属性的那个Item组件重新渲染，其他没有改变的不渲染？

• 西门老舅 回复 LydiaSo #2

  你好，usecallback确实就是为了提升性能的，尤其是在有循环渲染的时候，可能会重新渲染没有改变的item组件，所以使用usecallback可以只针对改变的item组件进行重渲染。当然平时我们开发的时候并不用特意去使用usecallback，只有需要优化或者感觉页面有卡顿再考虑是否改造一下代码。

• LydiaSo 回复 西门老舅 #3

  我在子組件添加了隨機數，然後就算只對一款商品進行操作，其他item組件依然會重新渲染。那些和加減按鈕，放入購物車按鈕都已經用了useCallback。是不是因為useCallback裡面的依賴項是list，所以一操作就整個list一起變化，所以綁定按鈕的函數一定會重新生成一個一樣的函數，所以傳入各個子組件的函數也是會變化。所以只要改變一個商品，所有商品的隨機數都會變？這個情況下是不是做不了性能優化？

点开查看后面6条评论