Javascript 防止通过修改父状态重新渲染

如何修改父组件中的状态，并将其作为道具传递给子组件，但仅在修改的状态更改时重新呈现这些子组件

我的基本设置目前可以正常工作，但会导致一些不必要的重新渲染。父组件从URL获取信息（使用react路由器挂钩）并对其进行修改，然后将其作为道具传递给子组件。该组件如下所示：

 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.
    )



};

constmycomponent=（）=>{
const{dataType}=useParams（）；
const{search}=useLocation（）；
///这些函数帮助我将数据转换为更易于管理的内容
consty=queryString.parse（search）.collection；
const{collections，gqlQuery}=getCollections（数据类型）；
const collection=collections.find（x=>x.value==y）；
返回(
…此组件正在不必要地重新渲染。
)
};

---

如何确保URL不变（使用react router提取的

数据类型

和

搜索

值）接收派生数据的子组件也不会不必要地重新呈现？

第一步是确保仅当其中一个依赖项发生更改时，

集合

变量的引用才会更改：

useMemo(() => {
  const y = queryString.parse(search).collection;
  const { collections, gqlQuery } = getCollections(dataType);
  const collection = collections.find(x => x.value === y);
}, [search, dataType]);

第二种方法是确保组件仅在收到新道具时重新渲染：

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);

PS：请注意，React在重新渲染时通常是超快速的。在衡量其影响后，仅将其用作性能增强。这是有可能的