如何在 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）。因为它包含了状态的值（clicksNum）。

Answer 1

您的输入会重新呈现，因为它的子代发生了变化。{<div>Hello</div>} 在每次渲染时都是不同的实例。如果你用这样的东西替换它：const hello = useMemo(() => <div>Hello</div>, []);如果任何依赖项发生变化，它只会创建一个新实例。没有依赖关系，您的重新渲染将消失。你总是可以通过记住你的任何组件来防止不需要的重新渲染，只有当任何依赖项发生变化时它才会重新渲染。const memoizedInput = React.useMemo(&nbsp; () => (&nbsp; &nbsp; <Input onChange={handleChange} name="simple" value={values.simple}>&nbsp; &nbsp; &nbsp; <Button onClick={countClicks} />&nbsp; &nbsp; </Input>&nbsp; ),&nbsp; [handleChange, countClicks, values.simple]);