时间戳

首页 > 解决方案 > React useState hook：将 setter 传递给子功能更新、回调和 useCallback

javascript - React useState hook：将 setter 传递给子功能更新、回调和 useCallback

问题描述

关于 React 钩子，我有几个彼此相关的问题：useState和useCallback.

  1. 究竟何时需要功能更新？

1.1。如果 setter 函数接收到一个函数，它的参数将始终是之前的状态？

  1. 如果我想从子组件更新父状态，我应该如何将设置器传递给子组件 - 将其包装在另一个函数中作为回调，如此处所述？只是按照这里的建议直接传递？

2.1。每种方法的原因和优点/缺点是什么？

  1. 如果我可以直接传递它并且我正在使用备忘录，那么这里是否需要 useCallback ？
  1. 如果我想在从孩子更新父状态时使用最新的状态数据，我应该怎么做？

4.1。在这种情况下向孩子传递回调有用吗？

标签： javascriptreactjsreact-hooks

解决方案

1. 究竟什么时候需要功能更新？

您可能需要更新组件的任何状态。例如，您通过 api 从服务器获取用户，您需要将该用户存储在您的组件中。为此，您需要 useState 来存储该用户对象。这是示例：

const [user, setUser] = useState({}); // declaration

let newUser = u; // u is coming from api
setUser(newUser);

1.1。如果 setter 函数接收到一个函数，它的参数将始终是之前的状态？

是的。类组件中使用了 setState 之类的 setter 函数。这是仅更新状态字段的示例：

this.setState({username: 'khabir'});

在这里，您正在使用以前的状态更新状态：

this.setState(prevState =>{
   return{
        counter : prevState.counter +1
   }
})

2.如果我想从子组件更新父状态，我应该如何将设置器传递给子组件-将其包装在另一个函数中作为回调，如此处所述？只是按照这里的建议直接传递？

两个例子都是一样的。你可以使用任何人。

3. 如果我可以直接传递它并且我正在使用备忘录，那么是否需要使用这里解释的 useCallback ？

如果您将任何函数引用从父组件传递给子组件，则会在每次渲染 Parent 时创建它，因此 prevProps 和 props 不再相同，即使它们是相同的。

要应用备忘录，我们需要确保函数引用不会在每次渲染 Parent 时不必要地重新创建。这就是使用 useCallback 的原因。请完整阅读该文章以获得更好的理解。

4.如果我想在从child更新父状态时使用最新的状态数据，我应该怎么做？

您不能直接从子组件更新父状态，但您可以将函数引用发送到子组件并从在父组件上定义（函数）的子组件调用该函数。在该函数体中（在父级中），您可以更新父组件的状态。

4.1。在这种情况下向孩子传递回调有用吗？

是的，正如我在问题 4 的答案中所说的那样。

推荐阅读