Parent 中的 React useCallback() 函数仅在使用 React.memo 时才能与 Child 一起正常工作，如果没有它则不起作用，有帮助吗？

Question

父组件

The parent component contains input which on change sets the state "local" and a button which on click takes this "local" state's value and sets it to "sendLocal"

函数

changehandler：输入类型改变时触发。
sendLocalValue ：采用“本地”值将其放入按钮单击时触发的“sendLocal”变量。

sendValue：这个带有依赖项“sendLocal”的记忆函数在子组件被渲染后作为道具传递给子组件触发器。

import React, { useState, useCallback } from "react";
import ChildComponent from "./ChildComponent";

function ParentComponent() {
  const [local, setLocal] = useState();
  const [sendLocal, setsendLocal] = useState();

  const changehandler = (e) => {
    console.log("parent");
    setLocal(e.target.value);
  };

const sendLocalValue = () => {
        setsendLocal(local);
      };

  const sendValue = useCallback(() => {
    return sendLocal;
  }, [sendLocal]);



  return (
    <>
      <input type="text" onChange={changehandler} defaultValue={local} />
      <button onClick={sendLocalValue}>send</button>
      <ChildComponent getValue={sendValue} />
    </>
  );
}

export default ParentComponent;

子组件

getValue prop calls the memoized "sendValue" function of parent which returns the value of sendLocal.

问题

Everything works fine,the child component renders only when the "sendLocal" value changes on button click but if i remove React.memo() in child both the component render on input type change even with useCallback() used, why?

    import React, { useEffect, useState } from "react";

function ChildComponent({ getValue }) {
      console.log("child");
    
      return <div>child's {getValue()}</div>;
    }

export default React.memo(ChildComponent);

Answer 1

有一种普遍的误解，认为 React 组件会在 props 或状态发生变化时重新渲染。虽然这部分是正确的，但可能会导致误解：当 React 组件的状态发生变化或当其父级重新渲染时（因为其状态已更改或因为其父级重新渲染，等等），React 组件会重新渲染。

所以这意味着每次 ParentComponent 重新渲染时，它的所有（未记忆的）子级都将重新渲染。

为避免这种情况，您可以使用 React.memo 或 React.PureComponent。

您可以通过删除 React.memo 并且不将任何道具传递给 ChildComponent 来验证这一点。即使没有道具，它也会在每次其父级重新渲染时重新渲染。

Answer 2

当父级重新渲染时，子级的整个道具对象被创建为一个新对象，这导致子级重新渲染。记住所有不同的单个道具并不重要，您必须记住组件本身，以便在整个道具对象更改时它不会重新渲染。

在这种情况下，这也意味着您仍然需要记住功能以及子组件，因为React.memo只是对各个道具进行浅比较。

Parent 中的 React useCallback() 函数仅在使用 React.memo 时才能与 Child 一起正常工作，如果没有它则不起作用，有帮助吗？

React useCallback() function in Parent is only working fine with Child if React.memo is used, without it not working, any khelp?

reactjs

react-hooks

memo

usecallback