javascript - 如何在 React 中删除包含子组件的功能性内存组件的渲染器？

Question

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

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

这只是部分代码。 这里full code .

// 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)应该被重绘。因为它包装了状态的值 (clicksNum)。

Answer 1

您的输入重新呈现，因为它的 child 发生了变化。

{<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]
);