React 原理

函数式编程

  • 纯函数
    reducer 必须是一个纯函数,即没有副作用的函数,不修改输入值,相同的输入一定会有相同的输出
  • 不可变值
    state 必须是不可变值,否则在 shouldComponentUpdate 中无法拿到更新前的值,无法做性能优化操作。

vdom 和 diff 算法

JSX 本质

  • React.createElement 函数
    • React.createElement(tag, props, child1, child2, child3)
    • React.createElement(tag, props, [child1, child2, child3])
  • 执行生成 vnode
javascript 复制代码
const elem = <div>
		<p>aaa</p>
		<p style={{ color: 'red' }}>bbb</p>
	</div>;
javascript 复制代码
const elem = React.createElement(
	"div", 
	null, 
	React.createElement("p", null, "aaa"), 
	React.createElement("p", { style: { color: "red" } }, "bbb")
);
javascript 复制代码
const lisElem = <div>
  {
    this.state.list.map((item, index) => {
	    return (<span key={item.id}>
	        {item.name}
	    </span>);
	 })
  }
</div>;
javascript 复制代码
const listElem = React.createElement(
	"div", 
	null, 
	(void 0).state.list.map((item, index) => {
		return React.createElement("span", { key: item.id }, item.name);
	})
);

合成事件

  • react 的事件不是原生事件 MouseEvent,而是合成事件 SyntheticEvent
  • react16 是挂载到 document 上的;react17 开始是挂载到 root 上的
  • 事件处理函数交给合成事件,事件冒泡到 document / root 上进行处理

出处:https://coding.imooc.com/lesson/419.html#mid=41943

合成事件的好处:

  • 更好的兼容性和跨平台:比如 react-native
  • 全部挂载到 document / root上,减少内存消耗,避免频繁解绑
  • 方便事件的统一管理(事务机制)

出处:https://coding.imooc.com/lesson/419.html#mid=41943

React17 开始挂载到 root 组件上:

  • document 只有一个,root 有多个,有利于多个 react 版本共存,例如:微前端

setState 和 batchUpdate

setState 主流程

出处:https://coding.imooc.com/lesson/419.html#mid=41943

  • 异步:左边分支
  • 非异步:右边分支

isBatchingUpdates

javascript 复制代码
class ListDemo extends React.Component
	constructor(props) {
		// ...
	}
	render() {
		// ...
	}
	
	increase = () => {
		// 开始: 处于 batchUpdate
		// isBatchingiUpdates = true 
		this.setState({
			count: this.state.count + 1
		});
		// 结束
		// isBatchingUpdates = false
	}
}
javascript 复制代码
class ListDemo extends React.Component
	constructor(props) {
		// ...
	}
	render() {
		// ...
	}
	
	increase = () => {
		// 开始: 处于 batchUpdate
		// isBatchingUpdates = true 
		setTimeout(() => {
			// 此时 isBatchingUpdates 是 false
			this.setState({
				count: this.state.count + 1
			});
		});
		// 结束
		// isBatchingUpdates = false
	}
}
javascript 复制代码
componentDidMount() {
	// 开始: 处于 batchUpdate
	// isBatchingUpdates = true 
	document.body.addEventListener('click', () => {
		// 此时 isBatchingUpdates 是 false
		this.setState({
			count: this.state.count + 1
		});
		console.log('count in body event', this.stae.count);
	});
	// 结束
	// isBatchingUpdates = false
}

哪些能命中 batchUpdate 机制:

  • 生命周期(和它调用的函数)
  • React 中注册的事件(和它调用的函数)
  • React 可以"管理"的入口

transaction 事务机制

javascript 复制代码
class ListDemo extends React.Component
	constructor(props) {
		// ...
	}
	render() {
		// ...
	}

	increase = () => {
		// 	开始:处于 batchUpdate
		// isBatchingUpdates = true

		// 其他任何操作

		// 结束
		// isBatchingUpdates = false
	}
}

