React原理

1.函数式编程

1.一种编程范式,概念比较多

2.纯函数

3.不可变值

2.vdom和diff

1.只比较同一层级,不跨级比较

2.tag不相同,直接删掉重建,不再深度比较

3.tag和key相同,则认为是相同节点,不再深度比较

3.JSX的本质

jsx本质是通过React.createElement();来实现的

4.SetState是同步还是异步

SetState无所谓同步还是异步

看是否能命中batchUpdate机制

判断isBatchingUpdates

哪些能命中batchUpdate机制

生命周期(和它调用的函数)

React中注册的函数(和它调用的函数)

React可以“管理”的入口

哪些不能命中batchUpdate机制

setTimeout,setInterval(和它调用的函数)

自定义的Dom事件(和它调用的函数)

React“管不到”的入口

5.transcation事务机制

transcation.initialize=function(){
   console.log('initialize')
}
transcation.close=function(){
   console.log('close')
}
function method(){
   console.log('abc')
}

transcation.perfrom(method);

6.JSX的本质和Vdom

1.JSX即createElement函数

2.执行生成Vnode

3.patch(elem,vnode)和patch(vnode,newvnode)来实现渲染和更新

7.组件渲染和更新的过程

1.组件的渲染

1.获取props和state

2.render()根据JSX生成Vnode

3.通过patch(elem,Vnode) 来进行渲染

2.组件的更新

1.setState(newState)--->dirtyComponents

2.render生成newVnode

3.patch(vnode,newVnode)

其中patch分为两个阶段:

reconciliation阶段-执行diff算法,纯JS计算

commit阶段-将diff结果渲染DOM

### React 工作原理深入解析 React 是一种用于构建用户界面的声明式 JavaScript 库,其设计目标是让开发者可以轻松创建复杂的 UI 组件并保持高效的更新能力。以下是关于 React 的工作原理及其内部机制的详细分析。 #### 1. JSX 到虚拟 DOM 的转换 在 React 中,JSX 并不是一个真正的 HTML 结构,而是一种语法糖,在编译阶段会被转化为普通的 JavaScript 对象表示形式——即虚拟 DOM(Virtual DOM)。例如,在 React 17 及之后版本中,`import React from "react"` 和 `import ReactDOM from "react-dom"` 不再强制需要显式导入[^1],因为 Babel 或其他工具链会在背后自动完成这些操作。这种优化简化了开发者的配置过程,同时也提升了项目的可维护性和兼容性。 #### 2. React Fiber 架构的核心作用 为了提升性能和用户体验,React 在 v16 版本引入了一种全新的协调算法架构——Fiber。它基于协程的思想实现了任务分片的能力,允许浏览器在执行高优先级的任务时中断当前正在进行中的低优先级任务,并稍后再继续未完成的工作。这不仅提高了应用对于复杂场景下的响应速度,还有效减少了长时间运行的操作可能引发的卡顿现象[^2]。 #### 3. Hooks 的底层实现逻辑 Hooks 提供了一个无需依赖类组件即可访问状态和其他功能的方式,极大地增强了函数组件的功能范围。其实现方式本质上利用闭包保存变量的状态信息并通过调度器来管理生命周期方法调用顺序等问题。比如当使用 `useState` 定义某个状态值时,实际上是在内部注册了一系列回调函数以便于后续触发重新渲染等行为;而对于像 `useEffect` 这样的副作用 Hook,则会记录下哪些部分应该被清理以及何时再次激活它们等等。 #### 4. Server-Side Rendering (SSR) 原理概述 除了客户端渲染外,React 支持服务端渲染以改善首屏加载时间和服务质量。具体来说就是先由 Node.js 环境生成静态HTML字符串发送给前端展示出来然后再接管剩余交互逻辑的过程称为 SSR 。这一过程中涉及到模板引擎的选择、数据预取策略制定等多个方面考虑因素[^4]。通过这种方式不仅可以加快页面呈现的速度还可以增强 SEO 效果。 ```javascript // 示例代码:简单的 SSR 渲染流程模拟 const express = require('express'); const app = express(); const path = require('path'); app.get('/', async (req, res) => { const InitialData = await fetchData(); // 获取初始数据 let context = {}; const htmlString = renderToString(<App initialData={InitialData} />, {context}); if(context.url){ return res.redirect(301, context.url); } res.send(` <!DOCTYPE html> <html lang="en"> ... ${htmlString} </html> `); }); function App({initialData}) { return ( <div>{JSON.stringify(initialData)}</div> ); } app.listen(8080, ()=> console.log("Server started on port 8080")); ``` 以上是对 React 核心工作机制的一个全面总结,涵盖了从基础概念到高级特性的多个层面的知识点。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值