React 原理

发布时间:2024年01月14日

函数式编程

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

vdom 和 diff 算法

JSX 本质

  • React.createElement 函数
    • React.createElement(tag, props, child1, child2, child3)
    • React.createElement(tag, props, [child1, child2, child3])
  • 执行生成 vnode
const elem = <div>
		<p>aaa</p>
		<p style={{ color: 'red' }}>bbb</p>
	</div>;
const elem = React.createElement(
	"div", 
	null, 
	React.createElement("p", null, "aaa"), 
	React.createElement("p", { style: { color: "red" } }, "bbb")
);
const lisElem = <div>
  {
    this.state.list.map((item, index) => {
	    return (<span key={item.id}>
	        {item.name}
	    </span>);
	 })
  }
</div>;
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

class ListDemo extends React.Component
	constructor(props) {
		// ...
	}
	render() {
		// ...
	}
	
	increase = () => {
		// 开始: 处于 batchUpdate
		// isBatchingiUpdates = true 
		this.setState({
			count: this.state.count + 1
		});
		// 结束
		// isBatchingUpdates = false
	}
}
class ListDemo extends React.Component
	constructor(props) {
		// ...
	}
	render() {
		// ...
	}
	
	increase = () => {
		// 开始: 处于 batchUpdate
		// isBatchingUpdates = true 
		setTimeout(() => {
			// 此时 isBatchingUpdates 是 false
			this.setState({
				count: this.state.count + 1
			});
		});
		// 结束
		// isBatchingUpdates = false
	}
}
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 事务机制

class ListDemo extends React.Component
	constructor(props) {
		// ...
	}
	render() {
		// ...
	}

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

		// 其他任何操作

		// 结束
		// isBatchingUpdates = false
	}
}

出处:https://coding.imooc.com/lesson/419.html#mid=41943
在这里插入图片描述

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 操作需求,比如动画、鼠标拖拽等,那么将会卡顿
文章来源:https://blog.csdn.net/sinat_39145919/article/details/135439193
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。