function Info({
  style,
}) {
  console.log('Info 發(fā)生渲染');

  useEffect(() => {
    console.log('重新加載數(shù)據(jù)'); // 每次發(fā)生重新渲染時，都會重新加載數(shù)據(jù)
  }, [style]);

  return (
    <p style={style}>
      這是 Info 里的文字
    </p>
  );
}

function Page() {
  console.log('Page 發(fā)生渲染');

  const [count, setCount] = useState(0);
  const style = { color: 'red' };

  // 計(jì)數(shù)器 +1 時，引發(fā) Page 的重新渲染，進(jìn)而引發(fā) Info 的重新渲染
  return (
    <div>
      <h4>計(jì)數(shù)值為：{count}</h4>
      <button onClick={() => setCount(count + 1)}> +1 </button>
      <Info style={style} />
    </div>
  );
}

function Page() {
  console.log('Page 發(fā)生渲染');

  const [color] = useState('red');
  const [count, setCount] = useState(0);
  const style = useMemo(() => ({ color }), [color]); // 只有 color 發(fā)生實(shí)質(zhì)性改變時，style 才會變化

  // 計(jì)數(shù)器 +1 時，引發(fā) Page 的重新渲染，進(jìn)而引發(fā) Info 的重新渲染
  // 但是由于 style 緩存了，因此不會觸發(fā) Info 內(nèi)的數(shù)據(jù)重新加載
  return (
    <div>
      <h4>計(jì)數(shù)值為：{count}</h4>
      <button onClick={() => setCount(count + 1)}> +1 </button>
      <Info style={style} />
    </div>
  );
}

class Parent extends React.Component {
   state = {
    query: 'keyword',
  }

  getData() {
    const url = `https://mocks.alibaba-inc.com/mock/fO87jdfKqX/demo/queryData.json?query=${this.state.query}`;
    // 請求數(shù)據(jù)...
    console.log(`請求路徑為：${url}`);
  }

  render() {
    return (
      // 傳遞了一個子組件不渲染的 query 值
      <Child getData={this.getData} query={this.state.query} />
    );
  }
}

class Child extends React.Component {
  componentDidMount() {
    this.props.getData();
  }

  componentDidUpdate(prevProps) {
    // if (prevProps.getData !== this.props.getData) { // 該條件始終為 true
    //   this.props.getData();
    // }
    if (prevProps.query !== this.props.query) { // 只能借助 query 值來做判斷
      this.props.getData();
    }
  }

  render() {
    return (
      // ...
    );
  }
}

function Parent() {
  const [count, setCount] = useState(0);
  const [query, setQuery] = useState('keyword');

  const getData = useCallback(() => {
    const url = `https://mocks.alibaba-inc.com/mock/fO87jdfKqX/demo/queryData.json?query=${query}`;
    // 請求數(shù)據(jù)...
    console.log(`請求路徑為：${url}`);
  }, [query]);  // 當(dāng)且僅當(dāng) query 改變時 getData 才更新

  // 計(jì)數(shù)值的變化并不會引起 Child 重新請求數(shù)據(jù)
  return (
    <>
      <h4>計(jì)數(shù)值為：{count}</h4>
      <button onClick={() => setCount(count + 1)}> +1 </button>
      <input onChange={(e) => {setQuery(e.target.value)}} />
      <Child getData={getData} />
    </>
  );
}

function Child({
  getData
}) {
  useEffect(() => {
    getData();
  }, [getData]); // 函數(shù)可以作為依賴項(xiàng)參與到數(shù)據(jù)流中

  return (
    // ...
  );
}