如何删除 React 中包含子组件的功能性记忆组件的渲染器？

Question

在为几个不同的输入编写处理程序时，我遇到了重新渲染包含子组件的组件的问题。 如何删除渲染器？

只有没有子组件和使用useMemo的组件不会被渲染。

这只是代码的一部分。 这里完整的代码。

// handle changes from input
export const useInputHandler = ({ initValues }) => {
  const [values, setValues] = useState(initValues || {});

  const handlerChange = useCallback(
    event => {
      const target = event.target;
      const name = target.name;
      const value = target.value;

      setValues({
        ...values,
        [name]: value
      });
    },
    [values]
  );

  return [values, handlerChange];
};

const App = () => {
  const [clicksNum, setClicks] = useState(0);

  const countClicks = useCallback(() => {
    setClicks(c => c + 1);
  }, []);

  const [values, handleChange] = useInputHandler({
    initValues: { simple: "", counter: "", empty: "" }
  });

  useEffect(() => {
    console.log("VALUES: ", values);
  }, [values, clicksNum]);

  return (
    <div style={{ display: "flex", flexDirection: "column", width: "30%" }}>
      <Button onClick={countClicks} />

      <Input onChange={handleChange} name="simple" value={values.simple}>
        {<div>hello</div>}
      </Input>

      <Input onChange={handleChange} name="counter" value={values.counter}>
        {clicksNum}
      </Input>

      <Input onChange={handleChange} name="empty" value={values.empty} />
    </div>
  );
};

我希望每次单击按钮时都不会重新渲染输入组件。 在这种情况下，只应重绘第二个输入（名称为counter ）。 因为它包含了 state 的值 ( clicksNum )。

Answer 1

您的输入重新呈现，因为它的孩子改变。

{<div>Hello</div>}在每次渲染时都是不同的实例。

如果您将其替换为以下内容：

const hello = useMemo(() => <div>Hello</div>, []);

如果任何依赖项发生更改，它只会创建一个新实例。 没有依赖项，您的重新渲染将消失。

您始终可以通过记忆任何组件来防止不必要的重新渲染，然后只有在任何依赖项发生更改时才会重新渲染。

const memoizedInput = React.useMemo(
  () => (
    <Input onChange={handleChange} name="simple" value={values.simple}>
      <Button onClick={countClicks} />
    </Input>
  ),
  [handleChange, countClicks, values.simple]
);