react性能优化方法

1、避免使用内联函数

        每次render的时候，内联函数都会重新创建一个新的函数实例，应该在组建内部创建一个函数，将事件绑定到该函数上，这样每次调用render的时候就不会创建单独的函数实例

2、使用React Fragments避免额外标记

当创建新组件时，每个组件应具有单独的父标签，而父级不能有两个标签，因此通常需要在组件顶部添加额外的标签（如<div>），以使该标签成为父级标签。此时可以使用Fragments来替代多余的标签，因为它不会像组件引入任何额外标记，但仍可以作为父级标签使用

3、组件懒加载

在React中，可以使用Suspense组件和lazy方法实现懒加载

Suspense

Suspense是一个特殊的组件，用于控制代码拆分组件或者其他一步操作的数据渲染过程，当你将一个一步组件或者数据请求放在Suspense组件内部时，React会暂停渲染并显示一个备用UI，直到异步操作完成并返回其结果

例如：

<Suspense fallback={<div>...Loading</div>}>
    <AsuncComponent />
</Suspense>

在这个事例中，AsyncComponent是一个异步组件，当他还没加载时，React会显示一个...Loading的消息，当异步组件加载完成后，React会自动切换到该组件显示

ps：虽然Suspense组件可以很好的处理代码拆分和异步数据请求，但他并不适合用来处理所有类型的异步任务。例如，如果你有一个复杂的异步逻辑或者需要在多个地方使用同一个异步结果，那么可能需要更复杂的方法来管理

Lazy

在React中，lazy时用于定义异步组件的函数。他的主要作用是在运行时动态的加载和解析组件，而不是在编译时，这使得我们可以把一些比较大的、不常用的、或者初始化时不重要的组件放在一个单独的文件夹中，需要时再使其加载

lazy函数接受一个工厂函数作为参数并返回一个Promise，该Promise将组件第一次被引入时解析为组件类

示例：

import React, { lazy } from 'react'

const Component = lazy(() => ('./Component.js'))

function App () {
    return (
        <div>
            <Component />
        </div>
    )
}

export default App;

 4、减少条件渲染

在React中，有条件渲染（如if、三目运算等）会导致额外的虚拟Dom渲染。为了减少这种情况，可以尽量使用常量声明变量，尽可能避免在render方法中直接操作数组或对象

原因：

在react中，条件渲染是通过js的逻辑表达式来实现的。当一个组件的状态或props发生变化时，React会重新计算这个组件及其子组件的虚拟Dom数，并于上一次渲染的结果对比，若发现有任何变化，react就会更新真实DOM。

在条件渲染的情况下，由于条件分支的不同，可能导致不同的虚拟DOM结构，因此。每次状态变化都可能需要重新计算整个虚拟DOM树。这可能会导致额外的虚拟DOM渲染，尤其是大型应用程序，其中包含许多复杂的条件渲染和嵌套组件

方法： 

一、生命周期：使用PureComponent或shouldComponentUpdate跳过不必要的组件更新从而减少虚拟Dom渲染的次数

二、减少条件渲染数量：通过提取共享代码、使用高阶组件、或重构代码等方式减少条件渲染

三、缓存结果：对于一些复杂的计算结果或网络请求可以考虑将其缓存，以便在后续渲染中直接使用 

5、谨慎使用useEffect

useEffect是非常强大的钩子函数，可以用来处理副作用操作。包括但不限于订阅数据源、更新Dom、清理资源等。但也应谨慎使用，如果在useEffect中频繁的更改状态，可能会导致大量的重新渲染，影响性能。而且如果状态更改出发的辅佐用与当前组件无关，那么这个useEffect可能会被执行多次