React性能优化的实现方法详解.docxVIP

第

React性能优化的实现方法详解

目录前言遍历视图key使用React.memo缓存组件React.useCallback让函数保持相同的引用避免使用内联对象使用React.useMemo缓存计算结果或者组件使用React.Fragment片段组件懒加载通过CSS加载和卸载组件变与不变的地方做分离总结

前言

想要写出高质量的代码，仅仅靠框架底层帮我们的优化还远远不够，在编写的过程中，需要我们自己去使用提高的api，或者根据它底层的原理去做一些优化，以及规范。

相比于Vue，React不会再框架源码层面帮助我们直接解决一下基本的性能优化相关，而是提供一下API（Hooks）让我们自己去优化我们的应用，也是它自身更灵活的一种原因之一。

下面总结了一些从编写React代码层面上能做的优化点。

遍历视图key使用

key的作用能够帮助我们识别哪些元素改变了，比如添加和删除。在React更新时，会触发ReactDiff算法，diff过程中过借助key值来判断元素是新创建还是需要移动的元素。React会保存这个辅助状态。从而减少不必要的元素渲染。

key的值最好是当前列表中拥有独一无二的字符串。开发中通常用id等这些作为元素的key值。

当前的列表不会发生操作，万不得已可以使用index作为key值。

key应该具有稳定，可预测，以及列表内唯一的特质。不稳定的key比如Math.random()生成的会导致很多组件实例和DOM节点被不必要的重新创建，这可能导致性能下降和子组件状态丢失等等。

React.memo缓存组件

react是单向数据流，父组件状态的更新也会让子组件一起重新渲染更新，即使子组件的状态没有发生变化，不会像Vue一样能够具体监听到某一个组件状态的变化然后更新当前的这个组件。

因此可以用React.memo缓存组件，这样只有传入当前组件状态值变化时才会重新渲染，值相同那么就会缓存组件。

//子组件

constChild=React.memo(()={

console.log(child);

return(

div

Child

/div

//父组件

functionApp(){

const[count,setCount]=useState(0);

return(

divclassName=App

h3{count}/h3

button()=setCount(count+1)}Count++/button

Child/

/div

上面代码Child/组件添加上memo每次点击count++那么就会不会重新渲染了。

React.useCallback让函数保持相同的引用

像上面的例子，如果父组件想拿到子组件的状态值，通常会使用callback的方式传递出去给父组件。

interfaceChildProps{

onChangeNum:(value:number)=void;

constChild:React.FCChildProps=React.memo(({onChangeNum})={

console.log(child);

const[num,setNum]=useState(0);

useEffect(()={

onChangeNum(num);

},[num]);

return(

div

button

()={

setNum((prevState)={

returnprevState+1;

Child

/button

/div

functionApp(){

const[count,setCount]=useState(0);

return(

divclassName=App

h3{count}/h3

button()=setCount(count+1)}Count++/button

Child

onChangeNum={(num)={

console.log(num,childNum);

/div

组件每次更新num值，父组件通过onChangeNum回掉函数方式接受。

注意刚才说