（四）React 学习笔记：React 原理揭秘

最新推荐文章于 2024-07-11 17:28:05 发布
最新推荐文章于 2024-07-11 17:28:05 发布
阅读量284 收藏
点赞数
分类专栏： # React 文章标签： react.js node.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baekhyunee_05/article/details/120680941
版权

React 学习笔记

（一）React 学习笔记：React概述及基本使用
（二）React 学习笔记：React 组件基础
（三）React 学习笔记：React 组件进阶
（四）React 学习笔记：React 原理揭秘
（五）React 学习笔记：React 路由基础

React 原理揭秘

React 原理揭秘

1.setState() 说明

1.1 更新数据

setState() 是异步更新数据

可以多次调用 setState() ,只会触发一次重新渲染

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

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

	handleClick = () => {
		// 异步更新数据
		this.setState({
			count: this.state.count + 1,
		})
        
        this.setState({
			count: this.state.count + 1,
		})
		console.log(this.state.count) // 1
	}

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

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

1.2 推荐语法

使用 setState((state,props)=>{}) 语法

state:表示最新的 state, props:表示最新的 props

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

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

	handleClick = () => {
		/* // 异步更新数据
		this.setState({
			count: this.state.count + 1,
		})
		console.log(this.state.count) //1

    this.setState({
			count: this.state.count + 1,
		})
		console.log(this.state.count) //1
    */

		// 推荐语法
		this.setState((state, props) => {
			return {
				count: state.count + 1,
			}
		})
		this.setState((state, props) => {
			console.log('第二次调用：', state) //2
			return {
				count: state.count + 1,
			}
		})
		console.log(this.state.count) // 3
	}

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

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

1.3 第二个参数

  • 在状态更新（页面完成重新渲染）后立即执行某个操作
  • 语法：setState(updater[,callback])

callback 是指回调函数 可加可不加

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

class Opp 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) // 计数器：2
				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(<Opp />, document.getElementById('root'))

2.JSX 语法的转化过程

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

在这里插入图片描述

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

// JSX 语法的转化过程

// const element = <h1 className='greeting'>Hello JSX</h1>

const element = React.createElement(
	'h1',
	{
		className: 'greeting',
	},
	'Hello JSX'
)

console.log(element)

ReactDOM.render(element, document.getElementById('root'))

3.组件更新机制

  • setState() 的两个作用：1.修改 state 2.更新组件（UI）
  • 过程：父组件重新渲染是，也会重新渲染子组件，但只会渲染当前组件子树（当前组件及其所有子组件）

在这里插入图片描述

4.组件性能优化

4.1 减轻 state

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

4.2 避免不必要的重新渲染

  • 组件更新机制：父组件更新会引起子组件也被更新
  • 问题：子组件没有变化时也会被重新渲染，造成不必要的重新渲染
  • 解决方式：使用钩子函数shouldComponentUpdate(nextProps,nextState)
  • 作用：通过返回值决定该组件是否重新渲染，返回 true 表示重新渲染， false 表示不重新渲染
  • 触发时机：更新阶段的钩子函数，组件重新渲染前执行（shouldComponentUpdate -> render)
import React from 'react'
import ReactDOM from 'react-dom'

class Opp extends React.Component {
	state = {
		count: 0,
	}

	handleClick = () => {
		this.setState((state) => {
			return {
				count: this.state.count + 1,
			}
		})
	}
	// 钩子函数
	shouldComponentUpdate(nextProps, nextState) {
		// 返回 false,阻止组件重新渲染
		// return false

		// 最新的状态
		console.log('最新的state', nextState)
		// 更新前的状态
		console.log(this.state)
		// 返回 true,组件重新渲染
		return true
	}

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

ReactDOM.render(<Opp />, document.getElementById('root'))
案例：随机数

通过 nextState

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

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

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

	// 两次生成的随机数可能相同，则没必要重新渲染
	shouldComponentUpdate(nextState) {
		console.log('最新状态：', nextState, '当前状态：', this.state)

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

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

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

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

通过 nextState

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

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

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

	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)

		return nextProps.number !== this.props.number
	}
	render() {
		console.log('子组件render')
		return <h1>随机数：{this.props.number}</h1>
	}
}

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

4.3 纯组件

