反应:避免在状态更改时重新渲染子组件

Question

我正在开发一个 React 应用程序，其中图形组件使用从父组件传递的 props 获取和显示数据。问题是父级也执行一些数据获取，并且更新父状态(尽管不影响子 props(似乎会重新渲染子项，从而在子项中启动重复的数据获取。

有关代码，请参阅下面的 https://jsfiddle.net/ctombaugh/cgzn7wst/10/和下文。

function App(props) {
const [year, setYear] = React.useState(2019);
const [list, setList] = React.useState([]);
React.useEffect(() => {
alert("App is fetching some lists");
setList(["a", "b", "c"]);
}, [setList]);
function handleYearChange(e) {
setYear(e.target.value);
}
return (<div>
<YearSelector value={year} onChange={handleYearChange}></YearSelector>
<Plot year={year}></Plot>
</div>);
}
function YearSelector(props) {
return <select value={props.value} onChange={e => props.onChange(e)} >
<option value="2019">2019</option>
<option value="2018">2018</option>
</select>
}
function Plot(props) {
const [data, setData] = React.useState([]);
React.useEffect(() => {
alert("Plot is fetching data for " + props.year);
setData([1, 2, 3]);
}, [props]);
return <div>I'm a plot</div>;
}
ReactDOM.render(<App/>, document.getElementById("container"));

Answer 1

每当重新渲染组件时，都会生成一个新的props对象，因此使用props作为useEffect的依赖项并没有真正的帮助。

如果 的副作用应仅在year更改时触发，请仅使用year作为依赖项：

function Plot({ year }) {
const [data, setData] = React.useState([]);
React.useEffect(() => {
alert("Plot is fetching data for " + year);
setData([1, 2, 3]);
}, [year]);
return <div>I'm a plot</div>;
}

Answer 2

你正在寻找React.memo，它等同于PureComponent，但它只比较道具。(您还可以添加第二个参数来指定采用新旧 props 的自定义比较函数。如果返回 true，则跳过更新。

const Button = React.memo((props) => {
// your component
});

欲了解更多信息 https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate