0

我创建了一个反应应用程序，其中有一个带有删除操作的项目列表。我知道，如果我从父级（项目容器）传递此删除操作，我可以在父级中使用“useCallback”来防止删除方法的不必要重新创建。

但是，如果在 item 组件中定义了 delete 方法并在其中使用了“useCallback”会发生什么？它行不通吗？它不会使用相同的记忆方法而不每次都创建一个新方法吗？

换句话说，记忆的范围是什么？是全球性的吗？还是每个组件？

伪代码：

function ListComponent(){
  let arr = [1,2,3]
  return <div>
    {
      arr.map(item => <Item id={item} />
    }
  </div>
}

function Item({id}){
  let memorizedDelete = useCallback(() => alert("deleting"))
  return <div onClick={memorizedDelete} >  {id} </div>
}

谢谢

4

1 回答 1

0

记忆的范围是什么？是全球性的吗？还是每个组件？

它绝对不是全球性的。

React 钩子仅在功能组件的主体或其他反应钩子中有效。然后，范围将被限制为功能组件的主体，或定义自定义钩子的函数主体。

组件范围

const MyFunctionalComponent = () => {
  const memoizedCallback = useCallback(() => expensiveFn(...args), [...args]);
  // memoizedCallback enclosed in scope of MyFunctionalComponent
};

钩子函数作用域

const useMyCustomHook = (arg, deps) => {
  // other hooks and logic
  const memoizedCallback = useCallback(() => expensiveFn(...args), [...args]);
  // memoizedCallback enclosed in scope of useMyCustomHook
};

注意：自定义的 hook 可以返回 memoized 回调，所以它的作用域基本上还是局限于实例化 react hook 的组件。

但是，如果我在 item 组件中定义 delete 方法并在其中使用“useCallback”会发生什么？它行不通吗？它不会使用相同的记忆方法而不每次都创建一个新方法吗？

这将创建一个仅传递给单个孩子的记忆回调，除了如果映射数组被更新然后回调不需要重新创建之外，这里真的没有任何好处。

于 2021-01-27T08:20:33.587 回答