出处:https://coding.imooc.com/lesson/419.html#mid=41943

javascript 复制代码
transaction.initialize = function() {
	console.log('initialize');
};

transaction.close = function() {
	console.log('close');
};

function method() {
	console.log('abc');
}

transaction.perform(method);

// 输出 'initialize'
// 输出 'abc'
// 输出 'close'

react 组件渲染过程

  1. JSX 如何渲染为页面:
    • 初始化时候继承 props 和 生成 state
    • 通过 render() 函数 生成 vnode
    • patch(elem, vnode):通过 patch 函数将 vonde 更新到 dom
  2. setState 之后如何更新页面:
    • setSate(newState) -> dirtyComponents(可能有子组件):通过 setState 产生新的 state,存到 dirtyComponent 进行异步更新
    • 通过 render() 函数生成新的 vnode
    • patch(elem, vnode):再通过 patch 函数用 newVnode 去更新旧的 vnode

react-fiber

react 的 patch 被拆分为两个阶段:

  • reconciliation阶段:执行 diff 算法,纯 js 计算
  • commit 阶段:将 diff 结果渲染成 dom

背景

  • js 是单线程的,且和 dom 渲染共用一个线程
  • 当组件足够复杂,组件更新时计算和渲染压力都很大
  • 同时再有 dom 操作需求,比如动画、鼠标拖拽等,那么将会卡顿

解决方案:fiber

fiber

  • react 内部的运行机制,开发者体会不到
  • reconciliation 阶段进行任务拆分(commit 无法拆分)
  • dom 需要渲染时暂停,空闲时恢复
  • 通过 window.requestidleCallback 进行控制(并非所有浏览器支持)

FQA

  1. JSX 的本质是什么?
    • jsx 的本质是 React.createElement 函数,执行生返回 vnode
  2. react 组件更新渲染的过程。
    • 初始化时候继承 props 和 生成 state
    • 通过 render() 函数生成 vnode
    • 再通过 patch 函数将 vonde 渲染成真实 dom
    • 通过 setState 修改产生新的 state
    • 触发 re-render 生成新的 vnode
    • 再通过 patch 函数用 newVnode 去更新旧的 vnode
  3. react 为什么要将 patch 过程拆分成 reconciliationcommit 两个阶段?
    • 因为js 是单线程的,且和 dom 渲染共用一个线程
    • 当组件很复杂的时候,组件更新时计算和渲染压力都很大
    • 同时再有 dom 操作需求,比如动画、鼠标拖拽等,那么将会卡顿
相关推荐
安冬的码畜日常8 分钟前
【D3.js in Action 3 精译_027】3.4 让 D3 数据适应屏幕(下)—— D3 分段比例尺的用法
前端·javascript·信息可视化·数据可视化·d3.js·d3比例尺·分段比例尺
l1x1n035 分钟前
No.3 笔记 | Web安全基础:Web1.0 - 3.0 发展史
前端·http·html
昨天;明天。今天。1 小时前
案例-任务清单
前端·javascript·css
zqx_72 小时前
随记 前端框架React的初步认识
前端·react.js·前端框架
惜.己2 小时前
javaScript基础(8个案例+代码+效果图)
开发语言·前端·javascript·vscode·css3·html5
什么鬼昵称3 小时前
Pikachu-csrf-CSRF(get)
前端·csrf
长天一色3 小时前
【ECMAScript 从入门到进阶教程】第三部分:高级主题(高级函数与范式,元编程,正则表达式,性能优化)
服务器·开发语言·前端·javascript·性能优化·ecmascript
NiNg_1_2343 小时前
npm、yarn、pnpm之间的区别
前端·npm·node.js
秋殇与星河3 小时前
CSS总结
前端·css
BigYe程普4 小时前
我开发了一个出海全栈SaaS工具,还写了一套全栈开发教程
开发语言·前端·chrome·chatgpt·reactjs·个人开发