React优化组件渲染（re-render）到哪个地步就算可以了？

Question

问题

用React函数式调用组件，感觉组件re-render次数过多。
CodeSandBox

不会打印出"Very slow component re-mounts" 算可以了？还是说"Very slow component re-renders"也不要打印

Answer 1

首先VerySlowComponent不能放在Component里面，因为它是个函数（引用类型的东西），放在里面，每次state变化，它都要重新赋值一遍，也就每次VerySlowComponent都在变化，有变化就会重新渲染执行；
另外，VerySlowComponent渲染不依赖state变化，为了不必要的渲染，需要用memo包起来，它会判断自己依赖的数据有没有发生变化，没变化就不会重新渲染了；

import { useState, useEffect, memo} from "react";
import "./styles.css";
const VerySlowComponent = memo(() => {
  console.log("Very slow component re-renders");
  useEffect(() => {
    console.log("Very slow component re-mounts");
  }, []);
  return <div>Very slow component</div>;
});

const Component = () => {
  const [state, setState] = useState(1);

  const onClick = () => {
    setState(state + 1);
  };

  return (
    <>
      <button onClick={onClick}>click here</button>
      <VerySlowComponent />
    </>
  );
};

const App = () => {
  return (
    <>
      <h2>Open console, click a button</h2>
      <p>Slow component will re-mount on every click</p>

      <Component />
    </>
  );
};

export default App;