gpt4 book ai didi

reactjs - 防止在包装器组件中启动 useState 的同级组件的重新渲染

转载 作者:行者123 更新时间:2023-12-02 02:56:11 25 4
gpt4 key购买 nike

我对 React 不是很有经验,但我的设置非常简单。

export default function App() {
const [title, setTitle] = useState("still-empty");

const myFunction = title => {
setTitle(title);
};

return (
<div className="App">
<ComponentA myFunction={myFunction} />
<br />
<br />
<ComponentB title={title} />
</div>
);
}



const ComponentA = ({ myFunction }) => {
console.log("Rendering Component A");

return (
<div onClick={() => myFunction(Math.random() * 1000)}> Component A </div>
);
};

export default ComponentA;


const ComponentB = ({ title }) => {
return <div> Title : {title}</div>;
};

export default ComponentB;

这是一个沙箱来测试这个: https://codesandbox.io/s/musing-cookies-g7szr

请注意,如果您单击“ComponentA”,则会重新呈现确切的 ComponentA(您可以在控制台中看到它),尽管此组件上没有更改任何 Prop 。这是我的真实用例的简化示例。在我的实际用例中,ComponentA 是一张 map ,里面有很多东西(缩放、居中) 将被重置。我想阻止这些重置以及重新渲染所需的 1 秒。因此,我提出了这个简化的例子。

那么如何将信息从 ComponentA 传递到 ComponentB,而不重新渲染 ComponentA 本身呢?感谢您在这里提供帮助。

最佳答案

在 Parent 中使用 useCallback,这样该函数就不会一次又一次地创建,而只会在初始渲染时创建。使用 React.memo 以便在没有更改 props 时组件不会重新渲染。

应用

export default function App() {
const [title, setTitle] = useState("still-empty");

const myFunction = useCallback(title => {
setTitle(title);
}, []);

return (
<div className="App">
<ComponentA myFunction={myFunction} />
<br />
<br />
<ComponentB title={title} />
</div>
);
}

组件A

import React, { memo } from "react";

const ComponentA = ({ myFunction }) => {
console.log("Rendering Component A");

return (
<div onClick={() => myFunction(Math.random() * 1000)}> Component A </div>
);
};

export default memo(ComponentA);

工作演示在这里: https://codesandbox.io/s/affectionate-boyd-v7g2t?file=/src/App.js

关于reactjs - 防止在包装器组件中启动 useState 的同级组件的重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61068816/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com