ReactuseMemo和useCallback的使用场景

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

  useEffect(() => {
    console.log('重新加载数据'); // 每次发生重新渲染时，都会重新加载数据
  }, [style]);

  return (
    

      这是 Info 里的文字
    
  );
}

function Page() {
  console.log('Page 发生渲染');

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

  // 计数器 +1 时，引发 Page 的重新渲染，进而引发 Info 的重新渲染
  return (
    

      
计数值为：{count}
       setCount(count + 1)}> +1 
      
    
  );
}

function Page() {
  console.log('Page 发生渲染');

  const [color] = useState('red');
  const [count, setCount] = useState(0);
  const style = useMemo(() => ({ color }), [color]); // 只有 color 发生实质性改变时，style 才会变化

  // 计数器 +1 时，引发 Page 的重新渲染，进而引发 Info 的重新渲染
  // 但是由于 style 缓存了，因此不会触发 Info 内的数据重新加载
  return (
    

      
计数值为：{count}
       setCount(count + 1)}> +1 
      
    
  );
}

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

  getData() {
    const url = `https://mocks.alibaba-inc.com/mock/fO87jdfKqX/demo/queryData.json&＃63;query=${this.state.query}`;
    // 请求数据...
    console.log(`请求路径为：${url}`);
  }

  render() {
    return (
      // 传递了一个子组件不渲染的 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&＃63;query=${query}`;
    // 请求数据...
    console.log(`请求路径为：${url}`);
  }, [query]);  // 当且仅当 query 改变时 getData 才更新

  // 计数值的变化并不会引起 Child 重新请求数据
  return (
    <>
      
计数值为：{count}
       setCount(count + 1)}> +1 
       {setQuery(e.target.value)}} />
      
    
  );
}

function Child({
  getData
}) {
  useEffect(() => {
    getData();
  }, [getData]); // 函数可以作为依赖项参与到数据流中

  return (
    // ...
  );
}