javascript - react : avoid child component rerender on state change

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 的依赖项并没有真正的帮助。

如果仅在年份更改时才触发 的副作用，则仅使用年份作为依赖项:

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