為什么要性能優(yōu)化

從react16開始，react組件渲染到頁面上經(jīng)過調(diào)度，協(xié)調(diào)，渲染的過程。在其中協(xié)調(diào)（reconcile）過程中，react會對遞歸地新舊虛擬dom進行diff比較，因此這個協(xié)調(diào)過程是非常昂貴和耗時的。但從react組件上來說，性能優(yōu)化的實質(zhì)就是要減少組件不必要的渲染。

組件重新渲染的原因
1.state改變
2.props改變
3.context改變

如何寫出性能好的組件

1. 科學(xué)劃分組件，避免寫超大組件，在合理的范圍內(nèi)盡量增加組件的顆粒度

eg1.

import React from "react";

 const Index = () =>{
  const [count,setCount] = React.useState(0)

  const addCount = () => {
    setCount(count+1)
  }
  return (
    <div>
      <div>{count} <button onClick={addCount}>增加+</button></div>
      <OtherCom/>
    </div>
  )
}



const OtherCom = () => {
  console.log('renderOther')
  return (
    <div>
      OtherCom
    </div>
  )
}

export default Index;

改善后

import React from "react";

 const Index = () =>{
  return (
    <div>
      <Count/>
      <OtherCom/>
    </div>
  )
}

const OtherCom = () => {
  console.log('renderOther')
  return (
    <div>
      OtherCom
    </div>
  )
}

const Count = () => {
  const [count,setCount] = React.useState(0)

  const addCount = () => {
    setCount(count+1)
  }
  return (
    <div>{count} <button onClick={addCount}>增加+</button></div>
  )
}

export default Index;

eg 2

import React from "react";

 const Index = () =>{
  const [count,setCount] = React.useState(0)

  const addCount = () => {
    setCount(count+1)
  }
  return (
    <div title={count+' '}>
      <div><span>{count}</span><button onClick={addCount}>增加+</button></div>
      <OtherCom/>
    </div>
  )
}

const OtherCom = () => {
  console.log('renderOther')
  return (
    <div>
      OtherCom
    </div>
  )
}

改善后

const Count = ({children}:{children:React.ReactNode}) =>{
  const [count,setCount] = React.useState(0)

  const addCount = () => {
    setCount(count+1)
  }
  return (<div title={count+' '}>
  <div><span>{count}</span><button onClick={addCount}>增加+</button></div>
  {children}
</div>)
}


const Index = () => {
  return (
      <Count>
            <OtherCom/>
     </Count/>
  )
}

劃分組件的原則就是將組件中變與不變的部分分離，分別渲染。這種優(yōu)化方式應(yīng)該是最常用的，在實際的業(yè)務(wù)開發(fā)中，采用這種方式應(yīng)該是可以解決80%的性能問題。

2.使用性能優(yōu)化api

• React.memo(React.PureComponent)
  React.memo包裹的組件會對組件中的props進行淺比較，即j會遍歷props對象中每一項的key和value進行比較，所以使用這個api的本身就會比不用耗費更多性能，因此在用的時候一定要好好思考一下是不是可以通過降低組件顆粒度，合理劃分組件的方式也可以達到效果。一定要在合適的場景下使用這個API，否則反而會損失性能。

eg：

import React from "react";

const NumContext = React.createContext<number>(0)
const SetNumContext = React.createContext<React.Dispatch<number>>(() => {})


 const Index = () =>{
  const [num,setNum] = React.useState(0)
  return (
  <div>
    <NumContext.Provider value={num}>
      <SetNumContext.Provider value={setNum}>
        <OtherCom/>
      </SetNumContext.Provider>
    </NumContext.Provider>
  </div>
  )

}

const OtherCom = () => {
  console.log('renderOther')
  return (
    <>
      <Button/>
      <ShowNum/>
    </>
  )
}

const Button = () => {
  const updateNum = React.useContext(SetNumContext)
  return <button onClick={() =>{
    updateNum(Math.random())
  }}>點擊修改數(shù)字</button>
}

const ShowNum = () => {
  const num = React.useContext(NumContext)
  return <div>{num}</div>
}


export default Index;

• React.useMemo,React.useCallback
  這兩個api是react hooks索引中官方提供的性能優(yōu)化api，他們的參數(shù)跟useEffect一致，他們之間最大的區(qū)別有是useEffect會用于處理副作用，而這兩個hooks會根據(jù)傳遞的依賴項返回緩存后的值。useMemo和useCallback都會在組件第一次渲染的時候執(zhí)行，之后會在其依賴的變量發(fā)生改變時再次執(zhí)行；useMemo返回緩存的變量，useCallback返回緩存的函數(shù)。

通常情況下，如果緩存的值要通過props傳給子組件的話，要結(jié)合React.memo進行使用，才能起到優(yōu)化性能的效果。

用法：

1. 緩存復(fù)雜的計算
2. 優(yōu)化子組件渲染

React.useMemo

eg

import React from "react";

const App = () => {
 const [num,setNum]  = React.useState(1);
 const [val,setVal] = React.useState('');


const sum = React.useMemo(() => {
  console.log("computed")
  let sum = num + 2;

  return sum;
},[num])

 return (
  <>
    <div>num:{num}</div>
    <ShowSum sum={sum}/>
    <div>val:{val}</div>
    <div>
      <button onClick={() => {
        setNum(num+1)
      }}>改變num</button>
      <input value={val} onChange={(e) => {
        setVal(e.target.value)
      }}></input>
    </div>
  </>
 )
}

const ShowSum:React.FC<{sum:number}> = React.memo((props) => {
  console.log("ddd")
  return <div>{props.sum}</div>
})

React.useCallback

import React, { useState, useCallback,memo } from 'react';


const Button = memo(({ onClickButton, children }:{ onClickButton:()=>void, children:React.ReactNode}) => {
  return (
    <>
      <button onClick={onClickButton}>{children}</button>
      <span>{Math.random()}</span>
    </>
  );
});


export default function App() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const [count3, setCount3] = useState(0);

  const handleClickButton1 = () => {
    setCount1(count1 + 1);
  };

  const handleClickButton2 = useCallback(() => {
    setCount2(count2 + 1);
  }, [count2]);

  return (
    <div>
      <div>
        <Button onClickButton={handleClickButton1}>Button1</Button>
      </div>
      <div>
        <Button onClickButton={handleClickButton2}>Button2</Button>
      </div>
      <div>
        <Button
          onClickButton={() => {
            setCount3(count3 + 1);
          }}
        >
          Button3
        </Button>
      </div>
    </div>
  );
}

3.使用mobx時需注意的點

https://cn.mobx.js.org/best/react-performance.html

4.目前存在的問題

• mobx異步修改數(shù)據(jù)多次渲染

• class組件方法中返回組件