React优化策略-02

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第14天，点击查看活动详情

使用 shouldComponentUpdate 控制组件渲染

React 默认情况下，只要父组件更新，其下所有子组件都会“无脑”更新。如果想要手动控制子组件的更新逻辑

• 可使用 shouldComponentUpdate 判断

• 或者组件直接继承 React.PureComponent ，相当于在 shouldComponentUpdate 进行 props 的浅层比较

但此时，必须使用不可变数据，例如不可用 arr.push 而要改用 arr.concat。

不可变数据也有相应的第三方库

• immutable.js

• immer —— 更加推荐，学习成本低

PS：React 默认情况（子组件“无脑”更新）这本身并不是问题，在大部分情况下并不会影响性能。因为组件更新不一定会触发 DOM 渲染，可能就是 JS 执行，而 JS 执行速度很快。所以，性能优化要考虑实际情况，不要为了优化而优化。

React.memo 缓存函数组件

如果是函数组件，没有用 shouldComponentUpdate 和 React.PureComponent 。React 提供了 React.memo 来缓存组件。

React.memo 也支持自行比较

function MyComponent(props) {
}
function areEqual(prevProps, nextProps) {
    // 自行比较，像 shouldComponentUpdate
}
export default React.memo(MyComponent, areEqual);

useMemo 缓存数据 和 useCallback 缓存 函数

在函数组件中，可以使用 useMemo 和 useCallback 缓存数据和函数。

function App(props) {
    const [num1, setNum1] = useState(100)
    const [num2, setNum2] = useState(200)

    const sum = useMemo(() => num1 + num2, [num1, num2]) // 缓存数据，像 Vue computed

    // const fn1 = useCallback(() => {...}, [...]) // 缓存函数

    return <p>hello {props.info}</p>
}

PS: 普通的数据和函数，没必要缓存，不会影响性能的。一些初始化比较复杂的数据，可以缓存。

异步组件

可以使用React提供的Suspense和lazy配合使用支持异步组件

import React, { lazy, Suspense } from 'react'

// 记载异步组件
const OtherComponent = lazy(
  /* webpackChunkName: 'OtherComponent'*/
  () => import('./OtherComponent')
)

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}> {/* 支持 loading 效果 */}
        <OtherComponent />
      </Suspense>
    </div>
  )
}

其他的还有 路由懒加载、SSR

注意如下：

JSX 中，自定义组件命名，开头字母要大写，html 标签开头字母小写

JSX 中 for 写成 htmlFor ， class 写成 className