React性能优化

React性能优化

1、React性能优化方向

• 减少重新 render的次数
• 减少重复计算

1.1、减少重新render的次数

​ 组件是构成React视图的一个基本单元。有些组件会有自己本地的状态(state), 当它们的值由于用户的操作而发生改变时，组件就会重新渲染。在一个React应用中，一个组件可能会被频繁地进行渲染。这些渲染虽然有一小部分是必须的，不过大多数都是无用的，它们的存在会大大降低我们应用的性能。

• React.memo

  在讲React.memo之前先举个🌰

  // index.js
  import React, { useState } from "react";
  import ReactDOM from "react-dom";
  import Child from  ./child 
   
  function App() {
    const [title, setTitle] = useState("这是一个 title")
   
    return (
      <div className="App">
        <h1>{ title }</h1>
        <button onClick={() => setTitle("title 改变了")}>改标题</button>
        <Child name="Child"></Child>
      </div>
    );
  }
   
  const rootElement = document.getElementById("root");
  ReactDOM.render(<App />, rootElement)
  

  // child.js
  import React from "react";
   
  function Child(props) {
    console.log(props.name)
    return <h1>{props.name}</h1>
  }
   
  export default Child
  

  当我们点击Button时，虽然只改变了title,传递给子组件Child的props未发生改变，但在我们每次点击Button时，控制台都会打印一次Child。 => 子组件重新渲染了。

  当 Child 组件是一个非常大的组件，渲染一次会消耗很多的性能，那么我们就应该尽量减少这个组件的渲染，否则就容易产生性能问题，所以子组件如果在 props 没有变化的情况下，就算父组件重新渲染了，子组件也