如何修改父组件中的状态,并将其作为 props 传递给子组件,但仅在修改后的状态发生变化时重新渲染这些子组件?
我的基本设置当前有效,但它导致了一些不必要的重新渲染。父组件从 URL 获取信息(使用 React-router hooks)并修改它,然后将其作为 props 传递给其子组件。该组件如下所示:
const myComponent = () => {
const { dataType } = useParams();
const { search } = useLocation();
/// These functions help me transform that data into something more manageable
const y = queryString.parse(search).collection;
const { collections, gqlQuery } = getCollections(dataType);
const collection = collections.find(x => x.value === y);
return (
<MyChild collection={collection} /> ... This component is re-rendering unnecessarily.
)
};
如何确保当 URL 不更改时(使用 React-router 提取的 dataType
和 search
值)接收派生数据的子组件也不会不必要地重新渲染?
最佳答案
第一步是确保仅当其中一个依赖项发生更改时,对 collection
变量的引用才会更改:
useMemo(() => {
const y = queryString.parse(search).collection;
const { collections, gqlQuery } = getCollections(dataType);
const collection = collections.find(x => x.value === y);
}, [search, dataType]);
第二个是确保组件仅在收到新 Prop 时重新渲染:
import { memo } from 'react';
function Child() {
}
export default memo(Child);
您还可以使用 memo
的第二个参数来自定义比较的内容。
function Child(props) {
}
function areEqual(prevProps, nextProps) {
/*
return true if passing nextProps to render would return
the same result as passing prevProps to render,
otherwise return false
*/
}
export default React.memo(Child, areEqual);
React.memo - Docs React.useMemo - Docs
PS:请注意,React 的重新渲染速度通常非常快。仅在测量其影响后将其用作性能增强。有机会它有worse performance than before
关于javascript - 通过修改父状态来防止重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61549865/