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

Question

在为几个不同的输入编写处理程序时，我遇到了重新渲染包含子组件的组件的问题。如何删除渲染器？只有没有子组件的组件和使用useMemo 的组件不会被渲染。这只是代码的一部分。这里有完整的代码。// handle changes from inputexport 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(

  () => (

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

      <Button onClick={countClicks} />

    </Input>

  ),

  [handleChange, countClicks, values.simple]

);