React 功能组件从子级更改父级的状态而不渲染所有子级答案

【问题标题】：React Functional Components change state of parent from child without rendering all childrenReact 功能组件从子级更改父级的状态而不渲染所有子级
【发布时间】：2021-12-10 11:23:20
【问题描述】：

可以在 React 中使用钩子从子组件更改父组件状态（在多个地方解释为 here 和 here）从父组件到子组件共享回调：

function Parent() {
    const [value, setValue] = React.useState("");

    function handleChange(newValue) {
      setValue(newValue);
    }

    // Pass a callback to Child
    return <Child value={value} onChange={handleChange} />;
}

然后你可以在 Child 中使用回调：

function Child(props) {
    function handleChange(event) {
        props.onChange(event.target.value);
    }
  
    return <input value={props.value} onChange={handleChange} />
}

这种方法的缺点是当您有多个孩子时。回调必须作为参数传递给所有子函数，因为回调需要访问 setValue 必须在父函数中声明。

所以每次渲染父级时都会创建回调函数，并强制渲染所有子级。

我使用React memo 来避免这个问题，所以我可以定义何时需要再次渲染孩子，但是我想知道是否有更好的方法来解决这个问题。

【问题讨论】：

在多种情况下，您可能需要父级中的状态。例如：reactjs.org/tutorial/tutorial.html#lifting-state-up
提供的示例是一个通用示例。不是一个具体的案例，它只是反映了普遍的问题。如果您查看我在上一条评论中提供的示例，即使您提出了更改，您也会看到相同的问题。

标签： javascript reactjs react-hooks

【解决方案1】：

这正是 useCallback 的用途！

useCallback 将返回回调的记忆版本，仅当其中一个依赖项发生更改时才会更改。这在将回调传递给依赖引用相等性以防止不必要的渲染的优化子组件时很有用

你可以修改你的父组件看起来像：

function Parent() {
    const [value, setValue] = React.useState("");

    const handleChange = React.useCallback((newValue) => {
       setValue(newValue);
    }, []);

    // Pass a callback to Child
    return <Child value={value} onChange={handleChange} />;
}

【讨论】：