react 性能优化尽量不使用箭头函数绑定数据每次渲染时都会创建一个新的事件处理器，这会导致 Ad 每次都会被渲染。

尽量不使用箭头函数绑定数据

function render() {
    return <Ad onClick={() => alert('text')} />
}

每次渲染时都会创建一个新的事件处理器，这会导致 Ad 每次都会被渲染。 hook解决方式

function render() {
    const clickEvent = useMemo(() => alert('text'), [])
    return <Ad onClick={clickEvent} />
}

class解决方式

class TestComponent extends Component {
    clickEvent() {
        alert('test')
    }
    render() {
        return <Ad onClick={this.clickEvent} />
    }
}

循环正确使用key

错误用法一：用index做key
错误用法二：用index拼接其他的字段
正确用法：使用id作为key

无状态组件hooks-useMemo避免重复渲染

function Render() {
    const [value, setValue] = useState(0);
    const a1 = () => console.log('a1');
    const a2 = () => console.log('a2');
    const a3 = () => console.log('a3');
    return <div>
        <button onClick={a1}>a1</button>
        <button onClick={a2}>a2</button>
        <button onClick={a3}>a3</button>
        <button onClick={() => setValue(value+1)}>setValue</button>
    </div>
}

每次点击时候Render都会重新执行，导致a1，a2，a3都会重新声明，为了避免这种情况，就可以使用useMemo来进行优化

function Render() {
    const [value, setValue] = useState(0);
    const {a1 ,a2, a3} = useMemo(() => {
        const a1 = () => console.log('a1');
        const a2 = () => console.log('a2');
        const a3 = () => console.log('a3');
        return { a1, a2, a3 }
    })
    return <div>
        <button onClick={a1}>a1</button>
        <button onClick={a2}>a2</button>
        <button onClick={a3}>a3</button>
        <button onClick={() => setValue(value+1)}>setValue</button>
    </div>
}

懒加载`Suspence`和`Lazy`

组件采用按需加载，减小网络请求文件体积

import React from 'react'
export default () => {
    const Component = React.lazy(() => import('../aaa'));
    return <Suspense fallback={<div>loading</div<}><Component /></Suspense>
}

多子组件共用的变量存于父级通过props传递

通过## immer 优化setState深拷贝

immer官网: immerjs.github.io/immer/zh-CN… 可以减小重新生成整个对象填充state，通过immer制定修改需要改动的部分将改动部分进行拷贝

PureComponent, Memo, shouldComponentUpdate和getDerivedStateFromProps

PureComponent: 针对class形式创建react组件，减小组件从新渲染次数

Memo: 针对hook形式创建react组件，功能同PureComponent

shouldComponentUpdate: 针对class组件，接收nextProps, nextState，两个参数，自行判断通过返回true/false来确定组件是否渲染，不建议在此组件进行深层次判断，可能会影响执行效率以及性能

static getDerivedStateFromProps：针对class组件，接收prop，state，返回一个state填充到当前组件的state中，如果返回null，则不渲染当前组件，适用于state与props有绑定关系的情况

react 性能优化