此小结有内容缺失，后续学习遇到会补上相关内容

  • 说明︰纯组件内部的对比是 shallow compare( 浅层对比)
  • 对于值类型来说:比较两个值是否相同(直接赋值即可，没有坑)
  • 对于引用类型来说∶只比较对象的引用(地址)是否相同
  • 注意: state 或 props 中属性值为引用类型时，应该创建新数据，不要直接修改原数据!(示例)
//正确！创建新数据
const newObj = {...state.obj, number:2}
setState({obj:newObj})

//正确！创建新数据
//不要用数组的 push/ unshift 等直接修改当前数组的方法
//而应该用 concat 或 slice 等这些返回新数组的方法
this.setState({
list:[...this.state.list,{新数据}]
})

5.虚拟 DOM 和 Diff 算法

  • React 更新视图：只要 state 变化就重新渲染视图
  • 问题：组件内只有一个 DOM 元素需要更新时，不需要把整个组件的内容重新渲染
  • 理想状态：部分更新，只更新变化的地方
  • React 通过 虚拟DOM配合 Diff 算法 实现部分更新

虚拟 DOM ：本质上就是一个 JS 对象，用来描述希望在屏幕上看到的内容（UI）

执行过程
  1. 初次渲染时，React 会根据初始 state ( Model )，创建一个虚拟 DOM 对象（树)。
  2. 根据虚拟 DOM 生成真正的 DOM ，渲染到页面中。
  3. 当数据变化后 ( setState() )，重新根据新的数据，创建新的虚拟DOM 对象（树)。
  4. 与上一次得到的虚拟 DOM 对象，使用 Diff 算法对比(找不同），得到需要更新的内容。
  5. 最终，React 只将变化的内容更新（patch) 到 DOM 中，重新渲染到页面。

在这里插入图片描述

代码演示
  • 组件 render() 调用后，根据状态和 JSX 结构生成的虚拟DOM 对象
