“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 18 天，点击查看活动详情”

1. 简介

随着我们的项目越写越大，React的学习越来越深入，项目所需要加载的时间越来越久，我们就应该意识到项目应该优化了，不应该只是从后端角度优化、从网络层面优化还需要我们前端自己优化自己的代码，优化组件,使用ReactApi来进行优化

2. 代码案例

1. 不注重优化的代码和渲染的结果

import { useState } from 'react'
import './App.css'


const Sub = (props: { count?: number }) => {
    console.log("sub组件")
    return <div>
        子组件{props.count}
    </div>
}

function App() {
    console.log("App组件")
    const [count, setCount] = useState(0)

    return (
        <div className="App">
            <button onClick={() => setCount(Math.random())}>
                count is {count}
            </button>
            <Sub/>
        </div>
    )
}

export default App

1. 我们再App中 写了一个子组件，加一个修改按钮
2. 可以看到在渲染的时候，sub子组件和APP父组件都重新渲染了

2. 优化编码习惯，组件分离

import { useState } from 'react'
import './App.css'


const Sub = (props: { count?: number }) => {
    console.log("sub组件")
    return <div>
        子组件{props.count}
    </div>
}
const BtnBox = () => {
    console.log("btn组件")
    const [count, setCount] = useState(0)
    return <button onClick={() => setCount(Math.random())}>
        count is {count}
    </button>
}

function App() {
    console.log("App组件")

    return <div className="App">
        <BtnBox/>
        <Sub/>
    </div>

}

export default App

1. 这里我们没有做太大的改变，只是优化了自己的编码习惯，把会改变的组件与不会改变的组件进行了分离，就被React自动优化了
2. 使用这种自动优化的前提是需要props,state,context 都在不变的情况下

3. 使用 React.memo 进行优化

import { memo, useState } from 'react'
import './App.css'


const Sub = memo((props: { isShow?: boolean }) => {
    console.log("sub组件")
    return <div>
        子组件{props.isShow}
    </div>
})

const BtnBox = (props: { count: number, setCount: Function }) => {
    console.log("btn组件")

    return <button onClick={() => props.setCount(props.count + 1)}>
        count is {props.count}
    </button>
}

function App() {
    console.log("App组件")
    const [count, setCount] = useState(0)

    return <div className="App">
        <BtnBox count={count} setCount={setCount}/>
        <Sub isShow={count > 1}/>
    </div>

}

export default App

1. 我在这一段代码中 使用了一个react.memo 来优化组件
2. 点击按钮三次，三次只有第二次重新渲染了
3. 是因为memo是根据 组件中的 props 和 state 发生变化时,检查 上一个 state 和 props 以及下一个 props 和 state 是否相等，如果不相等则函数组件将重新渲染，如果它们相等则函数组件将不会重新渲染

4. 使用 useMemo 进行优化

const data = useMemo(() => {
    return count > 1
}, [count])

1. 第一个参数是一个方法
2. 第二个参数是依赖
3. 只有当依赖变化时，才会重新计算出新的value
4. 类似于 Vue中的computed
5. 优化有助于避免在每次渲染时都进行高开销的计算

3. 总结

1. 本次学习了解了React代码的优化
2. 有通过良好编码习惯来进行优化
3. 通过对比组件的props 判断是否重新渲染组件
4. 使用类似于Vue的计算属性 来缓存计算的开销，达到优化目的