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

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

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

- 一、React 原理
- - （1） setState() 的说明
  - - 1.1 更新数据
    - 1.2 推荐语法
    - 1.3 第二个参数
  - （2）JSX 语法的转化过程
  - （3）组件更新机制
  - （4）组件性能优化
  - - 4.1 减轻 state
    - 4.2 避免不必要的重新渲染
    - - 4.2.1 案例：随机数
    - 4.3 纯组件
    - - 4.3.1 实现原理
  - （5）虚拟 DOM 和 Diff 算法
- 二、总结

一、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 纯组件

纯组件： PureComponent 与 React.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'))

二、总结

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

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

一、React 原理

（1） setState() 的说明

1.1 更新数据

1.2 推荐语法

1.3 第二个参数

（2）JSX 语法的转化过程

（3）组件更新机制

（4）组件性能优化

4.1 减轻 state

4.2 避免不必要的重新渲染

4.2.1 案例：随机数

4.3 纯组件

4.3.1 实现原理

（5）虚拟 DOM 和 Diff 算法

二、总结

相关文章

央媒谈“文盲演员”引发饭圈甩锅大战

野生大熊猫深夜遛达 镜头前呆萌打卡

张萌谈演员到底需不需要有文化

情人节多地迎领证高峰

婚房烂尾10年业主住进毛坯房

多地首套房贷利率降至4%以下 为什么急于提前还贷

野生大熊猫深夜遛达镜头前呆萌打卡

多地首套房贷利率降至4%以下为什么急于提前还贷