为什么要性能优化
从react16开始，react组件渲染到页面上经过调度，协调，渲染的过程。在其中协调（reconcile）过程中，react会对递归地新旧虚拟dom进行diff比较，因此这个协调过程是非常昂贵和耗时的。但从react组件上来说，性能优化的实质就是要减少组件不必要的渲染。
组件重新渲染的原因
1.state改变
2.props改变
3.context改变
如何写出性能好的组件
- 科学划分组件，避免写超大组件，在合理的范围内尽量增加组件的颗粒度
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/>
)
}
划分组件的原则就是将组件中变与不变的部分分离，分别渲染。这种优化方式应该是最常用的，在实际的业务开发中，采用这种方式应该是可以解决80%的性能问题。
2.使用性能优化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())
}}>点击修改数字</button>
}
const ShowNum = () => {
const num = React.useContext(NumContext)
return <div>{num}</div>
}
export default Index;
- React.useMemo,React.useCallback
这两个api是react hooks索引中官方提供的性能优化api，他们的参数跟useEffect一致，他们之间最大的区别有是useEffect会用于处理副作用，而这两个hooks会根据传递的依赖项返回缓存后的值。useMemo和useCallback都会在组件第一次渲染的时候执行，之后会在其依赖的变量发生改变时再次执行；useMemo返回缓存的变量，useCallback返回缓存的函数。
通常情况下，如果缓存的值要通过props传给子组件的话，要结合React.memo进行使用，才能起到优化性能的效果。
用法：
- 缓存复杂的计算
- 优化子组件渲染
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异步修改数据多次渲染
class组件方法中返回组件
