React优化组件渲染(re-render)到哪个地步就算可以了?

问题

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

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

阅读 1.4k
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;
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题