【React入门必备知识篇04】--- React 原理解析

前言❤️ 有人在夜市或小食摊的烟火气中长歌纵酒,也有人眼波流转迎面撞进夏日晚风 ❤️

一、React 原理

(1) setState() 的说明

1.1 更新数据

  • setState()更新数据是异步的;
  • 注意:使用该语法,后面的setState不要依赖前面setState的值;
  • 多次调用setState,只会触发一次render;

完整代码演示如下:

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  setState() 异步更新数据
*/

class App extends React.Component {
    state = {
        count: 1
    }

    handleClick = () => {
        // 此处,更新state
        // 注意:异步更新数据的!!!
        this.setState({
            count: this.state.count + 1
        })
        console.log('count:', this.state.count) // 1
        this.setState({
            count: this.state.count + 1 // 1 + 1
        })
        console.log('count:', this.state.count) // 1
    }

    render() {
        console.log('render')
        return (
            <div>
                <h1>计数器:{this.state.count}</h1>
                <button onClick={this.handleClick}>+1</button>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'))

1.2 推荐语法

  • 推荐:使用 setState((state,props) => {}) 语法;
  • 参数state:表示最新的state;
  • 参数props:表示最新的props;

完整代码演示如下:

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  setState() 推荐语法
*/

class App extends React.Component {
    state = {
        count: 1
    }

    handleClick = () => {
        // 推荐语法:
        // 注意:这种语法也是异步更新state的!
        this.setState((state, props) => {
            return {
                count: state.count + 1 // 1 + 1
            }
        })
        this.setState((state, props) => {
            console.log('第二次调用:', state)
            return {
                count: state.count + 1
            }
        })
        console.log('count:', this.state.count) // 1
    }

    render() {
        return (
            <div>
                <h1>计数器:{this.state.count}</h1>
                <button onClick={this.handleClick}>+1</button>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'))

1.3 第二个参数

  • 场景:在状态更新(页面完成重新渲染)后立即执行某个操作;
  • 语法:setState(update[,callback])

完整代码演示如下:

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  setState() callback
*/

class App extends React.Component {
    state = {
        count: 1
    }

    handleClick = () => {
        this.setState(
            (state, props) => {
                return {
                    count: state.count + 1
                }
            },
            // 状态更新后并且重新渲染后,立即执行:
            () => {
                console.log('状态更新完成:', this.state.count) // 2
                console.log(document.getElementById('title').innerText)
                document.title = '更新后的count为:' + this.state.count
            }
        )
        console.log(this.state.count) // 1
    }

    render() {
        return (
            <div>
                <h1 id="title">计数器:{this.state.count}</h1>
                <button onClick={this.handleClick}>+1</button>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'))

(2)JSX 语法的转化过程

  • JSX仅仅是createElement() 方法的语法糖(简化语法);
  • JSX语法被 @babel/preset-react 插件编译为createElement() 方法;
  • React 元素: 是一个对象,用来描述你希望在屏幕上看到的内容;

在这里插入图片描述


(3)组件更新机制

  • setState() 的两个作用:1.修改state 2.更新组件(UI)
  • 过程:父组件重新渲染时,也会重新渲染子组件,但只会渲染当前组件子树(当前组件以其所有子组件)

在这里插入图片描述


(4)组件性能优化

4.1 减轻 state

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

代码演示如下:

class Hello extends Component {
	componentDidMount() {
	// timerId存储到this中,而不是state中
		this.timerId = setInterval(() => {}, 2000)
	}
	componentWillUnmount() {
		clearInterval(this.timerId)
	}
	render() {}
}

4.2 避免不必要的重新渲染

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

代码演示如下:

class Hello extends Component {
	shouldComponentUpdate() {
		// 根据条件,决定是否重新渲染组件
		return false
	}
	render() {}
}
4.2.1 案例:随机数

1️⃣ 随机数案例(比较state)

完整代码演示如下:

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  组件性能优化:
*/

// 生成随机数
class App extends React.Component {
    state = {
        number: 0
    }

    handleClick = () => {
        this.setState(() => {
            return {
                number: Math.floor(Math.random() * 3)
            }
        })
    }

    // 因为两次生成的随机数可能相同,如果相同,此时,不需要重新渲染
    shouldComponentUpdate(nextProps, nextState) {
        console.log('最新状态:', nextState, ', 当前状态:', this.state)

        return nextState.number !== this.state.number

        // if (nextState.number !== this.state.number) {
        //   return true
        // }
        // return false

        // if (nextState.number === this.state.number) {
        //   return false
        // }
        // return true
    }

    render() {
        console.log('render')
        return (
            <div>
                <h1>随机数:{this.state.number}</h1>
                <button onClick={this.handleClick}>重新生成</button>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'))

2️⃣ 随机数案例(比较props)

完整代码演示如下:

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  组件性能优化:
*/

// 生成随机数
class App extends React.Component {
    state = {
        number: 0
    }

    handleClick = () => {
        this.setState(() => {
            return {
                number: Math.floor(Math.random() * 3)
            }
        })
    }

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

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

class NumberBox extends React.Component {
    shouldComponentUpdate(nextProps) {
        console.log('最新props:', nextProps, ', 当前props:', this.props)
        // 如果前后两次的number值相同,就返回false,不更新组件
        return nextProps.number !== this.props.number

        // if (nextProps.number === this.props.number) {
        //   return false
        // }
        // return true
    }
    render() {
        console.log('子组件中的render')
        return <h1>随机数:{this.props.number}</h1>
    }
}

ReactDOM.render(<App />, document.getElementById('root'))

4.3 纯组件

  • 纯组件: PureComponentReact.Component功能相似
  • 区别: PureComponent 内部自动实现了 shouldComponentUpdate钩子,不需要手动比较
  • 原理:纯组件内部通过分别 对比 前后两次 props和state的值,来决定是否重新渲染组件

完整代码演示如下:

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  组件性能优化:
*/

// 生成随机数
class App extends React.PureComponent {
    state = {
        number: 0
    }

    handleClick = () => {
        this.setState(() => {
            return {
                number: Math.floor(Math.random() * 3)
            }
        })
    }

    render() {
        console.log('父组件中的render')
        return (
            <div>
                <h1>随机数:{this.state.number}</h1>
                <button onClick={this.handleClick}>重新生成</button>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'))
4.3.1 实现原理
  • 说明:纯组件内部的对比是 shallow compare(浅层对比)
  • 对于值类型来说:比较两个值是否相同(直接赋值即可,没有坑)

在这里插入图片描述

  • 说明:纯组件内部的对比是 shallow compare(浅层对比)
  • 对于引用类型来说:只比较对象的引用(地址)是否相同

在这里插入图片描述


(5)虚拟 DOM 和 Diff 算法

  • React更新视图的思想是:只要state变化就重新渲染视图;
  • 特点:思路非常清晰;
  • 问题:组件中只有一个DOM元素需要更新时,也得把整个组件的内容重新渲染吗? 不是;
  • 理想状态:部分更新,只更新变化的地方;
  • React运用的核心点:虚拟DOM 配合 Diff 算法;

😆虚拟 DOM😆:本质上就是一个 JS 对象,用来描述你希望在屏幕上看到的内容(UI);

😆执行过程😆:

  • 初次渲染时,React会根据初始化的state(model),创建一个虚拟DOM对象(树)
  • 根据虚拟DOM生成真正的DOM,渲染到页面;
  • 当数据变化后(setState()),会重新根据新的数据,创建新的虚拟DOM对象(树);
  • 与上一次得到的虚拟DOM对象,使用 Diff算法 比对(找不同),得到需要更新的内容;
  • 最终,React只将变化的内容更新(patch)到DOM中,重新渲染到页面;

在这里插入图片描述
完整代码演示如下:

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  虚拟DOM 和 Diff算法
*/

// 生成随机数
class App extends React.PureComponent {
    state = {
        number: 0
    }

    handleClick = () => {
        this.setState(() => {
            return {
                number: Math.floor(Math.random() * 2)
            }
        })
    }

    // render方法调用并不意味着浏览器中的重新渲染!!!
    // render方法调用仅仅说明要进行diff
    render() {
        const el = (
            <div>
                <h1>随机数:</h1>
                <p>{this.state.number}</p>
                <button onClick={this.handleClick}>重新生成</button>
            </div>
        )
        console.log(el)

        return el
    }
}

ReactDOM.render(<App />, document.getElementById('root'))

二、总结

😝 由于内容较多,所以我决定分开写啦,我会坚持一直更新呢!喜欢的朋友们记得点点赞哦! 😝

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:黑客帝国 设计师:我叫白小胖 返回首页
评论 40

打赏作者

battledao eternity

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值