javascript - 功能子组件不会在道具更改时重新呈现
问题描述
我有一个非常重(计算上)的功能组件(父),它没有状态并且具有本地状态的子子组件很少。孩子只依赖于父母发送的道具。
我将一个函数传递给其中一个孩子 (ChildA) 以更改 Parent 上变量的值。
此变量是不同子组件 (ChildB) 的道具之一,该组件具有基于该道具的状态并在 useEffect 挂钩中更新它。
当作为 prop 传递的值在 Parent 组件上发生更改时,ChildB 组件不会重新渲染。
当然,在 Parent 上引入状态(useState 挂钩)可以解决此问题,但会一遍又一遍地重新渲染父级,并且会破坏性能,因为 Parent 有 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
如何在道具更改时仅重新渲染 ChildB?
解决方案
您必须将值存储在父组件状态中,只需将父组件状态值发送给 ChildB,您不需要维护状态和 useEffect 挂钩来捕捉更改。在这里查看代码: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>
);
};