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

已于 2022-07-06 20:18:55 修改
阅读量3.7k 收藏 39
点赞数 42
分类专栏： React 文章标签： react.js 前端 前端框架 react
于 2022-06-06 07:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/battledao/article/details/125139161
版权
前言❤️ 有人在夜市或小食摊的烟火气中长歌纵酒，也有人眼波流转迎面撞进夏日晚风 ❤️

【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 纯组件
  • 纯组件： 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'))

二、总结

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

battledao eternity
关注
专栏目录
【LangChain编程：从入门到实践】生态系统概览：组件（Components）-链（Chains）-代理（Agents）-内存（Memory）-提示工程（Prompt Engineering）
AI天才研究院
07-24 852
本文旨在为读者提供一个全面而深入的LangChain生态系统概览。我们将探讨LangChain的核心组件、工具链以及它如何革新大语言模型（LLM）的应用开发过程。通过本文，读者将了解到：本文面向以下读者群体：本文将按以下结构展开：LangChain的生态系统是围绕着简化大语言模型应用开发而构建的。为了更好地理解LangChain的核心概念及其相互联系，我们可以通过以下Mermaid流程图来visualize整个生态系统的架构：LangChainModelsPromptsChainsMemoryIndexes
React 原理
yexiangCSDN的专栏
05-19 326
React 原理揭秘 Contents 目  setState() 的说明  JSX 语法的转化过程  组件更新机制  组件性能优化  虚拟 DOM 和 Diff 算法 1. setState() 的说明  setState() 是异步更新数据的  注意：使用该语法时，后面的 setState() 不要依赖于前面的 setState()  可以多次调用 setState() ，只会触发一次重新渲染 this.state = { count: 1 } this.setState(
React核心工作原理
xiaofeng123aazz的博客
09-28 1441
语法糖， React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
React（二）原理
木馏雕金
10-13 1122
三 React主要原理      Reactjs一个用来构建用户界面的JavaScript库,相当于MVC架构中的V层框架，与市面上其他框架不同的，React把每个组件当成了一个状态机，组件内部通过state来维护组件状态的变化，当组件的状态发生变化时，React通过虚拟DOM技术来增量并高效的更新真实的DOM。 1.虚拟DOM （Virtual DOM）        在前端开发的过程
深入了解React 工作原理是什么
最新发布
qq_34820371的博客
10-12 1075
React 通过虚拟 DOM、组件化和单向数据流的方式管理 UI 渲染，确保应用在复杂状态变更下依然能够高效运行。调和算法和 Fiber 架构的引入，使得 React 能够更灵活地调度更新任务，提升用户体验。
react原理
雪落凡尘
04-06 487
JSX：标签语法 渲染逻辑与UI逻辑内在耦合 UI绑定事件，状态变化更新到UI，在UI展示准备好的数据 react组件首字母大写更加语义化，Dom标签小写 React.createElement的语法糖；编译到<当作html来编译，编译到｛｝当作普通js代码编译 react元素：react创建的普通对象，reactdom负责更新dom与react元素保持一致 不可变对象（不能添加修改删除属性，不能修改已有属性的可枚举，可配置，可写性）嵌套Object.freeze 状态更新 16.3生命周
react原理解析
qq_27314517的博客
02-28 2353
这里写目录标题函数式编程vdom 和diffjsx本质合成事件为什么要合成事件机制setState batchUpdate多次的修改state的时候,有时合并(对象形式),有时不合并(函数形式)在setState的时候,改变state有时异步(普通使用),有时同步(setTimeout,DOM事件)setState 主流程batchUpdate机制transation (事务)机制组件渲染过程jsx如何渲染为页面setState之后如何更新页面fiber如何进行优化性能 函数式编程 一种编程范式,概念比较
React 的 diff 算法
飞鸟Blog
11-02 2945
原文: http://calendar.perfplanet.com/2013/diff/ 作者: Christopher Chedeau React 是 Facebook 开发的构建用户界面的类库. 它从设计之初就将性能作为重点. 这篇文章我展示 diff 算法和渲染过程怎样工作, 你可以借鉴优化自己的应用. Diff 算法 在深入实现的细节之前, 需要了解一下 Re
React框架入门至精通教程与实践案例解析
资源摘要信息:"React框架教程&案例：从入门到实践的深度探索" React作为当下前端开发领域的热门技术之一，以其组件化的设计理念和高效的DOM操作等特性受到了广泛的欢迎。本教程与案例集旨在为读者提供从零基础入门...
使用React实现图片画廊（送女朋友必备）
Chenkaixin0512的博客
08-29 2738
个人站点：chenkaixin.cn github：https://github.com/KaixinChen0512 这个小项目用到的主要技术是React以及webpack，历时差不多断断续续三天时间吧，初衷是为了入门react以及对webpack的工作原理有个更深刻的认识，当然其中也遇到了不少难题，现做记录，话不多说了，上效果图。 初识React首先通过React的createCla
面试必考之React合成事件原理[视频+源码解析]
React_Community的博客
02-14 706
为什么要自己实现一套事件机制由于fiber机制的特点，生成一个fiber节点时，它对应的dom节点有可能还未挂载，onClick这样的事件处理函数作为fiber节点的prop，也就不能直接...
全栈开发课程：Promise、前端工程化、Vue、React、Node.js与算法解析
同时，课程也涵盖了现代Hybrid开发的原理与实践，包括React Native和Electron的入门与实战。 算法部分是全栈开发者必备的技能之一，课程中包含了排序算法、复杂算法、树与图类算法等，这些都是提升编程能力的重要...
React原理
changjiangshui的博客
09-22 542
1.虚拟 DOM：React 采用一个虚拟的 DOM 树来代替实际的 DOM 树，通过比较新旧两棵虚拟 DOM 的差异，来最小化 DOM 操作，从而提高性能。2.组件：React 将页面分割成若干个组件，每个组件都拥有自己的状态和生命周期，并且可以嵌套使用，从而构建复杂的页面。3.单向数据流：React 的数据流动是单向的，即数据只能从父组件传递到子组件，从而避免了复杂的数据依赖关系。5.状态提升：当多个组件需要共享状态时，React 通过将共享状态提升到它们的共同父组件中来实现数据的共享。
react-原理解析
lovepink527的博客
10-21 216
setState()说明 setState()是异步更新调用 注意：使用该语法时，后面的setState()不要依赖于前面的setState() 可以多次调用setState(),只会触发一次重新渲染 解决在一次setState()上修改值的情况 this.setState((state,props) => { return { //state最新的值 count: state.count + 1 .
react工作原理
热门推荐
https://www.xiaohongshu.com/user/profile/5f3543150000000001002b2e
05-02 1万+
现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（Virtual&amp;amp;amp;nbsp;DOM）和组件化的开发深深的吸引了我，下面来跟我一起领略ReactJs的风采吧~~ 文章有点长，耐心读完，你会有很大收获哦~ &amp;amp;amp;nbsp;一、ReactJS简介 ...
对React一些原理的理解
weixin_34143774的博客
10-12 311
原文地址在我的博客, 转载请注明出处，谢谢！ 前言 随着项目开发的深入，不可避免了遇到了一些问题。刚开始出现问题时很懵，不知道该怎么解决，原因就是对React的原理理解的不够透彻，不知道问题出在哪。在解决问题的过程中，也逐渐深入了解了React的一些原理，这篇文章就来分享一下我对React一些原理的理解。 注意 这篇文章并不是教程，只...
React框架的来龙去脉，react的技术原理及技术难点和要点，小白的进阶之路
zhang9880000的博客
06-22 2557
React 生态系统包含了丰富的工具和库，帮助开发者### 总结（续）React 生态系统包含了丰富的工具和库，帮助开发者高效地构建现代 Web 应用。从状态管理、表单处理、国际化，到动画、测试、构建工具，React 社区提供了多种解决方案，满足不同场景下的需求。提升开发效率：使用高效的状态管理和表单处理库，如 Redux 和 Formik。增强用户体验：通过动画库如 Framer Motion 和 Recharts 展示丰富的交互和数据可视化。提高代码质量。
React 工作原理
慕天远的博客
12-19 2296
Reactjs 起源于Facebook内部项目，是一个用来构建用户界面的 javascript 库，相当于MVC架构中的V层框架，与市面上其他框架不同的是，React 把每一个组件当成了一个状态机，组件内部通过state来维护组件状态的变化，当组件的状态发生变化时，React通过虚拟DOM技术来增量并且高效的更新真实DOM。本文将对React 的这些特点进行简单的介绍。 一个简单的React组件...
react基础Day04-React原理揭秘&React路由基础
码化疼
11-30 440
React原理揭秘 目标 能够说出React组件的更新机制 能够对组件进行性能优化 能够说出虚拟DOM和DIff算法 组件更新机制 setState() 的两个作用 修改state 更新组件 过程：父组件重新渲染时，也会重新渲染子组件，但只会渲染当前组件子树（当前组件以其所有子组件） 组件性能优化 减轻state 减轻state：只存储跟组件渲染相关的数据（比如：count...
评论 40
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

battledao eternity

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

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

打赏作者

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

抵扣说明：

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

余额充值