react 组件性能优化

Posted 2022-12-10 冰雪奇缘lb

react 组件性能优化

---

减轻state

• 减轻state：只存储跟组件渲染相关的数据(比如: count/列表数据/ loading等)
• 注意:不用做渲染的数据不要放在 state 中，比如定时器id等
• 对于这种需要在多个方法中用到的数据，应该放在 this 中
  

---

避免不必要的重新渲染

• 组件更新机制：父组件更新会引起子组件也被更新，这种思路很清晰
• 问题：子组件没有任何变化时也会重新渲染
• 如何避免不必要的重新渲染呢?
• 解决方式：使用 钩子函数shouldComponentUpdate(nextProps, nextState)
• 作用：通过返回值决定该组件是否重新渲染，返回true表示重新渲染，false表示不重新渲染
• 触发时机：更新阶段的钩子函数，组件重新渲染前执行（ shouldComponentUpdate ==> render )

代码示例：

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component 
    state = 
        count: 0
    

    handleClick = () => 
        this.setState(state => 
            return 
                count: state.count + 1
            
        )
    

    // 钩子函数
    shouldComponentUpdate(nextProps, nextState) 
        // nextProps: 最新的props
        // nextState: 最新的state

        // 返回false，阻止组件重新渲染
        // return false

        // 最新的状态
        console.log('最新的state', nextState);
        // 更新前的状态
        console.log('this的state', this.state);
        
        return true
    

    render() 
        console.log('组件更新了')
        return (
            <div>
                <h1>计数器：this.state.count</h1>
                <button onClick=this.handleClick>+1</button>
            </div>
        )
    


// 渲染组件
ReactDOM.render(<App />, document.getElementById("root"))

案例——随机数 state 处理重复更新

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component 
    state = 
        number: 0
    
    handleClick = e => 
        this.setState(state => 
            return 
                number: Math.floor(Math.random() * 3)
            
        )
    

    // 因为两次生成的随机数可能相同，如果相同，此时，不需要重新渲染
    shouldComponentUpdate(nextProps, nextState) 
        console.log('最新状态：', nextState, '当前状态：', this.state);
        if(nextState.number === this.state.number) 
            return false
        
        return true

        // 可优化为下面语句
        // return nextState.number !== this.state.number
    
    render() 
        console.log('render');
        return (
            <div>
                <h1>随机数：this.state.number</h1>
                <button onClick=this.handleClick>重新生成</button>
            </div>
        )
    


// 渲染组件
ReactDOM.render(<App />, document.getElementById("root"))

案例——随机数 props 处理重复更新

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component 
    state = 
        number: 0
    
    handleClick = e => 
        this.setState(state => 
            return 
                number: Math.floor(Math.random() * 3)
            
        )
    

    render() 
        console.log('render');
        return (
            <div>
                <NumberBox number=this.state.number />
                <button onClick=this.handleClick>重新生成</button>
            </div>
        )
    


class NumberBox extends React.Component 
    shouldComponentUpdate(nextProps, nextState) 
        console.log('最新props：', nextProps, '当前props：', this.props);
        // 如果前后两次的number值相同，就返回false，不更新组件
        return nextProps.number !== this.props.number
    
    render() 
        console.log('子组件中的render');
        return (
            <h1>随机数：this.props.number</h1>
        )
    


// 渲染组件
ReactDOM.render(<App />, document.getElementById("root"))

---

纯组件

• 说明︰纯组件内部的对比是 shallow compare (浅层对比)
• 对于值类型来说：比较两个值是否相同（直接赋值即可，没有坑)
  
• 对于 引用类型来 说：只比较对象的引用（地址）是否相同
  
• 注意：state 或 props中属性值为引用类型时，应该创建新数据，不要直接修改原数据!
  
  数组：