在 React JS 中使用带有 onchange 函数的 useCallback答案

【问题标题】：useCallback with onchange function in React JS在 React JS 中使用带有 onchange 函数的 useCallback
【发布时间】：2021-07-03 08:38:34
【问题描述】：

我有 2 个组件。在父组件中我有这个：

const Demo = () => {
  const [state, setState] = useState(true);
  const onChange = useCallback(
    (value: string) => {
      console.log(value);
    },
    [],
  );

  return (
    <div className="a">
      <button onClick={() => setState(!state)}>sds</button>
      <div className="123">
        <Bar searchHandler={onChangeSearchHandler} />
      </div>
    </div>
  );
};

在Bar 组件中我有这个：

const Bar = ({ searchHandler }) => {
    console.log('bar');
  return (
    <div>
      <input type="text" onChange={(value) => searchHandler(value.target.value)} />
    </div>
  );
};

用useCallback 包装onChange 我希望缓存该函数，当我点击<button onClick={() => setState(false)}>sds</button> 时我不想渲染Bar 组件，但它被触发了。为什么会触发Bar 组件以及如何使用useCallback 防止这种情况发生？

【问题讨论】：

useCallback 函数实例保持不变，这是正确的，但不能假设子组件的渲染函数不再运行。但是，您可以将子组件包装在 React.memo 中。但是您仍然不能保证不调用渲染函数。但说真的：不要尝试优化渲染函数的调用频率。
顺便说一句：我认为您在onChangeSearchHandler 与onChange 之间存在拼写错误

标签： reactjs react-hooks

【解决方案1】：

这与您使用useCallback 包装的onChange 函数无关。 Bar 被重新渲染，因为您正在通过其父组件中的 setState 更改状态。当您更改组件中的状态时，它的所有子组件都会重新渲染。

您可以通过以下方式自行验证：

const Demo = () => {
  const [state, setState] = useState(true);

  return (
    <div className="a">
      <button onClick={() => setState(!state)}>sds</button>
      <div className="123">
        <Bar />
      </div>
    </div>
  );
};

const Bar = ({ searchHandler }) => {
  console.log('bar');

  return (
    <div></div>
  );
};

您会看到Bar 无论如何都会重新渲染。

如果您想跳过重新渲染任何子组件，您应该在适用时使用React.memo 记住它们。

此外，您应该熟悉 react 中的状态如何工作以及它如何影响嵌套组件，因为这是一个主要概念。

【讨论】：