我有一个父组件,在其中我包含了一个带有道具的子组件。
但是当父组件中的任何状态发生更改(与子组件无关)时,子组件将重新渲染。我不想重新渲染
每次状态更改时。我们可以停下来吗?
import React, { useState } from "react";
import ReactDOM from "react-dom";
import Child from "./child";
import "./styles.css";
function App() {
const [any_state, setAnyState] = useState(false);
const handleClick = () => {
setAnyState(!any_state);
};
return (
<div className="App">
Parent Page ({any_state ? "true" : "false"})
<br />
<button onClick={handleClick}>Click me</button>
<Child data={"any data"} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
child.js
import React from "react";
function Child(props) {
console.log("child component");
return <div className="App">child Page</div>;
}
export default Child;
https://codesandbox.io/s/clever-oskar-fpxm3?fontsize=14
我不希望在每次状态更改时在控制台中显示“子组件”。
你想使用React.memo
为了这。阅读更多here.
这将防止在 props 没有改变时重新渲染。
代替export default Child;
use export default React.memo(Child);
在你的child.js
.
import React from "react";
function Child(props) {
console.log("child component");
return <div className="App">child Page</div>;
}
export default React.memo(Child);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)