React组件性能优化实践

React组件性能优化最佳实践

React组件性能优化的核心是减少渲染真实DOM节点的频率，减少 Virtual DOM比对的频率。

组件卸载前进行清理操作

在组件中为 window注册的全局事件，以及定时器，在组件卸载前要清理掉，防止组件卸载后继续执行影响应用性能。

需求：开启定时器，然后卸载组件，查看组件中的定时器是否还在运行。

jsx 复制代码

function Test(){
    useEffect(()=>{
        let timer = setInterval(()=>{
            console.log("定时器在执行");
        },1000);
        return ()=>clearInterval(timer);
    },[]);
}

通过纯组件提升组件性能(类组件)

什么是纯组件？

纯组件会对组件输入数据进行浅层比较，如果当前输入数据和上次输入数据相同，组件不会重新渲染。

什么是浅层比较

比较引用数据类型在内存中的引用地址是否相同，比较基本数据类型的值是否相同

如何实现纯组件

类组件继承 PureComponent 类，函数组件使用 memo 方法

为什么不直接进行 diff 操作，而是要先进行浅层比较，浅层比较难道没有性能消耗吗

和进行 diff 比较操作相比，浅层比较将消耗更少的性能。diff 操作会重新遍历整棵 virtualDOM 树，而浅层比较只操作当前组件的 state 和 props。

需求：在状态对象中存储 name 值为张三，组件挂载完成后将 name 属性的值再次更改为张三，然后分别将 name 传递给纯组件和非纯组件，查看结果。

js 复制代码

class App extends Component{
    constructor(){
        super();
        this.state = {
            name: "张三"
        }
    }
    updateName(){
        setInterval(()=>{
            this.setState({name:"张三"});
        },1000);
    }
    componentDidMount(){
        this.updateName();
    }
    render(){
        return <>
            <ReguarComponent name={this.state.name} />
            <PureComponentDemo name={this.state.name} />
        </>
    }
}

class ReguarComponent extends Component{
    render(){
        console.log('ReguarComponent');
        return <div>{this.props.name}</div>
    }
}
class PureComponentDemo extends PureComponent{
    render(){
        console.log('PureComponentDemo');
        return <div>{this.props.name}</div>
    }
}

通过 shouldComponentUpdate 生命周期函数提升组件性能

纯组件只能进行浅层比较，要进行深层比较，使用 shouldComponentUpdate，它用于编写自定义比较逻辑。返回 true 重新渲染组件，返回 false 阻止重新渲染。

函数的第一个参数微 nextProps，第二个参数为 nextState。

需求：在页面中展示员工信息，员工信息包括：姓名、年龄、职位，但是在页面中只想展示姓名和年龄，也就是说只有姓名和年龄发生变化时才有必要重新渲染组件，如果员工的其他信息发生了变化没必要重新渲染组件。

js 复制代码

class App extends Component{
    constructor(){
        super()
        this.state ={
            person: {
                name: "张三",
                age: 20,
                job: "waiter"
            }
        }
    }
    componentDidMount(){
        setTimeout(()=>{
            this.setState({person:{...this.state.person,job:"chef"}});
        },2000);
    }
    shouldComponentUpdate(nextProps,nextState){
        if(nextState.person.name!==this.state.person.name||nextState.person.age!==this.state.person.age){
            return true
        }
        return false
    }
    render(){
        console.log('.....render....');
        return <div>{this.state.person.name}{this.state.person.age}</div>
    }
}

通过纯组件提升组件性能(函数组件)

将函数组件变为纯组件，将当前 props 和上一次的 props 进行浅层比较，如果相同就阻止组件重新渲染。

需求：父组件维护两个状态，index 和 name，开启定时器让 index 不断发生变化，name 传递给子组件，查看父组件更新子组件是否也更新了。

js 复制代码

