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

Question

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

1.1。 如果设置器 function 收到 function 它的参数将始终是之前的 state？

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

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

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

Answer 1

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

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

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

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

1.1。 如果设置器 function 收到 function 它的参数将始终是之前的 state？

是的。 像 setState 一样的 setter function 用于 class 组件。 这是仅更新 state 字段的示例：

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

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

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

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

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

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

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

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

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

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

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

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