React memo 的实际应用，解决什么问题？

1.为什么要用memo，解决了什么问题？

问题：当子组件中接收的父组件的变量未发生变化时，子组件还是重新渲染了

父组件：

function App() {
  const [count, setCount] = useState(0);
  const [info] = useState("这只是一段无关父组件的静态的文本数据");
  return (
    <div className="container">
      parent: 
      <button onClick={() => {setCount(count + 1)}}>count++</button>
      <span>count:{count}</span>
      <Child info={info} />
    </div>
  );
}

子组件

const Child = ({ info }) => {
  console.log("子组件渲染了");
  return <div>child: {info}</div>;
};

这个时候我们不希望父组件的无关数据会影响到子组件，所以增加子组件用memo包裹

解决方法：

const Child = memo(({ info }) => {
  console.log("子组件渲染了");
  return <div>child: {info}</div>;
});

完美解决！！！！！