我对 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 https://codesandbox.io/s/musing-cookies-g7szr
请注意,如果您单击“ComponentA”,尽管该组件上没有更改任何 props,但该 ComponentA 会被重新渲染(您可以在控制台中看到它)。这是我的真实用例的简化示例。在我的实际用例中,ComponentA 是一个地图,其中有很多东西(缩放、居中)
将被重置。我想防止这些重置以及重新渲染所需的 1 秒。因此我提出这个简化的例子。
那么如何将信息从 ComponentA 传递到 Component,而不重新渲染 ComponentA 本身呢?感谢您在这里提供帮助。
use useCallback
在 Parent 中,这样该函数就不会一次又一次地创建,而仅在初始渲染时创建。
使用React.memo
这样,当没有更改 props 时,组件就不会重新渲染。
App
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 https://codesandbox.io/s/affectionate-boyd-v7g2t?file=/src/App.js
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)