React 性能优化

给列表中添加key

在列表中，比较两个列表相不相同会从头开始一个一个对比，只在列表结尾添加数据，加不加key意义不大，如果在列表开头添加数据，对比到第一个节点不一样就会修改列表，最后会将整个列表都重新修改

如果给列表中的每一项都添加key，那么React会使用key来对比两个树结构上的子元素差异，不会对整个列表修改，只会插入一个元素

!注意：

​ key是唯一的

​ key不要使用随机数，两棵树的key值还是不一样

​ 使用index作为key对性能优化没有帮助

调用render()函数

shouldComponentUpdate()

在shouldComponentUpdate( nextProps, nextState )，有两个参数，分别是修改之后渲染之前的props和state的数据，可以和修改前的数据进行比较，修改了就更新

shouldComponentUpdate( nextProps, nextState )的返回值为布尔类型，返回true则重新渲染，返回false则不渲染

优化逻辑：在shouldComponentUpdate中进行判断，如果组件中显示的东西依赖props或state里的数据，并且props或state中的数据发生了改变，那么就重新渲染(return true)，否则阻止重新渲染(return false)

shouldComponentUpdate(nextProps, nextState){
	if(this.state.counter !== nextState.counter){
		return true
	}
	return false
}

PureComponent()

在继承了PureComponent的类组件中会进行浅层比较，比较组件依赖的props和state有没有发生改变，如果依赖的props/state发生了改变就让shouldComponentUpdate返回true，重新渲染；如果props/state没有发生改变，那么就让shouldComponentUpdate返回false，不重新渲染

class header extends PureComponent{
	render(){
		return (
			<div>这里是头部</div>
		)
	}
}

memo

memo是一个高阶组件，可以将函数式组件使用memo进行包裹

import { memo } from 'react'

const MemoHeader = memo(function header(){
	return (
        <div>这里是头部</div>
	)
})

使用<MemoHeader/>

在mome中对props进行了浅层比较，如果依赖的props没有发生改变，那么就不会调用函数式组件的render函数进行重新渲染。如果函数式组件是被包裹在了类组件中，并且类组件已经继承自了PureComponent，类组件也没有被重新渲染，那么函数式子组件也不会被重新渲染，但是为了考虑到以后的如果类组件中其它的子组件发生改变并重新渲染，但函数式子组件没有发生改变不需要重新渲染的情况，也要给函数式组件使用memo进行包裹，进行性能优化

注意：在进行开发的过程中，可以将类继承自PureComponent，使用mome包裹函数式组件，进行性能优化。