import React from 'react'
import ReactDOM from 'react-dom'

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

	handleClick = () => {
		this.setState((state) => {
			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(<Opp />, document.getElementById('root'))

示例中，我们可以看到打印出来的内容中，只有 p 元素的文本节点内容更新

总结

React原理揭秘

  1. 工作角度:应用第一，原理第二。
  2. 原理有助于更好地理解 React 的自身运行机制。
  3. setState() 异步更新数据。
  4. 父组件更新导致子组件更新，纯组件提升性能。
  5. 思路清晰简单为前提，虚拟 DOM 和 Diff 保效率。
  6. 虚拟 DOM state + JSX 。
  7. 虚拟 DOM 的真正价值从来都不是性能。
keinee
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
（五）React 学习笔记：React 路由基础
keinee的博客
10-10 214
React 路由基础 1. React 路由可以有效的管理多个视图（组件）实现 SPA 2. Router 组件包裹整个应用，只需要使用一次 3. Link 组件是入口，Route 组件是出口 4. 通过 props.history 实现编程式导航 5. 默认模糊匹配，添加 exact 变精确匹配 6. React 路由的一切都是组件，可以像思考组件一样思考路由
（二）React 学习笔记：React 组件基础
keinee的博客
10-05 197
React 组件基础 1.组件的两种创建方式:函数组件和类组件 2.无状态（函数）组件，负责静态结构展示 3.有状态（类）组件，负责更新 UI，让页面动起来 4.绑定事件注意this指向问题 5.推荐使用受控组件来处理表单
（三）React 学习笔记：React 组件进阶
keinee的博客
10-08 273
1．组件通讯是构建React应用必不可少的一环。 2. props的灵活性让组件更加强大。 3．状态提升是React组件的常用模式。 4．组件生命周期有助于理解组件的运行过程。 5．钩子函数让开发者可以在特定的时机执行某些功能。 6. render props模式和高阶组件都可以实现组件状态逻辑复用，比较难懂，可以先学会其中一个就行。 7．组件极简模型:(state, props) => UI
（一）React 学习笔记：React概述及基本使用
keinee的博客
10-04 200
本文仅仅简单介绍了 react 入门的相关知识和脚手架的搭建，更多内容会在后续更新
React学习笔记1：React理念
qq_28032693的博客
10-08 196
React学习笔记1：《React理念》原文链接React的理念制约的瓶颈 原文链接 之前我在学校一直是Vue2的学习者，反复阅读过Vue2的文档，但实际上我并没有细读过Vue的源码，现在进入公司后主要使用的React Hooks作为开发框架，越学到后面越觉得自己作为一个前端工程师只学到了皮毛，刚好现在公司有双休了，抽一些学习React源码，为自己日后的进阶做准备。 感谢大神卡颂的开源电子书《React技术揭秘》，我准备每学一节就写一篇笔记，同时穿插一些其他的React源码文章的学习笔记，本章原文链接：ht
React学习笔记(四) | 原理与路由基础
Eshare分享
04-01 274
React 原理揭秘和路由基础
react黑马前端学习笔记
firewrk的博客
02-28 749
react学习笔记
React学习笔记-React原理揭秘
weixin_51583081的博客
01-05 119
Hi,我是赵猛,今天整理一下React学习中的一些笔记。
React学习笔记
一个人走的博客
04-24 1183
目录 1. React的概述 1.1 React的特点 1.2 React的基本使用 1.3 React手脚架的使用 1.3.1 在脚手架中使用React: 1.4JSX 的基本使用 1.4.1 使用步骤: 1.4.2 JSX 中使用JavaScript 表达式 1.4.3JSX 的条件渲染 1.4.4 JSX 的列表渲染 1.4.5JSX 的样式处理 1.5React 组件的两种创建方式 1.6抽离为独立JS 文件 2. React事件处理 2.1 事件绑定 2....
learning-react-native：React Native学习笔记本
02-05
React Native学习笔记 欢迎您帮忙纠错，一起帮助更多的人，学习交流QQ群： React本机 开发工具 [使用WebStorm调试React Native] [故事书] [reactotron] 节点相关 最佳拍档 原生集成 模拟与测试 [easy-mock介绍] ...
React:学习React:sparkles::shooting_star:
05-24
- A JavaScript library for building user interfaces:sparkles: 创建React应用的命令 :writing_hand: ... :pushpin: 四-井字游戏一个简单的井字游戏 输出 :pushpin: 五-主题切换器/切换器主题转换器
react 学习笔记
11-16
React 学习笔记 React 是一个流行的前端框架，用于构建用户界面。学习 React 需要掌握其核心概念，包括组件生命周期、状态管理、事件处理等。本节笔记将记录 React 学习过程中的关键知识点。 一、React 组件生命...
React学习笔记之事件处理（二）
12-09
之前已经给大家介绍了React中的条件渲染（传送门），本文将给大家关于React中事件处理的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： React的事件处理和DOM的事件处理是很相似的，只是有一些语法...
React学习笔记之条件渲染（一）
01-19
在React中，你可以创建不同的组件各自封装你需要的东西。之后你可以只渲染其中的一部分，这取决于应用的state（状态）。下面就来看看详细的介绍： 条件渲染 可以根据state的值进行组件的条件渲染。例如： function ...
react 的条件渲染
weixin_72324200的博客
07-10 270
可以在 JSX 中使用普通的 JavaScript `if`/`else` 语句来进行条件渲染。在 React 中，还可以使用逻辑 `&&` 运算符进行简单的条件渲染。另一种常见的方式是使用 JavaScript 中的三元运算符来进行条件渲染。有时需要更复杂的条件逻辑，可以使用条件运算符 (`?##### 使用 if/else 语句。##### 使用三元运算符。##### 使用条件运算符。使用逻辑 && 运算符。
【React Hooks原理 - useState】
weixin_44273311的博客
07-10 920
本文利用图文并茂的方式从源码角度解析了useState在mount挂载、update更新阶段对state的处理，以及通过set函数更新state的逻辑
在一个使用了 Sass 的 React Webpack 项目中安装和使用 Tailwind CSS
最新发布
Chloeeeeeeee的博客
07-11 296
在使用了 Sass 的 React 和 Webpack 项目中安装和使用 Tailwind CSS，可以按以下步骤进行：安装 Tailwind CSS 及其依赖，并初始化配置文件；创建 `postcss.config.js` 并配置 Tailwind CSS 插件；在 `src` 目录中创建 `index.css` 并引入 Tailwind 的基础、组件和工具类；更新 Webpack 配置以处理 PostCSS 插件和 Tailwind CSS；最后在组件中导入 `index.css` 和 Sass 文件
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
xiejunlan的博客
07-11 1404
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
Packt.React.and.React.Native.4th.Edition
06-27
Over the years, React and React Native has proven itself among JavaScript developers as a popular choice for a complete and practical guide to the React ecosystem. This fourth edition comes with the latest features, enhancements, and fixes to align with React 18, while also being compatible with React Native. It includes new chapters covering critical features and concepts in modern cross-platform app development with React.

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值