React原理揭秘

Posted 2023-02-01 黑马程序员官方

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React原理揭秘相关的知识，希望对你有一定的参考价值。

React原理揭秘

目标

能够说出React组件的更新机制
能够对组件进行性能优化
能够说出虚拟DOM和DIff算法

组件更新机制

setState() 的两个作用
- 修改state
- 更新组件
过程：父组件重新渲染时，也会重新渲染子组件，但只会渲染当前组件子树（当前组件以其所有子组件）

组件性能优化

减轻state

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

避免不必要的重新渲染

组件更新机制：父组件更新会引起子组件也被更新，这种思路很清晰
问题：子组件没有任何变化时也会重新渲染
如果避免不必要的重新渲染？
解决方式：使用钩子函数 shouldComponentUpdate(nextProps, nextState)
- 在这个函数中，nextProps和nextState是最新的状态以及属性
作用：这个函数有返回值，如果返回true，代表需要重新渲染，如果返回false，代表不需要重新渲染
触发时机：更新阶段的钩子函数，组件重新渲染前执行(shouldComponentUpdate => render)

随机数案例

需求：随机生成数字，显示在页面，如果生成的数字与当前显示的数字相同，那么就不需要更新UI，反之更新UI。

利用nextState参数来判断当前组件是否需要更新

class App extends React.Component 
    state = 
        number: 0
    
    // 点击事件，每次点击生成一个随机数
    hanldeBtn = () => 
        this.setState(
            number: Math.floor(Math.random() * 3)
        )
    
    // 将要更新UI的时候会执行这个钩子函数
    shouldComponentUpdate(nextProps,nextState) 
         // 判断一下当前生成的 值是否与页面的值相等
         if(nextState.number !== this.state.number)
             return true
         
         return false
    
    render() 
        return (
            <div>
                随机数：this.state.number <br />
                <button onClick=this.hanldeBtn>生成随机数</button>
            </div>
        )

利用props参数来判断是否需要进行更新

class App extends React.Component 
    state = 
        number: 0
    
    // 点击事件，每次点击生成一个随机数
    hanldeBtn = () => 
        this.setState(
            number: Math.floor(Math.random() * 3)
        )
    

    render() 
        return (
            <div>
                <NumberBox number=this.state.number />
                <button onClick=this.hanldeBtn>生成随机数</button>
            </div>
        )
    

class NumberBox extends React.Component 
    // 将要更新UI的时候会执行这个钩子函数
    shouldComponentUpdate(nextProps, nextState) 
        // 判断一下当前生成的 值是否与页面的值相等
        if (nextProps.number !== this.props.number) 
            return true
        
        return false
    
    render() 
        return (
            <h1>随机数：this.props.number </h1>
        )