function App(){
    const [name] = useState("张三");
    const [index,setIndex] = useState(0);
    useEffect(()=>{
        setInterval(()=>{
            setIndex(prev=>prev+1)
        },1000)
    },[];
    return (<div>{index}<ShowName name={name}/></div>)
}
const ShowName = memo(function showName({name}){
    return <div>{name}</div>
})

使用 memo方法自定义比较逻辑，用于执行深层比较。比较函数的第一个参数为上一次的 props，比较函数的第二个参数为下一次的 props，比较函数返回 true，不进行渲染，比较函数返回 false，组件重新渲染。

js 复制代码

function comparePerson(prevProps,nextProps){
    if(prevProps.person.name!==nextProps.person.name||prevProps.person.age!==nextProps.person.age){
        return false;
    }
    return true;
}
const ShowPersonMemo = memo(ShowPerson,comparePerson);

使用组件懒加载

使用组件懒加载可以减少 bundle 文件大小，加快组件呈递速度。

路由组件懒加载

js 复制代码

import React,{lazy,Suspense} from "react";
import {BrowserRouter,Link,Route,Switch} from "react-router-dom";

const Home =lazy(()=>import("./Home"))
const List = lazy(()=>import("./List"));

function App(){
    return (<BrowserRouter>
        <Link to="/">Home</Link>
        <Link to="/list">List</Link>
        <Switch>
            <Suspense fallback={<div>Loading</div>}>
                <Route path="/" component={Home} exact/>
                <Route path="/list" component={List}/>
            </Suspense>
        </Switch>
    </BrowserRouter>)
}

根据条件进行组件懒加载，适用于组件不会随条件频繁切换

js 复制代码

function App(){
    let LazyComponent = null;
    if(true){
        LazyComponent = lazy(()=>import("./Home"));
    }else{
        LazyComponent = lazy(()=>import("./List"));
    }
    return (<Suspense fallback={<div>Loading</div>}>
        <LazyComponent />
    </Suspense>);
}

使用占位符标记提升 React 组件的性能

React 组件中返回的 jsx 如果有多个同级元素，多个同级元素必须要有一个共同的父级。

jsx 复制代码

function App(){
    return (<div>
        <div>message a</div>
        <div>message b</div>
    </div>)
}

为了满足这个条件我们通常都会在最外层添加一个 div，但是这样的话就会多出一个无意义的标记，如果每个组件都多出这样的一个无意义标记的话，浏览器渲染引擎的负担就会加剧。

为了解决这个问题，React 推出了 fragment 占位符标记，使用占位符标记既满足了拥有共同父级的要求又不会多出额外的无意义标记。

jsx 复制代码

import {Fragment} from "react"

function App(){
    return (<Fragment>
        <div>message a</div>
        <div>message b</div>
    </Fragment>)
}

如果你觉得 Fragment 比较烦琐也可以写空占位符。

jsx 复制代码

function App(){
    return (<>
        <div>message a</div>
        <div>message b</div>
    </>)
}

避免使用内联函数

在使用内联函数后，render 方法每次运行时都会创建该函数的新实例，导致 React 在进行 Virtual DOM 比对时，新旧函数比对不想等，导致 React 总是为元素绑定新的函数实例，而旧的函数实例又要交给垃圾回收器处理。

jsx 复制代码

class App extends React.Component{
    constructor(){
        super()
        this.state = {
            inputValue: ""
        }
    }
    render(){
        return(<input value={this.state.inputValue} onChange={e=>this.setState({inputValue:e.target.value})}/>)
    }
}

正确的做法是在组件中单独定义函数，将函数绑定给事件。

jsx 复制代码

class App extends React.Component{
    constructor(){
        super()
        this.state = {
            inputValue: ""
        }
    }
    setInputValue=e=>{
        this.setState({inputValue:e.target.value})
    }
    render(){
        return(<input value={this.state.inputValue} onChange={this.setInputValue}/>)
    }
}

在构造函数中进行函数 this 绑定

在类组件中如果使用 fn(){}这种方式定义函数，函数 this 默认指向 undefined。也就是说函数内部的 this 指向需要被更正。可以在构造函数中对函数的 this 进行更正。也可以在行内进行更正。两者看起来没有太大区别，但是对性能的影响是不同的。

jsx 复制代码

class App extends React.Component{
    constructor(){
        super()
        //方式一
        //构造函数只执行一次，所以函数 this 指向更正的代码也只执行一次
        this.handleClick = this.handleClick.bind(this)
    }
    handleClick(){
        console.log(this)
    }
    render(){
        //方式二
        //问题：render 方法每次执行时都会调用 bind 方法生成新的函数实例
        return <button onClick={this.handleClick.bind(this)}>按钮</button>
    }
}

类组件中的箭头函数

在类组件中使用箭头函数不会存在 this 指向问题，因为箭头函数本身并不绑定 this。

jsx 复制代码

class App extends React.Component{
    handleClick = ()=>console.log(this)
    render(){
        return <button onClick={this.handleClick}>按钮</button>
    }
}

箭头函数在 this 指向问题上占据优势，但是同时也有不利的一面。

当使用箭头函数时，该函数被添加为类的实例对象属性，而不是原型对象属性，如果组件被多次重用，每个组件实例对象中都将会有一个相同的函数实例，降低了函数实例的可重用性造成了资源浪费。

综上所述，更正函数内部 this指向的最佳做法仍是在构造函数中使用 bind 方法进行绑定。

避免使用内联样式属性

当使用内敛 style 为元素添加样式时，内联 style 会被编译为 JavaScript 代码，通过 JavaScript 代码将样式规则映射到元素的身上，浏览器就会花费更多的时间执行脚本和渲染 UI，从而增加了组件的渲染时间。

jsx 复制代码

function App(){
    return <div style={{backgroundColor:"skyblue"}}>App works</div>
}

在上面的组件中，为元素附加了内联样式，添加的内联样式为 JavaScript 对象，backgroundColor 需要被转换为等效的 CSS 样式规则，然后将其应用到元素，这样涉及到脚本的执行。

更好的办法是将 CSS 文件导入样式组件，能通过 CSS 直接做的事情就不要通过 JavaScript 去做，因为 JavaScript 操作 DOM 非常慢。

优化条件渲染

频繁的挂载和卸载组件是一项耗性能的操作，为了确保应用程序的性能，应该减少组件挂载和卸载的次数。在 React 中我们经常会根据条件渲染不同的组件，条件渲染是一项必做的优化操作。

jsx 复制代码

function App(){
    if(true){
        return (<>
            <AdminHeader/>
            <Header />
            <Content />
        </>)
    }else{
        return (<>
            <Header />
            <Content />
        </>)
    }
}

在上面的代码中，当渲染条件发生变化时，React 内部在做 Virtual DOM 比对时发现，刚刚第一个组件是 AdminHeader，现在第一个组件是 Header，刚刚第二个组件是 Header，现在第二个组件是 Content，组件发生了变化，React 就会卸载 AdminHeader、Header、Content，重新挂载 Header 和 Content，这种挂载和卸载就是没有必要的。

jsx 复制代码

function App(){
    return (<>
        {true&&<AdminHeader />}
        <Header />
        <Content />
    </>)
}

避免重复的无限渲染

当应用程序状态发生更改时，React 会调用 render 方法。如果在 render 方法中继续更改应用程序状态，就会发生 render 方法递归调用导致应用报错。

jsx 复制代码

class App extends React.Components{
    constructor(){
        super()
        this.state={name:"张三"}
    }
    render(){
        this.setState({name:"李四"})
        return <div>{this.state.name}</div>
    }
}

与其他生命周期函数不同，render 方法应该被作为纯函数。这意味着，在 render 方法中不要做以下事情，比如不要调用 setState 方法，不要使用其他手段查询更改原生 DOM 元素，以及其他更改应用程序的任何操作。render 方法的执行要根据状态的改变，这样可以保持组件的行为和渲染方式一致。

为组件创建错误边界

默认情况下，组件渲染错误会导致整个应用程序中断，创建错误边界可确保在特定组件发生错误时应用程序不会中断。

错误边界是一个 React 组件，可以捕获子级组件在渲染时发生的错误，当错误发生时，可以将错误记录下来，可以显示备用 UI 界面。错误边界涉及到两个生命周期函数，分别是 getDerivedStateFromError 和 componentDidCatch。getDerivedStateFromError为静态方法，方法中需要返回一个对象，该对象会和 state 对象进行合并，用于更改应用程序状态。componentDidCatch方法用于记录应用程序错误信息，该方法的参数就是错误对象。

jsx 复制代码

class ErrorBoundaries extends React.Component{
    constructor(){
        super()
        this.state={
            hasError:false
        }
    }
    componentDidCatch(error){
        console.log("componentDidCatch")
    }
    static getDerivedStateFromError(){
        console.log("getDerivedStateFromError");
        return {
            hasError: true
        }
    }
    render(){
        if(this.state.hasError){
            return <div>发生了错误</div>
        }
        return <App />
    }
}

jsx 复制代码

ReactDom.render(<ErrorBoundaries />,document.getElementById("root"))

注意：错误边界不能捕获异步错误，比如点击按钮时发生的错误。

避免数据结构突变

组件中 props 和 state 的数据结构应该保持一致，数据结构突变会导致输出不一致。

jsx 复制代码

class App extends Component{
    constructor(){
        super()
        this.state = {
            employee:{
                name: "张三",
                age: 20
            }
        }
    }
    render(){
        const {name,age} = this.state.employee
        return (<div>
            {name}
            {age}
            <button onClick={()=>this.setState({
                ...this.state,
                employee:{
                    age:30
                }
            })}>change age</button>
        </div>)
    }
}

优化依赖项大小

在应用程序中经常会依赖第三方包，但我们不想引用包中的所有代码，我们只想用到哪些代码就包含哪些代码。此时可以使用插件对依赖项进行优化。