javascript - 功能子组件不会在 props 更改时重新渲染

Question

我有一个非常重的(计算上的)功能组件(父组件)，它没有状态，并且很少有具有本地状态的子组件。 child 仅依赖于 parent 发送的 Prop 。

我将一个函数传递给其中一个子级 (ChildA)，以更改父级上变量的值。

此变量是不同子组件 (ChildB) 的 props 之一，该组件具有基于该 prop 的状态并在 useEffect Hook 中更新它。

当父组件上作为 prop 传递的值发生更改时，ChildB 组件不会重新渲染。

当然，在父级上引入状态(useState Hook )可以解决此问题，但会一遍又一遍地重新渲染父级，并会降低性能，因为父级有 500 多个嵌套组件，这些组件都会重新渲染。

引入某种 Store(Redux、MobX)可能会解决这个问题，但这有点过分了。

一个简化的例子:

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

export default function App() {
  return <Parent />    
}

const ChildA = ({ onAction }) => {
  return <button onClick={onAction}>CLICK</button>;
};

const ChildB = ({ coreValue }) => {
  const [value, setValue] = useState(0);

  useEffect(() => {
    setValue(coreValue);
  }, [coreValue]);

  return <div>My value: {value}</div>;
};

const Parent = () => {
  let calculatedValue = 0;

  const changeValue = () => {
    calculatedValue += Math.random();
  };

  return (
    <div>
      <ChildA onAction={changeValue} />
      <ChildB coreValue={calculatedValue} />
    </div>
  );
};

您可以在此处测试代码:https://codesandbox.io/s/vigilant-wave-r27rg

如何在 Prop 更改时仅重新渲染 ChildB？

Answer 1

您必须将值存储在父组件状态中，并将父组件状态值发送到 ChildB，在那里您不需要维护状态和 useEffect Hook 来捕获更改。请参阅此处的代码:https://codesandbox.io/s/adoring-chatelet-sjjfs

import React, { useState } from "react";
export default function App() {
  return <Parent />;
}
const ChildA = ({ onAction }) => {
  return <button onClick={onAction}>CLICK</button>;
};
const ChildB = ({ coreValue }) => {
  return <div>My value: {coreValue}</div>;
};
const Parent = () => {
  const [value, setValue] = useState(0);
  const changeValue = () => {
    setValue(value + Math.random());
  };
  return (
    <div>
       <ChildA onAction={changeValue} />
       <ChildB coreValue={value} />
    </div>
  );
};