时间戳

首页 > 解决方案 > 如果使用 React.memo，则 Parent 中的 React useCallback() 函数只能与 Child 正常工作，没有它不起作用，任何帮助？

reactjs - 如果使用 React.memo，则 Parent 中的 React useCallback() 函数只能与 Child 正常工作，没有它不起作用，任何帮助？

问题描述

父组件

父组件包含在更改时将状态设置为“本地”的输入，以及在单击时获取此“本地”状态的值并将其设置为“sendLocal”的按钮

功能

  1. changehandler ：触发输入类型更改。

  2. sendLocalValue ：将“本地”值放入“sendLocal”变量中，单击按钮时触发。

  3. 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 调用 parent 的memoized "sendValue" 函数，该函数返回 sendLocal 的值。

问题

一切正常，子组件仅在单击按钮时“sendLocal”值发生变化时呈现，但如果我删除子组件中的 React.memo()，即使使用了 useCallback()，组件在输入类型上的呈现也会发生变化，为什么？

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

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

export default React.memo(ChildComponent);

标签： reactjsreact-hooksmemousecallback

解决方案

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

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

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

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

推荐阅读