React.js

Mac OS上，初始化一个React我的项目初始化我的项目npm init -y创立目录在我的项目根目录下，创立src源代码目录和dist产品目录创立首页文件在src目录下创立index.html和index.js文件装置webpackcnpm i webpack -Dpackage.json内容如下：{ "name": "react", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^5.66.0" }}装置webpack-clicnpm i webpack-cli -Dpackage.json内容如下：{ "name": "react", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^5.66.0", "webpack-cli": "^4.9.1" }}设置环境变量echo 'export PATH="./node_modules/.bin:$PATH"' >> ~/.zshrcsource ~/.zshrc新建webpack配置文件在我的项目根目录下新建：webpack.config.js内容如下：//向外裸露一个打包的配置对象；因为webpack是基于Node构建的，所以，webpack反对所有Node Api和语法module.exports = { mode : 'development' //'development' or 'production'}留神：webpack4.x提供了约定大于配置的概念，目标是为了尽量减少配置文件的体积 ...

2020年下半年，有几张图片刷屏：有人骑在自行车上看书，有人边骑车边用电脑，有人床上铺满了一摞摞书……“边骑车边用电脑”的同学被称为“卷王”登上热搜。缓缓的这些同学毕业了，卷王带着卷走上了社会，带动了其他人一起卷，卷的人越来越多了，苦不堪言，就导致了一些反复造轮子和造一些毫无意义的轮子的景象呈现。造轮子，原本是件坏事，然而随着内卷的呈现，造轮子就缓缓演变成了一个极其，呈现了凭空造轮子和反复造轮子的事件，既不能服务于业务，还使得内卷景象越来越重大，真正的苦不堪言。 剖析以后业务遇到的问题，进而产生新的思路和总结，利用技术的伎俩晋升工作效率，进步开发速度，才是真正的有意义的轮子，也不枉卷一场。 场景CMS(content management system)一词呈现已久，通常指的是内容管理系统，是一种位于WEB前端和后端办公零碎或流程之间的软件系统。在开发cms后盾的过程中，最最罕用的应该就是Table了，例如 antd的table: 这应该是最最罕用的开发后盾管理系统中应用到的组件了，没有个Table，都不好意思说是个cms零碎。不过在略微宏大的业务中会存在一个十分常见的问题，就是一个数据源会有很多很多字段须要进行展现，如果都展现进去呢，就会存在一个十分不美观且乱哄哄的感觉，目迷五色。同时不同的人，心愿看到的字段也是不一样的，比方A同学心愿看到题目0、1、2、3，B同学心愿看到题目1、2、3、4，C同学心愿看到题目7、8、9、10等。 这样就是一个十分个性化的需要了，如果心愿后端同学来参加的话，就会减少后端同学的工作量，同时前端工作也不会相应的缩小。得益于浏览器的localstorage存储能力，前端就能够实现，基本不须要后端同学的参加。 实现首先，既然是antd的Table组件，咱们必定是要基于现有的性能去实现这个需要，所以咱们须要在Table组件的根底上套一层，既不能影响Table的展现，同时还可能定制展现列。那咱们就能够列一下需要了： 不影响Table的展现能够抉择自定义展现列能够对展现列进行排序不会对业务产生其余影响(这是最次要的)需要既然曾经明确，咱们就能够开整了，具体的实现，就不多说了，咱们能够看下实现后的成果： 打磨既然曾经实现了最后的需要，就能够居安思危了。怎么可能呢？想太多了吧！！！ 是的，起初产品说，当初数据展现列太多了，比之前多了三倍，想在对展现列进行抉择的时候进行一下分组，不然都挤在一块稀稀拉拉的不好找，重大影响工作效率了！ WTF！最见不得他人说影响工作效率了，这么重大的问题怎么当初才说，怎么不早点提需要过去呢？早点提过来必定早就实现了啊，不会存在影响工作效率的问题啊. 啊！！！我可真是个口不应心的渣男，可是我晓得，小蝌蚪才是渣男，我不配啊！！说多了都是泪啊，还是放松做需要吧。看下实现成果： 嗯，完满，就是这么个成果。对Table的封装进行了二次批改，在不影响之前的应用形式的根底上，减少了对分组的能力反对，我可真TM棒！ > 然而，高兴的时光总是那么短暂啊~~ 有一天，咱们的另外一个平台发现，咦，你这个性能还怪好用嘞，能不能给咱们也用用，好吧，最简略间接的形式是复制粘贴呀。复制粘贴到一半的时候，忽然又来了一个人也想用用这个性能，WTMD就很头大。 这么说来，还是封装成一个npm包吧，等我会，我给你们公布成一个组件包，你们间接装置应用即可。 npm i manage-table只管拿去用吧。 应用装置npm i manage-tableoryarn add manage-tablemanage-table组件有对应的peerDependencies，如果没有装置的话，须要手动装置一下对应的依赖： "peerDependencies": { "@ant-design/icons": "^4.6.4", "antd": "^4.12.0", "react": "^17.0.0", "react-beautiful-dnd": "^13.1.0"}应用形式-： 间接援用，应用内置设置代码如下： import ManageTable from "manage-table";import './App.css';import React from "react";function App() { const mockColumns = new Array(50).fill('').map((_item: string, index) => { return { dataIndex: 'title' + index, key: 'title' + index, title: '题目' + index, show: index % 3 === 0, }; }); mockColumns.push({ dataIndex: 'action', key: 'action', title: '操作', show: true, }); return ( <div className="App"> <ManageTable name="testTable" columns={mockColumns}/> </div> );}export default App;成果如下： ...

react源码解析15.scheduler&Lane视频解说（高效学习）：进入学习当咱们在相似上面的搜寻框组件进行搜寻时会发现，组件分为搜寻局部和搜寻后果展现列表，咱们冀望输入框能立即响应，后果列表能够有期待的工夫，如果后果列表数据量很大，在进行渲染的时候，咱们又输出了一些文字，因为用户输出事件的优先级是很高的，所以就要进行后果列表的渲染，这就引出了不同工作之间的优先级和调度 Scheduler咱们晓得如果咱们的利用占用较长的js执行工夫，比方超过了设施一帧的工夫，那么设施的绘制就会出不的景象。 Scheduler次要的性能是工夫切片和调度优先级，react在比照差别的时候会占用肯定的js执行工夫，Scheduler外部借助MessageChannel实现了在浏览器绘制之前指定一个工夫片，如果react在指定工夫内没比照完，Scheduler就会强制交出执行权给浏览器 工夫切片 在浏览器的一帧中js的执行工夫如下 requestIdleCallback是在浏览器重绘重排之后，如果还有闲暇就能够执行的机会，所以为了不影响重绘重排，能够在浏览器在requestIdleCallback中执行耗性能的计算，然而因为requestIdleCallback存在兼容和触发机会不稳固的问题，scheduler中采纳MessageChannel来实现requestIdleCallback，以后环境不反对MessageChannel就采纳setTimeout。 在之前的介绍中咱们晓得在performUnitOfWork之后会执行render阶段和commit阶段，如果在浏览器的一帧中，cup的计算还没实现，就会让出js执行权给浏览器，这个判断在workLoopConcurrent函数中，shouldYield就是用来判断残余的工夫有没有用尽。在源码中每个工夫片时5ms，这个值会依据设施的fps调整。 function workLoopConcurrent() { while (workInProgress !== null && !shouldYield()) { performUnitOfWork(workInProgress); }}function forceFrameRate(fps) {//计算工夫片 if (fps < 0 || fps > 125) { console['error']( 'forceFrameRate takes a positive int between 0 and 125, ' + 'forcing frame rates higher than 125 fps is not supported', ); return; } if (fps > 0) { yieldInterval = Math.floor(1000 / fps); } else { yieldInterval = 5;//工夫片默认5ms }}工作的暂停在shouldYield函数中有一段，所以能够晓得，如果以后工夫大于工作开始的工夫+yieldInterval，就打断了工作的进行。 ...

react源码解析14.手写hooks视频解说（高效学习）：进入学习最要害的是要了解hook队列和update队列的指针指向和updateQueue的更新计算，具体见视频解说 import React from "react";import ReactDOM from "react-dom";let workInProgressHook;//当前工作中的hooklet isMount = true;//是否时mount时const fiber = {//fiber节点 memoizedState: null,//hook链表 stateNode: App//dom};const Dispatcher = (() => {//Dispatcher对象 function mountWorkInProgressHook() {//mount时调用 const hook = {//构建hook queue: {//更新队列 pending: null//未执行的update队列 }, memoizedState: null,//以后state next: null//下一个hook }; if (!fiber.memoizedState) { fiber.memoizedState = hook;//第一个hook的话间接赋值给fiber.memoizedState } else { workInProgressHook.next = hook;//不是第一个的话就加在上一个hook的前面，造成链表 } workInProgressHook = hook;//记录当前工作的hook return workInProgressHook; } function updateWorkInProgressHook() {//update时调用 let curHook = workInProgressHook; workInProgressHook = workInProgressHook.next;//下一个hook return curHook; } function useState(initialState) { let hook; if (isMount) { hook = mountWorkInProgressHook(); hook.memoizedState = initialState;//初始状态 } else { hook = updateWorkInProgressHook(); } let baseState = hook.memoizedState;//初始状态 if (hook.queue.pending) { let firstUpdate = hook.queue.pending.next;//第一个update do { const action = firstUpdate.action; baseState = action(baseState); firstUpdate = firstUpdate.next;//循环update链表 } while (firstUpdate !== hook.queue.pending);//通过update的action计算state hook.queue.pending = null;//重置update链表 } hook.memoizedState = baseState;//赋值新的state return [baseState, dispatchAction.bind(null, hook.queue)];//useState的返回 } return { useState };})();function dispatchAction(queue, action) {//触发更新 const update = {//构建update action, next: null }; if (queue.pending === null) { update.next = update;//update的环状链表 } else { update.next = queue.pending.next;//新的update的next指向前一个update queue.pending.next = update;//前一个update的next指向新的update } queue.pending = update;//更新queue.pending isMount = false;//标记mount完结 workInProgressHook = fiber.memoizedState;//更新workInProgressHook schedule();//调度更新}function App() { let [count, setCount] = Dispatcher.useState(1); let [age, setAge] = Dispatcher.useState(10); return ( <> <p>Clicked {count} times</p> <button onClick={() => setCount(() => count + 1)}> Add count</button> <p>Age is {age}</p> <button onClick={() => setAge(() => age + 1)}> Add age</button> </> );}function schedule() { ReactDOM.render(<App />, document.querySelector("#root"));}schedule();

react源码解析18事件零碎视频解说（高效学习）：进入学习从一个bug说起上面这个demo_13在react17和react16中有什么不同吗？代码也很简略，模仿一个modal框，点击显示呈现，点击其余中央，相当于点击了mask，modal隐没，因为react事件都是委托到下层，所以须要在handleClick阻止冒泡，这样点击显示的时候不会触发document上的事件回调，导致modal无奈显示。然而在react16上发现这样做还是不行，须要调用e.nativeEvent.stopImmediatePropagation()能力实现，而react17上没什么影响 究其原因就是react16和17在委托事件的容器上做出了扭转，react16的事件会冒泡的document上，而17则会冒泡到root容器上，也就是ReactDom.render的第二个参数 export default class Demo13 extends React.Component { state = { show: false }; componentDidMount() { document.addEventListener("click", () => { this.setState({ show: false }); }); } handleClick = (e) => { e.stopPropagation();//react17中失效 // e.nativeEvent.stopImmediatePropagation(); //react16中失效 stopImmediatePropagation也阻止本级监听函数执行 this.setState({ show: true }); }; render() { return ( <div> <button onClick={this.handleClick}>显示</button> {this.state.show && <div onClick={(e) => e.nativeEvent.stopImmediatePropagation()}>modal</div>} </div> ); }}大家也能够看下demo_11、demo_12在react16、17触发程序有何差别，同时demo我的项目中的event.html也模仿了react16、17的事件代理机制 事件零碎架构图 咱们以SimpleEvent为例看事件注册、绑定和触发的过程，看视频的调试过程 事件注册DOMPluginEventSystem.js会调用SimpleEventPlugin插件的registerEvents办法注册事件 //DOMPluginEventSystem.jsSimpleEventPlugin.registerEvents();registerSimpleEvents function registerSimpleEvents() { registerSimplePluginEventsAndSetTheirPriorities(discreteEventPairsForSimpleEventPlugin, DiscreteEvent); //...}function registerSimplePluginEventsAndSetTheirPriorities(eventTypes, priority) { for (var i = 0; i < eventTypes.length; i += 2) { var topEvent = eventTypes[i]; var event = eventTypes[i + 1]; var capitalizedEvent = event[0].toUpperCase() + event.slice(1); var reactName = 'on' + capitalizedEvent; eventPriorities.set(topEvent, priority); topLevelEventsToReactNames.set(topEvent, reactName); registerTwoPhaseEvent(reactName, [topEvent]);//注册捕捉和冒泡两个阶段的事件 }}registerTwoPhaseEvent ...

react源码解析17.context视频解说（高效学习）：进入学习查看视频调试demo_7context流程图 cursor/valueStackreact源码中存在一个valueStack和valueCursor用来记录context的历史信息和以后context，另外还有一个didPerformWorkStackCursor用来示意以后的context有没有变动 //ReactFiberNewContext.new.jsconst valueCursor: StackCursor<mixed> = createCursor(null);const didPerformWorkStackCursor: StackCursor<boolean> = createCursor(false);//ReactFiberStack.new.jsconst valueStack: Array<any> = [];function pushProvider(providerFiber, nextValue) { var context = providerFiber.type._context; { push(valueCursor, context._currentValue, providerFiber); context._currentValue = nextValue; }}function popProvider(providerFiber) { var currentValue = valueCursor.current; pop(valueCursor, providerFiber); var context = providerFiber.type._context; { context._currentValue = currentValue; }}在render阶段调用updateContextProvider的时候会执行pushProvider，将新的值push进valueStack中在commit阶段调用completeWork的时候会执行popProvider，将栈顶context pop进去，为什么会有这样一个机制呢，因为咱们的context是跨层级的，在之前讲到render阶段和commit阶段的时候，咱们会以深度优先遍历的形式遍历节点，如果波及跨层级读取状态就有点力不从心了，就须要一层一层往下传递咱们的props，所以咱们能够用一个stack记录咱们的context，在render阶段pushProvider，在commit阶段popProvider，在每个具体的层级能依据valueCursor取以后value createContextexport function createContext<T>( defaultValue: T, calculateChangedBits: ?(a: T, b: T) => number,): ReactContext<T> { if (calculateChangedBits === undefined) {//能够传入计算bit的函数 calculateChangedBits = null; } else { //... } const context: ReactContext<T> = { $$typeof: REACT_CONTEXT_TYPE, _calculateChangedBits: calculateChangedBits,//计算value变动的函数 _currentValue: defaultValue,//dom环境的value _currentValue2: defaultValue,//art环境的value _threadCount: 0, Provider: (null: any), Consumer: (null: any), }; context.Provider = { $$typeof: REACT_PROVIDER_TYPE, _context: context, }; if (__DEV__) { } else { context.Consumer = context; } return context;}//示例const NameChangedBits = 0b01;const AgeChangedBits = 0b10;const AppContext = createContext({}, (prevValue, nextValue) => { let result = 0; if (prevValue.name !== nextValue.name) { result |= NameChangedBits; }; if (prevValue.age !== nextValue.age) { result |= AgeChangedBits; }; return result;});在简化之后的createContext中能够看到，context和Provider、Consumer的关系是这样的： ...

react源码解析10.commit阶段在render阶段的开端会调用commitRoot(root);进入commit阶段，这里的root指的就是fiberRoot，而后会遍历render阶段生成的effectList，effectList上的Fiber节点保留着对应的props变动。之后会遍历effectList进行对应的dom操作和生命周期、hooks回调或销毁函数，各个函数做的事件如下 在commitRoot函数中其实是调度了commitRootImpl函数 //ReactFiberWorkLoop.old.jsfunction commitRoot(root) { var renderPriorityLevel = getCurrentPriorityLevel(); runWithPriority$1(ImmediatePriority$1, commitRootImpl.bind(null, root, renderPriorityLevel)); return null;}在commitRootImpl的函数中次要分三个局部： commit阶段前置工作 调用flushPassiveEffects执行完所有effect的工作初始化相干变量赋值firstEffect给前面遍历effectList用 //ReactFiberWorkLoop.old.jsdo { // 调用flushPassiveEffects执行完所有effect的工作 flushPassiveEffects(); } while (rootWithPendingPassiveEffects !== null); //... // 重置变量 finishedWork指rooFiber root.finishedWork = null; //重置优先级 root.finishedLanes = NoLanes; // Scheduler回调函数重置 root.callbackNode = null; root.callbackId = NoLanes; // 重置全局变量 if (root === workInProgressRoot) { workInProgressRoot = null; workInProgress = null; workInProgressRootRenderLanes = NoLanes; } else { } //rootFiber可能会有新的副作用 将它也退出到effectLis let firstEffect; if (finishedWork.effectTag > PerformedWork) { if (finishedWork.lastEffect !== null) { finishedWork.lastEffect.nextEffect = finishedWork; firstEffect = finishedWork.firstEffect; } else { firstEffect = finishedWork; } } else { firstEffect = finishedWork.firstEffect; }mutation阶段 ...

react源码解析11.生命周期调用程序各阶段生命周期执行状况函数组件hooks的周期会在hooks章节解说，这一章的使命周期次要针对类组件，各阶段生命周期执行状况看下图： render阶段： mount时：组件首先会经验constructor、getDerivedStateFromProps、componnetWillMount、renderupdate时：组件首先会经验componentWillReceiveProps、getDerivedStateFromProps、shouldComponentUpdate、rendererror时：会调用getDerivedStateFromErrorcommit阶段 mount时：组件会经验componnetDidMountupdate时：组件会调用getSnapshotBeforeUpdate、componnetDidUpdateunMount时：调用componnetWillUnmounterror时：调用componnetDidCatch其中红色的局部不倡议应用，须要留神的是commit阶段生命周期在mutation各个子阶段的执行程序，能够温习上一章 接下来依据一个例子来解说在mount时和update时更新的具体程序： mount时：首先会依照深度优先的形式，顺次构建wip Fiber节点而后切换成current Fiber，在render阶段会顺次执行各个节点的constructor、getDerivedStateFromProps/componnetWillMount、render，在commit阶段，也就是深度优先遍历向上冒泡的时候顺次执行节点的componnetDidMountupdate时：同样会深度优先构建wip Fiber树，在构建的过程中会diff子节点，在render阶段，如果返现有节点的变动，例如上图的c2，那就标记这个节点Update Flag，而后执行getDerivedStateFromProps和render，在commit阶段会顺次执行节点的getSnapshotBeforeUpdate、componnetDidUpdate视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo

react源码解析20.总结&面试题解答视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 总结至此咱们介绍了react的理念，如果解决cpu和io的瓶颈，要害是实现异步可中断的更新 咱们介绍了react源码架构（ui=fn(state)），从scheduler开始调度（依据过期事件判断优先级），通过render阶段的深度优先遍历造成effectList（两头会执行reconcile|diff），交给commit解决实在节点（两头交叉生命周期和局部hooks），而这些调度的过程都离不开Fiber的撑持，Fiber是工作单元，也是节点优先级、更新UpdateQueue、节点信息的载体，Fiber双缓存则提供了比照前后节点更新的根底。咱们还介绍了jsx是React.createElement的语法糖。Lane模型则提供了更细粒度的优先级比照和计算，这所有都为concurrent mode提供了根底，在这之上变能够实现Suspense和batchedUpdate（16、17版本实现的逻辑不一样），18章context的valueStack和valueCursor在整个架构中运行机制，19章介绍了新版事件零碎，包含事件生产、监听和触发 面试题简答（详见视频源码角度解说）jsx和Fiber有什么关系 答：mount时通过jsx对象（调用createElement的后果）调用createFiberFromElement生成Fiberupdate时通过reconcileChildFibers或reconcileChildrenArray比照新jsx和老的Fiber（current Fiber）生成新的wip Fiber树 react17之前jsx文件为什么要申明import React from 'react'，之后为什么不须要了 答：jsx通过编译之后编程React.createElement，不引入React就会报错，react17扭转了编译形式，变成了jsx.createElement function App() { return <h1>Hello World</h1>;}//转换后import {jsx as _jsx} from 'react/jsx-runtime';function App() { return _jsx('h1', { children: 'Hello world' });}Fiber是什么，它为什么能进步性能 答：Fiber是一个js对象，能承载节点信息、优先级、updateQueue，同时它还是一个工作单元。 Fiber双缓存能够在构建好wip Fiber树之后切换成current Fiber，内存中间接一次性切换，进步了性能Fiber的存在使异步可中断的更新成为了可能，作为工作单元，能够在工夫片内执行工作，没工夫了交还执行权给浏览器，下次工夫片继续执行之前暂停之后返回的FiberFiber能够在reconcile的时候进行相应的diff更新，让最初的更新利用在实在节点上hooks 为什么hooks不能写在条件判断中 答：hook会按顺序存储在链表中，如果写在条件判断中，就没法放弃链表的程序 状态/生命周期 setState是同步的还是异步的 答：legacy模式下：命中batchedUpdates时是异步 未命中batchedUpdates时是同步的 concurrent模式下：都是异步的 componentWillMount、componentWillMount、componentWillUpdate为什么标记UNSAFE 答：新的Fiber架构能在scheduler的调度下实现暂停持续，排列优先级，Lane模型能使Fiber节点具备优先级，在高优先级的工作打断低优先级的工作时，低优先级的更新可能会被跳过，所有以上生命周期可能会被执行屡次，和之前版本的行为不统一。 组件 react元素$$typeof属性什么 答：用来示意元素的类型，是一个symbol类型 ...

react源码解析19.手写迷你版react视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 迷你react和真正的源码有哪些区别呢在render阶段咱们遍历了整颗Fiber树，在源码中如果节点什么都没扭转会命中优化的逻辑，而后跳过这个节点的遍历commit咱们也遍历了整颗Fiber树，源码中只遍历带有effect的Fiber节点，也就是遍历effectList每次遍历的时候咱们都是新建节点，源码中某些条件会复用节点没有用到优先级第一步：渲染器和入口函数 const React = { createElement, render,};const container = document.getElementById("root");const updateValue = (e) => { rerender(e.target.value);};const rerender = (value) => { const element = ( <div> <input onInput={updateValue} value={value} /> <h2>Hello {value}</h2> </div> ); React.render(element, container);};rerender("World");第二步：创立dom节点函数 /创立elementfunction createElement(type, props, ...children) { return { type, props: { ...props, children: children.map((child) => (typeof child === "object" ? child : createTextElement(child))), }, };}//创立text类型function createTextElement(text) { return { type: "TEXT_ELEMENT", props: { nodeValue: text, children: [], }, };}//创立domfunction createDom(fiber) { const dom = fiber.type === "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(fiber.type); updateDom(dom, {}, fiber.props); return dom;}第三步：更新节点函数 ...

如何在react我的项目中应用老手疏导性能呢?在网上发现了几种插件，都挺不错的，最终还是抉择了 intro.js ，上面介绍一下这个插件的具体用法官网地址：https://introjs.com/ npm装置npm install intro.js --save在我的项目中引入能够在你的根目录中引入css款式 import "intro.js/introjs.css";在组件中引入intro.js import IntroJs from "intro.js"最简略的用法 import React from 'react' import IntroJs from 'intro.js' import { Card, Tooltip, Button } from 'antd'; class IntroPage extends React.Component { startIntro = () => { // 获取蕴含疏导元素的父容器, 并组成IntroJs var intro1 = IntroJs(document.getElementById('root')) intro1.setOptions({ prevLabel: "上一步", nextLabel: "下一步", skipLabel: "跳过", doneLabel: "完结", }).oncomplete(function () { //点击跳过按钮后执行的事件 }).onexit(function () { //点击完结按钮后， 执行的事件 }).start(); } // render // 要害是data-step 和 data-intro render() { return ( <div id='root'> <Card bordered={true} style={{ width: '100%' }} data-step="1" data-intro='开始疏导!'> <Button onClick={() => this.startIntro()}>开始疏导</Button> </Card> </div> ); } } export default IntroPageAPIIntroJs Props ...

ps:滑动条款式间接搬运的下方 https://www.chaos.com/blog/ho... 组件实现局部重点: visibility: "hidden"一份左半的图片兜底占位，左右两半图片都相对定位。配置滑动条的鼠标下按、抬起事件，并在鼠标下按时监听mousemove事件。为了实现“即便鼠标挪动到滚动条、浏览器外、浏览器内的f12控制台处松开”也能勾销鼠标拖拽————事件监听间接配在了document上，而不是document.body。图片缩放的时候，按比例变动鼠标程度挪动量moveX，实现绝对静止滑动条地位。为了能拿到正确的鼠标挪动值，“上一次鼠标x地位”cursorX没有存成state，仅仅是一个一般的全局变量。源码.tsx import React, { useState, useEffect } from "react";import "./styles.less";export default function App() { return ( <div className="container"> 测试拖拽组件 <SwiperWindow leftSrc="//z3.ax1x.com/2021/09/24/407zfs.jpg" rightSrc="//s4.ax1x.com/2021/12/29/T62gcF.jpg" /> </div> );}const SwiperWindow = ({ leftSrc = "", rightSrc = "" }) => { let cursorX = 0; const [boxState, setBoxState] = useState({ boxW: 0, boxH: 0 }); const [sliderW, setSliderW] = useState(40); // 滑动条的宽度 const INITLEFT = -(sliderW / 2); const [sliderLeft, setSliderLeft] = useState(INITLEFT); const [sliderMax, setSliderMax] = useState(0); const [moveX, setMoveX] = useState(0); const [scale, setScale] = useState(1); useEffect(() => { setSliderW(document.querySelector(".slider")?.clientWidth || 40); setSize(true); return () => { document.removeEventListener("mousemove", onMouseMove); document.removeEventListener("mouseup", onMouseUp); }; }, []); useEffect(() => { if (boxState.boxW) { setSize(false); } }, [document.querySelector(".scanBox")?.clientWidth, boxState.boxW]); const setSize = (init: boolean = false) => { let new_boxW = document.querySelector(".scanBox")?.clientWidth; let new_boxH = document.querySelector(".scanBox")?.clientHeight; const Half = sliderW / 2; if (new_boxW) { const new_sliderMax = new_boxW - Half; setSliderMax(new_sliderMax); if (init) { setSliderLeft(INITLEFT + new_boxW / 2); setMoveX(new_boxW / 2); setScale(new_boxW / 2 / new_boxW); } else if (moveX) { let new_sliderLeft = INITLEFT + new_boxW * scale; const Half = sliderW / 2; const MIN = -Half; const MAX = new_sliderMax; if (new_sliderLeft <= MIN) { new_sliderLeft = MIN; } if (new_sliderLeft >= MAX) { new_sliderLeft = MAX; } setSliderLeft(new_sliderLeft); } setBoxState( Object.assign({ boxW: new_boxW, boxH: new_boxH }) ); } }; const onMouseDown = (e: any) => { let new_cursorX = e.clientX; cursorX = new_cursorX; document.addEventListener("mousemove", onMouseMove); document.addEventListener("mouseup", onMouseUp); }; const onMouseMove = (e: any) => { // 鼠标挪动间隔 let moveX = e.clientX - cursorX; setMoveX(moveX); let new_sliderLeft = sliderLeft + moveX; setScale((new_sliderLeft - INITLEFT) / boxState.boxW); const Half = sliderW / 2; const MIN = -Half; const MAX = sliderMax; if (new_sliderLeft <= MIN) { new_sliderLeft = MIN; } if (new_sliderLeft >= MAX) { new_sliderLeft = MAX; } setSliderLeft(new_sliderLeft); }; // 当鼠标弹起触发事件 const onMouseUp = (e: any) => { cursorX = e.clientX; document.removeEventListener("mousemove", onMouseMove); document.removeEventListener("mouseup", onMouseUp); }; const { boxW, boxH } = boxState; return ( <div className="scanBox noSelect"> <div className="left noSelect" style={{ width: sliderLeft + sliderW / 2 }} > <img alt="after" src={leftSrc} className="leftPic" style={{ width: boxW, height: "auto" }} /> </div> {/* 滑动条 */} <div onMouseDown={(e) => onMouseDown(e)} onMouseUp={(e) => onMouseUp(e)} className="slider" style={{ left: sliderLeft }} > <div className="line-top"></div> <div className="round"> <div className="arrow-left"></div> <div className="arrow-right"></div> </div> <div className="line-bottom"></div> </div> <div className="right noSelect"> <img alt="before" src={rightSrc} className="rightPic" style={{ height: "auto" }} /> </div> <img alt="after" src={leftSrc} className="leftPic" style={{ width: boxW, height: "auto", visibility: "hidden" }} /> </div> );};.less ...

React17 零碎精讲 联合TS打造游览电商平台这个 MySQL bug 让我大开眼界！ 这周收到一个 sentry 报警，如下 SQL 查问超时了。 select * from order_info where uid = 5837661 order by id asc limit 1复制代码执行show create table order_info 发现这个表其实是有加索引的 CREATE TABLE order_info (id bigint(20) unsigned NOT NULL AUTO_INCREMENT,uid int(11) unsigned,order_status tinyint(3) DEFAULT NULL, ... 省略其它字段和索引 PRIMARY KEY (id), KEY idx_uid_stat (uid,order_status),) ENGINE=InnoDB DEFAULT CHARSET=utf8复制代码实践上执行上述 SQL 会命中 idx_uid_stat 这个索引，但实际执行 explain 查看 explain select * from order_info where uid = 5837661 order by id asc limit 1复制代码可能看到它的 possible_keys（此 SQL 可能涉及到的索引） 是 idx_uid_stat，但实际上（key）用的却是全表扫描download ...

React-router v6 版本记录前言：router从v5 -> v6的变更，导致介绍v5版本的文章对于v6简直没用；因为我在海量的水文中极难找到一篇兼具实时性、有效性的文章；于是本人想写一些react-router的应用记录，把本人见到的、用到的记录下来；正如题目所示，仅仅是集体记录，及供参考，如果有补充或者谬误，欢送斧正。标注：我没有用过v5版本，react也是刚学组件BrowserRouter、HashRouter前者是history模式，即导航栏中没有#，后者是hash模式，； 路由的根组件，提供路由上下文，通常放在我的项目的入口文件，作为外层的组件。二者的属性定义相似 interface BrowserRouterProps / HashRouterProps { basename?: string; // 即最根底的根门路，通常就是'/' children?: React.ReactNode; window?: Window;}Link路由跳转组件，应用useNavigate代替v5的useHistory；v5版本的useHistory会返回一个对象，对象具备操作浏览历史的一些属性，例如push 属性定义：interface LinkProps { reloadDocument?: boolean; replace?: boolean; state?: any; to: To;}例子：import React from 'react'import { Link } from "react-router-dom"import { useNavigate } from "react-router-dom";export default function Menu() { const history = useNavigate() const handleJump = () => { history('student') } return ( <div className='menu'> <li> {/* <Link to={'/student'}>学生列表</Link> */} <a onClick={handleJump} style={{ cursor: 'pointer' }}>学生列表</a> </li> <li> <Link to={'/student/add'}>增加学生</Link> </li> </div> )}useNavigate ...

前言Vite 进去好一段时间了，最开始反对 Vue，而当初曾经不受框架限度了。而 Vite 解决的是对于我的项目每次启动与打包构建等待时间长的问题，Vite 就是解决了该问题，进步开发效率与体验，本文作个简略的学习记录。 初始化通过 Vite 官网命令行选项间接指定项目名称和想要应用的模板。例如，要构建一个 Vite + TypeScript 我的项目 # npm 6.xnpm init @vitejs/app vite-react-ts-antd-starter --template react-ts# npm 7+, 须要额定的双横线：npm init @vitejs/app vite-react-ts-antd-starter -- --template react-ts创立完装置依赖后，运行我的项目如图： 配置路由npm i react-router-dom@5.3.0因为v6目前试用ts提醒等有一些问题，防止解说简单还是间接简略点用v5版本，用法不变。 首先新建三个页面文件，在 src/pages文件夹下新建三个页面 // homeconst Home = () => { return <div>home page</div>}export default Home// aboutconst About = () => { return <div>about page</div>}export default About// not foundconst NotFound = () => { return <div>404 page</div>}export default NotFound在 src/config目录下新建文件 routes.ts ...

clipboard.js git 地址 先装置yarn add clipboard demo如下 import React, { useRef, useEffect, useState } from 'react';import ClipboardJS from 'clipboard';const Demo : React.FC<any> = () => { const copyBtnRef = useRef<any>(null) const [text, setText] = useState('https://segmentfault.com/u/yolo_y') let clipboard: any useEffect(() => { if(copyBtnRef.current) { clipboard = new ClipboardJS(copyBtnRef.current,{ text: () => text }); clipboard.on('success', function(e:any) { console.log('copy success') }) } return () => clipboard?.destroy && clipboard.destroy(); }, [copyBtnRef, text]); return <> <div>{text}</div> <div ref={copyBtnRef}>copy</div> <div onClick={() => {setText('https://segmentfault.com/a/1190000015303823')}}>change Text</div> </>}还有js原生版本的实现 援用自 原文链接：https://blog.csdn.net/weixin_... ...

MobX 用于状态治理，简略高效。本文将于 React 上介绍如何开始，包含了： 理解 MobX 概念从零筹备 React 利用MobX React.FC 写法MobX React.Component 写法能够在线体验： https://ikuokuo.github.io/sta... ，代码见： https://github.com/ikuokuo/st... 。 概念首先，ui 是由 state 通过 fn 生成： ui = fn(state)在 React 里， fn 即组件，按照本人的 state 渲染。 如果 state 是共享的，一处状态更新，多处组件响应呢？这时就能够用 MobX 了。 MobX 数据流向如下： ui ↙ ↖action → stateui 触发 action，更新 state，重绘 ui。留神是单向的。 理解更多，请浏览 MobX 宗旨 。这里讲下实现时的次要步骤： 定义数据存储类 Data Store 成员属性为 state，成员函数为 action用 mobx 标记为 observable定义 Stores Provider 形式一 React.Context：createContext 包装 Store 实例，ui useContext 应用形式二 mobx-react.Provider：间接包装 Store 实例，提供给 Provider，ui inject 应用实现 ui 组件 ...

前言该系列文章并非零根底入门，所以在咱们一起开始之前，须要您补充一些技术常识的储备。当然，我也会为想要入门的同学升高一些门槛。所以本文旨在介绍和对照一下，须要哪些前置的技术储备。 根底筹备一台可能晦涩拜访网络的电脑可能拜访 Github 开源我的项目。我的 Github 主页是： https://github.com/willin/ 国内的话，后续会同步在码云上： https://gitee.com/willin （但因为手动同步，可能会忘记。） 局部的演示示例会依据我的项目的大小，别离放在 Codepen、CodeSandbox 或者 StackBlitz 上。 肯定的英语浏览能力因为很大一部分的文档是由英文编写的，并且国际化翻译的过程会比拟滞后。 当然，折中一下，有一个很好的翻译软件也是有肯定帮忙的。但语言是一种工具，可能不便的表白和传递思维，即使是编程语言也是这样，所以倡议千万不要把语言能力的根底落下。 一些前端的根底比方可能装置和应用 Node.js、Typescript。以及对 React 或者 Vue 有肯定的根底入门。也可能逾越阻碍去装置一些依赖包。 比如说应用镜像装置： npm install --save v0 --registry=https://registry.npmmirror.com# 或者应用 yarnyarn add v0 --registry=https://registry.npmmirror.com国内镜像应用能够参考： https://npmmirror.com/ 后续的文章中，不会过多论述语法根底、环境依赖之类的问题。 当然，如果有后端的一些常识储备，那就更好了。比方关系型数据库（MySQL）、缓存（Redis）等。 布局构想从 02 年开始，前前后后搭建过了好多个集体网站。从 Z-Blog、Wordpress、Emlog、Typecho、Jekyll、Hexo 等。 也能够看到，我当初的集体网站 https://willin.wang 是齐全动态化的（基于 Nuxt.js / Vue 2）。 晚期的时候，我都是用服务器搭建动静网站。那时候服务器老本并不高（也次要是因为我的配置需要并不高）。动静网站更灵便，但服务器、数据库都是要免费的。尽管也有便宜的服务器，然而配置低，超卖景象重大，拜访体验挺差的。如果经济条件容许，还是能够整一台服务器折腾折腾试试的，对于学习成长还是很有帮忙的（本人在本地搭建服务器环境也是一样的学习效果，成就感会低一些）。就是收益不太高（个别只有投入，没有支出）。 起初随着工作后生存的累赘（当然也有一部分域名投资失败的前事不忘;后事之师），不再把余钱投入到服务器上。所以用过一些动态的站点生成器，也本人写过一些，总体感觉……就是顺当，像是被压在了五指山下，空有洪荒之力却无处可用。因为不够灵便，很多事件做不了。比方评论零碎、文章访问量统计展现之类的。 目前的布局是这样： 框架选用 Remix （基于 React 的全栈框架）部署在 Cloudflare Pages 寰球 CDN 减速 并且还提供了 KV 缓存（这样就省下了 Redis 缓存的开销）数据库应用 PlanetScale 云端 MySQL 服务 ...

react源码解析13.hooks源码视频解说（高效学习）：进入学习hook调用入口 在hook源码中hook存在于Dispatcher中，Dispatcher就是一个对象，不同hook 调用的函数不一样，全局变量ReactCurrentDispatcher.current会依据是mount还是update赋值为HooksDispatcherOnMount或HooksDispatcherOnUpdate ReactCurrentDispatcher.current = current === null || current.memoizedState === null//mount or update ? HooksDispatcherOnMount : HooksDispatcherOnUpdate; const HooksDispatcherOnMount: Dispatcher = {//mount时 useCallback: mountCallback, useContext: readContext, useEffect: mountEffect, useImperativeHandle: mountImperativeHandle, useLayoutEffect: mountLayoutEffect, useMemo: mountMemo, useReducer: mountReducer, useRef: mountRef, useState: mountState, //...};const HooksDispatcherOnUpdate: Dispatcher = {//update时 useCallback: updateCallback, useContext: readContext, useEffect: updateEffect, useImperativeHandle: updateImperativeHandle, useLayoutEffect: updateLayoutEffect, useMemo: updateMemo, useReducer: updateReducer, useRef: updateRef, useState: updateState, //...};hook数据结构 在FunctionComponent中，多个hook会造成hook链表，保留在Fiber的memoizedState的上，而须要更新的Update保留在hook.queue.pending中 const hook: Hook = { memoizedState: null,//对于不同hook，有不同的值 baseState: null,//初始state baseQueue: null,//初始queue队列 queue: null,//须要更新的update next: null,//下一个hook};上面来看下memoizedState对应的值 ...

react源码解析12.状态更新流程视频解说（高效学习）：进入学习setState&forceUpdate在react中触发状态更新的几种形式： ReactDOM.renderthis.setStatethis.forceUpdateuseStateuseReducer咱们重点看下重点看下this.setState和this.forceUpdate，hook在第13章讲 this.setState内调用this.updater.enqueueSetState，次要是将update退出updateQueue中 //ReactBaseClasses.jsComponent.prototype.setState = function (partialState, callback) { if (!(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null)) { { throw Error( "setState(...): takes an object of state variables to update or a function which returns an object of state variables." ); } } this.updater.enqueueSetState(this, partialState, callback, 'setState');};//ReactFiberClassComponent.old.jsenqueueSetState(inst, payload, callback) { const fiber = getInstance(inst);//fiber实例 const eventTime = requestEventTime(); const suspenseConfig = requestCurrentSuspenseConfig(); const lane = requestUpdateLane(fiber, suspenseConfig);//优先级 const update = createUpdate(eventTime, lane, suspenseConfig);//创立update update.payload = payload; if (callback !== undefined && callback !== null) { //赋值回调 update.callback = callback; } enqueueUpdate(fiber, update);//update退出updateQueue scheduleUpdateOnFiber(fiber, lane, eventTime);//调度update}enqueueUpdate用来将update退出updateQueue队列 ...

react源码解析16.concurrent模式视频解说（高效学习）：进入学习concurrent modereact17反对concurrent mode，这种模式的基本目标是为了让利用放弃cpu和io的疾速响应，它是一组新性能，包含Fiber、Scheduler、Lane，能够依据用户硬件性能和网络情况调整利用的响应速度，外围就是为了实现异步可中断的更新。concurrent mode也是将来react次要迭代的方向。 cup：让耗时的reconcile的过程能让出js的执行权给更高优先级的工作，例如用户的输出，io：依附SuspenseFiberFiber咱们之前介绍过，这里咱们来看下在concurrent mode下Fiber的意义，react15之前的reconcile是同步执行的，当组件数量很多，reconcile时的计算量很大时，就会呈现页面的卡顿，为了解决这个问题就须要一套异步可中断的更新来让耗时的计算让出js的执行权给高优先级的工作，在浏览器有闲暇的时候再执行这些计算。所以咱们须要一种数据结构来形容实在dom和更新的信息，在适当的时候能够在内存中中断reconcile的过程，这种数据结构就是Fiber。 SchedulerScheduler独立于react自身，相当于一个独自的package，Scheduler的意义在于，当cup的计算量很大时，咱们依据设施的fps算出一帧的工夫，在这个工夫内执行cup的操作，当工作执行的工夫快超过一帧的工夫时，会暂停工作的执行，让浏览器有工夫进行重排和重绘。在适当的时候持续工作。 在js中咱们晓得generator也能够暂停和持续工作，然而咱们还须要用优先级来排列工作，这个是generator无奈实现的。在Scheduler中应用MessageChannel实现了工夫切片，而后用小顶堆排列工作优先级的高下，达到了异步可中断的更新。 Scheduler能够用过期工夫来代表优先级的高下。 优先级越高，过期工夫越短，离以后工夫越近，也就是说过一会就要执行它了。 优先级越低，过期工夫越长，离以后工夫越长，也就是过很久了能力轮到它执行。 laneLane用二进制位示意工作的优先级，不便优先级的计算，不同优先级占用不同地位的‘赛道’，而且存在批的概念，优先级越低，‘赛道’越多。高优先级打断低优先级，新建的工作须要赋予什么优先级等问题都是Lane所要解决的问题。 batchedUpdates简略来说，在一个上下文中同时触发屡次更新，这些更新会合并成一次更新，例如 onClick() { this.setState({ count: this.state.count + 1 }); this.setState({ count: this.state.count + 1 });} 在之前的react版本中如果脱离以后的上下文就不会被合并，例如把屡次更新放在setTimeout中，起因是处于同一个context的屡次setState的executionContext都会蕴含BatchedContext，蕴含BatchedContext的setState会合并，当executionContext等于NoContext，就会同步执行SyncCallbackQueue中的工作，所以setTimeout中的屡次setState不会合并，而且会同步执行。 onClick() { setTimeout(() => { this.setState({ count: this.state.count + 1 }); this.setState({ count: this.state.count + 1 }); });}export function batchedUpdates<A, R>(fn: A => R, a: A): R { const prevExecutionContext = executionContext; executionContext |= BatchedContext; try { return fn(a); } finally { executionContext = prevExecutionContext; if (executionContext === NoContext) { resetRenderTimer(); //executionContext为NoContext就同步执行SyncCallbackQueue中的工作 flushSyncCallbackQueue(); } }} 在Concurrent mode下，下面的例子也会合并为一次更新，根本原因在如下一段简化的源码，如果屡次setState，会比拟这几次setState回调的优先级，如果优先级统一，则先return掉，不会进行前面的render阶段 ...

react源码解析15.scheduler&Lane视频解说（高效学习）：进入学习当咱们在相似上面的搜寻框组件进行搜寻时会发现，组件分为搜寻局部和搜寻后果展现列表，咱们冀望输入框能立即响应，后果列表能够有期待的工夫，如果后果列表数据量很大，在进行渲染的时候，咱们又输出了一些文字，因为用户输出事件的优先级是很高的，所以就要进行后果列表的渲染，这就引出了不同工作之间的优先级和调度 Scheduler咱们晓得如果咱们的利用占用较长的js执行工夫，比方超过了设施一帧的工夫，那么设施的绘制就会出不的景象。 Scheduler次要的性能是工夫切片和调度优先级，react在比照差别的时候会占用肯定的js执行工夫，Scheduler外部借助MessageChannel实现了在浏览器绘制之前指定一个工夫片，如果react在指定工夫内没比照完，Scheduler就会强制交出执行权给浏览器 工夫切片 在浏览器的一帧中js的执行工夫如下 requestIdleCallback是在浏览器重绘重排之后，如果还有闲暇就能够执行的机会，所以为了不影响重绘重排，能够在浏览器在requestIdleCallback中执行耗性能的计算，然而因为requestIdleCallback存在兼容和触发机会不稳固的问题，scheduler中采纳MessageChannel来实现requestIdleCallback，以后环境不反对MessageChannel就采纳setTimeout。 在之前的介绍中咱们晓得在performUnitOfWork之后会执行render阶段和commit阶段，如果在浏览器的一帧中，cup的计算还没实现，就会让出js执行权给浏览器，这个判断在workLoopConcurrent函数中，shouldYield就是用来判断残余的工夫有没有用尽。在源码中每个工夫片时5ms，这个值会依据设施的fps调整。 function workLoopConcurrent() { while (workInProgress !== null && !shouldYield()) { performUnitOfWork(workInProgress); }}function forceFrameRate(fps) {//计算工夫片 if (fps < 0 || fps > 125) { console['error']( 'forceFrameRate takes a positive int between 0 and 125, ' + 'forcing frame rates higher than 125 fps is not supported', ); return; } if (fps > 0) { yieldInterval = Math.floor(1000 / fps); } else { yieldInterval = 5;//工夫片默认5ms }}工作的暂停在shouldYield函数中有一段，所以能够晓得，如果以后工夫大于工作开始的工夫+yieldInterval，就打断了工作的进行。 ...

介绍父组件通过 Refs 援用子组件，在不同状况下的用法。原文地址：React 父组件如何调用子组件办法

前言尝试在react应用postcss-px-to-viewport自适应布局，全网找遍了，基本上都要react-scripts eject去批改webpack.config.js,或者装一大堆依赖……，最初发现还不行。 这里默认你曾经配置好craco，并且曾经存在craco.config.js，react脚手架默认的postcss曾经是8.x版本了，我这里装置了"postcss": "^7.0.36",8.x版本能够看issues，有人魔改了，npm下面的postcss-px-to-viewport和github下面的版本不统一，能够装置他人打包好的postcss-px-to-viewport-with-include，本文已7.x为例。\发现问题，肯定要去看issues，说不定有奇效。 注释craco.config.js下的style引入require('postcss-px-to-viewport-with-include')并填写配置。 style: { postcss: { plugins: [ require('tailwindcss'), require('autoprefixer')(overrideBrowserslist=['last 20 versions', 'android >= 4.0', 'iOS >= 7']), require('postcss-px-to-viewport-with-include')( { unitToConvert: 'px', // 要转化的单位 viewportWidth: 375, // UI设计稿的宽度 viewportHeight: 667, // UI unitPrecision: 6, // 转换后的精度，即小数点位数 // propList: 当有些属性的单位咱们不心愿转换的时候，能够增加在数组前面，并在后面加上!号，如propList: ["*","!letter-spacing"],这示意：所有css属性的属性的单位都进行转化，除了letter-spacing的 propList: ['*'], // 指定转换的css属性的单位，*代表全副css属性的单位都进行转换 viewportUnit: 'vw', // 指定须要转换成的视窗单位，默认vw fontViewportUnit: 'vw', // 指定字体须要转换成的视窗单位，默认vw // 转换的黑名单，在黑名单外面的咱们能够写入字符串，只有类名蕴含有这个字符串，就不会被匹配。比方selectorBlackList: ['wrap'],它示意形如wrap,my-wrap,wrapper这样的类名的单位，都不会被转换 selectorBlackList: ['ignore'], // 指定不转换为视窗单位的类名， minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换 mediaQuery: true, // 是否在媒体查问的css代码中也进行转换，默认false replace: true, // 是否转换后间接更换属性值 exclude: [/node_modules/], // 设置疏忽文件，用正则做目录名匹配 // include: [/node_modules/], landscape: false, // 是否解决横屏状况 }), ], }, }, ...

用户体验是古代Web应用程序中的次要问题之一。设计师将各种成果增加到Web应用程序的UI设计中，以吸引更多的用户。作为开发人员，咱们必须足够熟练地交付他们冀望的产品。 然而，有时候，技能并不是咱们惟一须要的。咱们还应该意识到咱们能够应用的工具和库。在本文中，我将分享5个可用于向你的React我的项目增加动画的库。 1、Remotion Remotion，它是2021年初引入的一个令人兴奋的库，你能够应用它创立动画和视频。以下是其一些值得关注的性能： 容许你应用常见的网络技术（例如HTML，CSS，JavaScript，TypeScript等）创立动画。 不须要无关视频编辑的其余常识。 提供React性能，例如可重复使用的组件，弱小的合成性能和疾速从新加载性能。 Remotion Player给你真正的视频编辑器的感觉。 Remotion Player可用于应用浏览器播放和查看视频。 Remotion在GitHub上有大概7K stars，最重要的是，它是收费供集体应用的。 应用Remotion之前，应先装置Node.js和FFmpeg。而后，你须要将FFmpeg提取到任何文件夹，并将其门路设置为零碎变量。 装置完上述依赖项后，你能够通过运行yarn create video或创立第一个Remotion我的项目npm init video。 2、Framer Motion Framer Motion是你应该关注的另一个风行的React动画库。它是两个API（Framer API和Motion API）的组合。 Framer库为Web和挪动应用程序提供疾速的交互性和原型设计性能，而Motion库提供动画和手势。 除此之外，还有很多理由对此感到兴奋： 为基于物理的高级动画提供帮忙。 Motion API能够主动生成动画，你只须要配置正确的设置值即可。 反对手势辨认喜爱hover，tap，pan，和drag。 反对服务器端渲染。 易于更改和操纵色彩。 好的文档，易于学习。 反对TypeScript。 Framer Motion在GitHub上已有超过11K stars和NPM超过490K周下载量。 你能够应用npm或yarn来装置Framer Motion： yarn add framer-motionOrnpm install framer-motion而且，Framer Motion中蕴含三个类型的软件包：收费，专业版（每月20美元）和自定义软件包，你能够依据本人的需要抉择最合适的一种。 3、React Motion React Motion是另一个风行的React库，可让你轻松创立真切的动画。次要是，它提供了五种不同的组件：spring， Motion，StaggeredMotion，TransitionMotion，和presets。他们每个人都有一个独特的目标： spring —辅助性能，用于领导零部件的动画制作。 presets —预约义的动画对象。 Motion —用于对组件进行动画解决的组件。 StaggeredMotion —用于对动画相互依赖的组件进行动画解决的组件。 TransitionMotion —用于对组件的装置和卸载进行动画解决的组件。 除了这五个专用的导出外，前端培训在应用React Motion之前，还须要钻研许多内容，因为它比咱们之前探讨过的其余库要简单得多。他们提供了功能齐全的示例文件，我倡议你首先浏览它们。 React Motion每周有超过650K的npm下载，以及大概1.9万个GitHub stars。 如果要应用它，能够应用npm或yarn装置它： yarn add react-motionOrnpm i react-motion ...

react源码解析11.生命周期调用程序视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 各阶段生命周期执行状况函数组件hooks的周期会在hooks章节解说，这一章的使命周期次要针对类组件，各阶段生命周期执行状况看下图： render阶段： mount时：组件首先会经验constructor、getDerivedStateFromProps、componnetWillMount、renderupdate时：组件首先会经验componentWillReceiveProps、getDerivedStateFromProps、shouldComponentUpdate、rendererror时：会调用getDerivedStateFromErrorcommit阶段 mount时：组件会经验componnetDidMountupdate时：组件会调用getSnapshotBeforeUpdate、componnetDidUpdateunMount时：调用componnetWillUnmounterror时：调用componnetDidCatch其中红色的局部不倡议应用，须要留神的是commit阶段生命周期在mutation各个子阶段的执行程序，能够温习上一章 接下来依据一个例子来解说在mount时和update时更新的具体程序： mount时：首先会依照深度优先的形式，顺次构建wip Fiber节点而后切换成current Fiber，在render阶段会顺次执行各个节点的constructor、getDerivedStateFromProps/componnetWillMount、render，在commit阶段，也就是深度优先遍历向上冒泡的时候顺次执行节点的componnetDidMountupdate时：同样会深度优先构建wip Fiber树，在构建的过程中会diff子节点，在render阶段，如果返现有节点的变动，例如上图的c2，那就标记这个节点Update Flag，而后执行getDerivedStateFromProps和render，在commit阶段会顺次执行节点的getSnapshotBeforeUpdate、componnetDidUpdate

react源码解析10.commit阶段视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 在render阶段的开端会调用commitRoot(root);进入commit阶段，这里的root指的就是fiberRoot，而后会遍历render阶段生成的effectList，effectList上的Fiber节点保留着对应的props变动。之后会遍历effectList进行对应的dom操作和生命周期、hooks回调或销毁函数，各个函数做的事件如下 在commitRoot函数中其实是调度了commitRootImpl函数 //ReactFiberWorkLoop.old.jsfunction commitRoot(root) { var renderPriorityLevel = getCurrentPriorityLevel(); runWithPriority$1(ImmediatePriority$1, commitRootImpl.bind(null, root, renderPriorityLevel)); return null;}在commitRootImpl的函数中次要分三个局部： commit阶段前置工作 调用flushPassiveEffects执行完所有effect的工作初始化相干变量赋值firstEffect给前面遍历effectList用 //ReactFiberWorkLoop.old.jsdo { // 调用flushPassiveEffects执行完所有effect的工作 flushPassiveEffects(); } while (rootWithPendingPassiveEffects !== null); //... // 重置变量 finishedWork指rooFiber root.finishedWork = null; //重置优先级 root.finishedLanes = NoLanes; // Scheduler回调函数重置 root.callbackNode = null; root.callbackId = NoLanes; // 重置全局变量 if (root === workInProgressRoot) { workInProgressRoot = null; workInProgress = null; workInProgressRootRenderLanes = NoLanes; } else { } //rootFiber可能会有新的副作用 将它也退出到effectLis let firstEffect; if (finishedWork.effectTag > PerformedWork) { if (finishedWork.lastEffect !== null) { finishedWork.lastEffect.nextEffect = finishedWork; firstEffect = finishedWork.firstEffect; } else { firstEffect = finishedWork; } } else { firstEffect = finishedWork.firstEffect; }mutation阶段 ...

这次的版本是 6.0.2这里只讲 react-router-dom 提供的 API, 像是 Routes, Router 这些都是 react-router 提供的 BrowserRouter, HashRouterBrowserRouter 和 hashRouter 的次要区别就在于应用的路由 API 简略解释BrowserRouter它应用了 history 库 的API，也就是说，浏览器（IE 9和更低版本以及同时代的浏览器）是不可用的。 客户端React应用程序可能保护洁净的路由，如 example.com/react/route ，但须要失去Web服务器的反对。 这须要Web服务器应该被配置为单页应用程序，即为/react/route门路或服务器上的任何其余路由提供雷同的index.html。 HashRouter它应用URL哈希，对反对的浏览器或网络服务器没有限度, 如 example.com/#/react/route. 成果是所有后续的URL门路内容在服务器申请中被疏忽（即你发送 "www.mywebsite.com/#/person/john"，服务器失去 "www.mywebsite.com"。因而，服务器将返回前#URL响应，而后后#门路将由你的客户端反馈程序进行解析解决。 代码解析先说 hashRouter , 他的依赖度是最低的, 代码也很简略: import {createHashHistory} from "history";function HashRouter({basename, children, window}: HashRouterProps) { let historyRef = React.useRef<HashHistory>(); // 用来存储 createHashHistory 后果 if (historyRef.current == null) { historyRef.current = createHashHistory({window}); } let history = historyRef.current; let [state, setState] = React.useState({ action: history.action, location: history.location }); React.useLayoutEffect(() => history.listen(setState), [history]); return ( <Router basename={basename} children={children} location={state.location} navigationType={state.action} navigator={history} /> );}这里须要理解的一个 API 是 createHashHistory, 他来自于 history 仓库, 这里咱们须要解析一下这个办法: ...

产品呈现的问题:braft-editor生成的htmlstring格局富文本内容，经由react中的dangerouslySetInnerHTML不做解决间接展现时，img的呈现会很突兀。 我最终的解决方案：加载富文本内容时，图片优先申请了含糊版，起到了即刻占位的作用，随后富文本内容的图片清晰版通过filter动画逐步出现。 插件: (1) htmr感激简书https://www.jianshu.com/p/366...提供的思路。这个插件能够适当自定义htmstring的理论渲染规定，比方把img替换成react组件。【额定的】须要上面的条件把文本内容间接返回，详见其npm的形容文档。 else if (typeof props === "undefined") { return <>{ nodeName }</>;}(2) react-progressive-image-loading一个图片渐进式含糊加载的插件，参见我上一则帖子www.v2ex.com/t/818727因为落实上述计划的我的项目，在图片资源方面，能够相似阿里云的OSS那样在图片地址前面加w/40/h/50这样的宽高参数取得指定尺寸图片，我再通过css放大成原图须要展现的大小便能取得含糊版。【额定的】如果图片404了，这个插件会保留filter: blur(10px);的款式，如果想替换或者移除，我给该插件render属性里的img加了这么一段 onError={(e: any) =>{ e.target.onerror = null; e.target.style = "filter:none;"}}相干局部的代码： import htmr from "htmr";import ProgressiveImage from "react-progressive-image-loading";const transform = { _: (nodeName: any, props: any, children: any) => { if (nodeName == "img") { let itemSrc = props.src; let itemStyle = props.style; return ( <ProgressiveImage transitionTime={1800} preview={`${itemSrc}?op=thumb/fit/w/${ itemStyle.width / 24 || 40 }/h/${itemStyle.width / 24 || 40}`} src={itemSrc} render={(src, style) => ( <img src={src} style={Object.assign(style, { ...itemStyle, })} onError={(e: any) =>{ e.target.onerror = null; e.target.style = "filter:none;" }} /> )} /> ); } else if (typeof props === "undefined") { return <>{ nodeName }</>; } return React.createElement(nodeName, props, children); }, };……//渲染局部{htmr(某个htmlstring变量名, { transform })}题外话总结:幸好工时足够，无意间组合出了百度能查到那则简书后果的关键词，因此破了局。此前，机械性的尝试了本人用原生js拿到htmlstring渲染后的dom进行操作。（orz忍住没在摸索阶段就摆烂在v2ex发帖求助，本人找到了） ...

download：基于 React + Redux/Mobx 搞定简单我的项目状态治理PO（Persistant Object - 长久化对象）该概念随着ORM产生，能够看成是与数据库中的表相映射的Java对象。通常就是对应数据库中某个表中的一条记录。PO仅仅用于示意数据，没有任何数据操作。通常恪守Java Bean的标准，领有 getter/setter办法。PO的生命周期：是向数据库中增加新数据时创立，删除数据库中数据时削除的。并且它只能存活在一个数据库连贯中，断开连接即被销毁。PO的作用：能够把数据表中一条记录作为一个对象解决，能够不便的转为其它对象。PO是有状态的，每个属性代表其以后的状态。应用它，能够使咱们的程序与物理数据解耦，并且能够简化对象数据与物理数据之间的转换。PO的特点：PO的属性是跟数据库表的字段一一对应的PO对象须要实现序列化接口一个POJO长久化后就是PO BO（Business Object - 业务对象）BO用于示意一个业务对象，它包含了业务逻辑，经常封装了对DAO和RPC等的调用，能够进行PO与VO/DTO之间的转换。BO通常位于业务层，要区别于间接对外提供服务的服务层：BO提供了根本业务单元的根本业务操作，在设计上属于被服务层业务流程调用的对象，一个业务流程可能须要调用多个BO来实现。DO（Domain Object - 畛域对象） 畛域对象就是从事实世界中形象进去的无形或有形的业务实体。通常位于业务层中。 VO（Value Object/View Object - 值对象/视图对象） Value Object，值对象，也称为业务对象，是存活在业务层的，是业务逻辑应用的，它存活的目标就是为数据提供一个生存的中央（实际上跟DO有点相似）。VO的属性是依据以后业务的不同而不同的，也就是说，它的每一个属性都一一对应以后业务逻辑所须要的数据的名称。VO通常用于业务层之间的数据传递，其仅仅蕴含数据。但应是形象出的业务对象。依据业务的须要，其能够和表对应或者不。用new关键字创立，由GC进行回收。 View Object，视图对象，用于展现层，它的作用是把某个指定页面（或组件）的所有数据封装起来，对应整个界面的值 DTO（Data Transfer Object - 数据传输对象） DTO概念来源于J2EE的设计模式，原来的目标是为了EJB的分布式应用提供粗粒度的数据实体，以缩小分布式调用的次数，从而进步分布式调用的性能和升高网络负载。DTO用于示意一个数据传输对象，通常用于不同服务或服务不同分层之间的数据传输。DTO与VO与相似，但也有一些不同，这个不同次要是设计理念上的，比方API服务须要应用的是DTO，而用于展现层页面的应用的是VO。例如，为了展现不便，在VO的性别字段存的是男和女，而在DTO中存的是1或者2这样的代码。

antd报错：Warning: [antd: Form.Item] children is array of render props cannot have name. 如图： 本意是想要在input上面减少一行提醒文字、和减少button。 代码： 解决： 减少button: input用一个form.item独自包裹。 减少文字提醒：form.item新增属性：extra="xxxxx"即可 ![image.png](/img/bVcWQaj

浏览前须知流程图的内容90%来自于React技术揭秘一书，对其内容进行整顿，不便正在学习源码的同学们可能系统性把每个要害知识点给串联起来，上面JPG图片比拟含糊，图片宽高比较大，用手机关上pdf，观看起来也不不便，倡议用电脑跳转上面各个pdf地址进行查看，带着问题来浏览。 React理念1、react15与react > 16架构区别性？\2、Fiber节点的组成？\3、Fiber树的构造？何为深度优先遍历？\4、Fiber工作原理（双缓存技术）？\5、Fiber Mount与Update流程是怎么样？\6、JSX与Fiber的区别？ pdf地址: bin-blog.oss-cn-shenzhen.aliyuncs.com/react/react… React render阶段1、进入render阶段前须要干什么（判断是否异步可中断更新）？\2、Fiber节点的创立和Fiber树的构建如何开始（performUnitOfWork）？\3、“递”阶段beginWork如何工作？\4、‘归阶段’completeWork如何工作？\5、如何判断是mount还是update？\6、render阶段最终的产物是什么(effectList的生成、fiber节点的创立)？ pdf地址: bin-blog.oss-cn-shenzhen.aliyuncs.com/react/react… React commit阶段1、commit阶段如何开启（commitRoot办法）？\2、before mutation阶段之前做了什么(flushPassiveEffects(),触发useEffect回调与其余同步工作)?\3、rootFiber的effectTag不在effectList怎么办？\4、before mutation阶段（执行Dom操作之前）做了什么？\5、mutation阶段（执行Dom操作）做了什么？\6、layout阶段（执行Dom操作后）做了什么？\7、layout之后做了什么？\8、最终产物是什么？ pdf地址: bin-blog.oss-cn-shenzhen.aliyuncs.com/react/react… React Diff算法1、什么是diff算法？\2、diff概念？\3、diff算法产生的阶段?\4、diff的预设限度？\5、diff如何实现？ pdf地址: bin-blog.oss-cn-shenzhen.aliyuncs.com/react/react… React 状态更新1、触发状态更新要害链路？\2、触发状态更新有哪些办法？\3、HostRoot、ClassComponent的Update对象构造？\4、ClassComponent、HostRoot的UpdateQueue构造？\5、updateQueue的工作流程？\6、调度优先级的过程？\7、为什么componentWillXXX会触发屡次，要加个unsafe_？\8、如何保障Update不失落？\9、ReactDOM.render的流程？\10、this.setState、this.forceUpdate的流程？\11、React入口有哪三种模式？ pdf地址: bin-blog.oss-cn-shenzhen.aliyuncs.com/react/react… React Hook1、一个极简的useState Hook的实现（强烈推荐，上面把这部分的代码贴出来了，对了解hook有帮忙）\2、Hook 的数据结构（相似updateQueue）\3、mount/update的调起办法会以不同dispatcher辨别\4、useState与useReducer原理概览（比照下面极简useState hook的实现）\5、usEffect（通过前几个流程图所讲flushPassiveEffects办法进行切入了解）概览\6、useRef原理概览？ref的工作流程，render阶段做了什么？commit阶段做了什么？\7、useMemo、useCallback原理概览，以及mount、update时两者的区别 pdf地址\bin-blog.oss-cn-shenzhen.aliyuncs.com/react/react… 极简useState Hook的实现// 首次render时是mountlet isMount = true;// 通过workInProgressHook变量指向以后正在工作的hooklet workInProgressHook;// App组件对应的fiber对象const fiber = { // 保留该FunctionComponent对应的Hooks链表 memoizedState: null, // 指向App函数 stateNode: App};// APP组件function App() { const [num, updateNum] = useState(0); console.log(`${isMount ? 'mount' : 'update'} num: `, num); return { click() { updateNum(num => num + 1); } }}// 模仿React开始调度更新function schedule() { // 更新前将workInProgressHook重置为fiber保留的第一个Hook // 通过workInProgressHook变量指向以后正在工作的hook workInProgressHook = fiber.memoizedState; // 触发组件render fiber.stateNode(); // 组件首次render为mount，当前再触发的更新为update isMount = false;}// 更新时底层驱动函数function dispatchAction(queue, action) { // 创立update const update = { action, // 更新执行的函数 next: null // 与同一个Hook的其余更新造成链表 } // 环状单向链表操作 // 产生的update保留在useState对应的hook.queue if (queue.pending === null) { update.next = update; } else { update.next = queue.pending.next; queue.pending.next = update; } queue.pending = update; // 模仿React开始调度更新 schedule();}function useState(initialState) { let hook; if (isMount) { // mount时须要生成hook对象 // 保留update的queue，即上文介绍的queue hook = { queue: { pending: null }, // 保留hook对应的state memoizedState: initialState, // 与下一个Hook连贯造成单向无环链表 next: null } // 将hook插入fiber.memoizedState链表开端 if (!fiber.memoizedState) { fiber.memoizedState = hook; } else { workInProgressHook.next = hook; } // 挪动workInProgressHook指针 workInProgressHook = hook; } else { // update时从workInProgressHook中取出该useState对应的hook hook = workInProgressHook; // 在组件render时，每当遇到下一个useState，咱们挪动workInProgressHook的指针。 // 这样，只有每次组件render时useState的调用程序及数量保持一致，那么始终能够通过workInProgressHook找到以后useState对应的hook对象。 workInProgressHook = workInProgressHook.next; } let baseState = hook.memoizedState; if (hook.queue.pending) { // 获取update环状单向链表中第一个update let firstUpdate = hook.queue.pending.next; do { // 执行update action const action = firstUpdate.action; baseState = action(baseState); firstUpdate = firstUpdate.next; // 最初一个update执行完后跳出循环 } while (firstUpdate !== hook.queue.pending.next) // 清空queue.pending hook.queue.pending = null; } // 将update action执行完后的state作为memoizedState hook.memoizedState = baseState; return [baseState, dispatchAction.bind(null, hook.queue)]; }

download：基于 React + Redux/ 搞定简单我的项目状态治理1.JDK 8 之前的遍历JDK 8 之前次要应用 EntrySet 和 KeySet 进行遍历，具体实现代码如下。 1.1 EntrySet 遍历EntrySet 是晚期 HashMap 遍历的次要办法，其实现代码如下： public static void main(String[] args) { // 创立并赋值 hashmap HashMap<String, String> map = new HashMap() {{ put("Java", " Java Value."); put("MySQL", " MySQL Value."); put("Redis", " Redis Value."); }}; // 循环遍历 for (Map.Entry<String, String> entry : map.entrySet()) { System.out.println(entry.getKey() + ":" + entry.getValue()); }}1.2 KeySet 遍历KeySet 的遍历形式是循环 Key 内容，再通过 map.get(key) 获取 Value 的值，具体实现如下： ...

download：基于 React + Redux/Mobx 搞定简单我的项目状态治理1.字面含意不同咱们先从二者的字面含意来了解它，Comparable 翻译为中文是“比拟”的意思，而 Comparator 是“比拟器”的意思。Comparable 是以 -able 结尾的，示意它本身具备着某种能力，而 Comparator 是以 -or 结尾，示意本身是比拟的参与者，这是从字面含意先来了解二者的不同。 2.用法不同二者都是顶级的接口，但领有的办法和用法是不同的，上面咱们别离来看。 2.1 ComparableComparable 接口只有一个办法 compareTo，实现 Comparable 接口并重写 compareTo 办法就能够实现某个类的排序了，它反对 Collections.sort 和 Arrays.sort 的排序。 在咱们没有应用 Comparable 时，程序的执行是这样的： import lombok.Getter;import lombok.Setter;import lombok.ToString;import java.util.ArrayList;import java.util.List;public class ComparableExample { public static void main(String[] args) { // 创建对象 Person p1 = new Person(1, 18, "Java"); Person p2 = new Person(2, 22, "MySQL"); Person p3 = new Person(3, 6, "Redis"); // 增加到汇合 List<Person> list = new ArrayList<>(); list.add(p1); list.add(p2); list.add(p3); // 打印汇合信息 list.forEach(p -> System.out.println(p.getName() + "：" + p.getAge())); }}// 以下 set/get/toString 都应用的是 lombok 提供的注解@Getter @Setter@ToStringclass Person { private int id; private int age; private String name; public Person(int id, int age, String name) { this.id = id; this.age = age; this.name = name; }}程序执行后果如下： ...

react-router-dom 编程式路由导航 (v5)1.push跳转+携带params参数 props.history.push(`/b/child1/${id}/${title}`);2.push跳转+携带search参数props.history.push(`/b/child1?id=${id}&title=${title}`);3.push跳转+携带state参数props.history.push(`/b/child1`, { id, title });4.replace跳转+携带params参数this.props.history.replace(`/home/message/detail/${id}/${title}`)5.replace跳转+携带search参数this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)6.replace跳转+携带state参数this.props.history.replace(`/home/message/detail`, { id, title });7.后退this.props.history.goForward();8.回退this.props.history.goForward();9.后退或回退 ( go )this.props.history.go(-2); //回退到前2条的路由在个别组件中应用编程式路由导航 (非路由组件)import {withRouter} from 'react-router-dom'class Header extends Component { // withRouter(Header)后，就能够在个别组件外部应用 this.props.history //...}export default withRouter(Header)react-router-dom 编程式路由导航 (v6)// v6版本编程导航应用 useNavigate (以下为引入代码)import { useNavigate } from "react-router-dom";export default function A() { const navigate = useNavigate(); //...}1.push跳转+携带params参数 navigate(`/b/child1/${id}/${title}`);2.push跳转+携带search参数navigate(`/b/child2?id=${id}&title=${title}`);3.push跳转+携带state参数navigate("/b/child2", { state: { id, title }});4.replace跳转+携带params参数navigate(`/b/child1/${id}/${title}`,{replace: true});5.replace跳转+携带search参数navigate(`/b/child2?id=${id}&title=${title}`,{replace: true});6.replace跳转+携带state参数navigate("/b/child2", { state: { id, title },replace: true});为您举荐相干文章:深度解析 React useRef Hook 的应用 ！https://juejin.cn/post/704258...最简洁的 Mbox 6.x 根本应用步骤介绍（仅三步）！！！https://juejin.cn/post/704110...(干货) 全网最全 react-router-dom v6.0学习指南（新个性深刻解读、继续更新...）！！！https://juejin.cn/post/704028...（原创）深刻解读s React 中的useState Hook 批改了值，然而不从新渲染，不刷新的问提https://juejin.cn/post/703923...React中应用 react-router-dom 路由传参的三种形式详解【含V5.x、V6.x】！！！https://juejin.cn/post/704284...

路由传值的三种形式（v5.x）params参数//路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link> //或 <Link to={{ pathname:'/demo/test/tom/18' }}>详情</Link>//注册路由(申明接管)：<Route path="/demo/test/:name/:age" component={Test}/> //接管参数：this.props.match.paramssearch参数//路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>//注册路由(无需申明，失常注册即可)：<Route path="/demo/test" component={Test}/> //接管参数：this.props.location.search//备注：获取到的search是urlencoded编码字符串(例如: ?id=10&name=zhangsan)，须要借助query-string解析参数成对象state参数//路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>//注册路由(无需申明，失常注册即可)： <Route path="/demo/test" component={Test}/> //接管参数：this.props.location.state//备注：刷新也能够保留住参数路由传值的三种形式（v6.x）params参数//路由链接(携带参数)：<Link to={{ pathname:`/b/child1/${id}/${title}` }}>Child1</Link>//或 <Link to={`/b/child1/${id}/${title}`}>Child1</Link> //注册路由(申明接管)：<Route path="/b/child1/:id/:title" component={Test}/> //接管参数：import { useParams } from "react-router-dom";const params = useParams();//params参数 => {id: "01", title: "音讯1"}search参数//路由链接(携带参数)： <Link className="nav" to={`/b/child2?age=20&name=zhangsan`}>Child2</Link>//注册路由(无需申明，失常注册即可)：<Route path="/b/child2" component={Test}/> //接管参数办法1：import { useLocation } from "react-router-dom";import qs from "query-string";const { search } = useLocation();//search参数 => {age: "20", name: "zhangsan"}//接管参数办法2：import { useSearchParams } from "react-router-dom";const [searchParams, setSearchParams] = useSearchParams();// console.log( searchParams.get("id")); // 12//备注：获取到的search是urlencoded编码字符串(例如: ?age=20&name=zhangsan)，须要借助query-string解析参数成对象state参数//通过Link的state属性传递参数 <Link className="nav" to={`/b/child2`} state={{ id: 999, name: "i love merlin" }} > Child2</Link>//注册路由(无需申明，失常注册即可)：<Route path="/b/child2" component={Test}/> //接管参数：import { useLocation } from "react-router-dom";const { state } = useLocation();//state参数 => {id: 999, name: "我是梅琳"}//备注：刷新也能够保留住参数兄弟姐妹们，点波关注吧，一起分享乏味的技术！ ...

本文首发：最好用的 5 款 React 富文本编辑器 - 卡拉云 富文本编辑器罕用于网络上各种模式的内容展现，从简略的动态博客到简单的内容管理系统。它利用于多种应用程序，如博客、文章、列表以及更弱小的界面 —— 电商网站商品详情和博客上的。然而，从这么多功能各异的编辑器中挑选出一个适合的并不容易。 我测评了 5 款 React 富文本编辑器，比拟了他们编辑器的外围性能， 心愿我的测评能够帮你找到最合适你利用场景的编辑器。如果你齐全不会前端，也不必放心，能够应用卡拉云，仅需简略拖拽即可生成「富文本」编辑器，卡拉云帮你疾速搭建属于你本人的应用程序，详见本文文尾。 1.Draft.js — 可能满足根底需要的收费编辑器 Draft.js 是 Facebook 为了 React 而开发的一个 React.js 开源框架。 它是强壮、可扩大及可定制的，在 React 开发者中十分受欢迎。 Draft.js 提供了治理各项配置的工具，包含事件触发器上的编辑器款式和单个文本实体（如题目和块援用）的块款式。对于在编辑器中创立的内容，咱们心愿将其转换为便于在页面上显示的 HTML。一些库如 draft-convert 和 draftjs-to-html 可用于转换这些数据。 长处 易于了解的扁平化内容模型。构建在 Draft.js 上的高度可扩大及可定制的插件。自 2016 年以来，由 Facebook 反对的宏大且一直增长的开发者社区提供了许多的教程和反对。毛病 不足官网的挪动端反对。OSX 自定义键绑定的问题。当须要表格这样简单的内容构造时，编辑器将会变慢，代码也会变得复杂。如果你是初学者且心愿找到一个能满足根底需要的文本编辑器，试试 Draft.js 吧。 应用 npm 或 yarn 装置： npm install draft-js yarn add draft-js 2.Slate.js — 反对简单内容格局的收费编辑器 Slate.js 是另一款超好用的 react 富文本编辑器，可用于构建优雅、性能强悍的编辑器如 Medium Editor、Google Docs 等。 ...

主动计算宽高的 react 组件github地址：https://github.com/niexq/reac... 欢送 Star 主页预览 装置 yarn add @oyyds/react-auto-sizer # or npm i @oyyds/react-auto-sizer -S 应用import AutoSizer from '@oyyds/react-auto-sizer';const AutoSizeComponent = () => { return ( <div> <AutoSizer> {({ width, height }) => ( <div style={{ width, height, }} > 内容区 </div> )} </AutoSizer> </div> );}; 业务场景当初大部分业务场景须要兼容大数据，例如大数据表格，大数据树，大数据下拉框等等，而所有的大数据组件都须要指定 宽高，理论业务界面大部分须要实时计算宽高，而 react-auto-sizer就是来实现主动计算宽高的使命。 编码实现期初预研 windows 上绑定 resize，但因 resize 会在窗体变动时，会有性能问题，局部极其像素状况下会呈现抖动； ResizeObserver，接口能够监听到 Element 的内容区域或 SVGElement 的边界框扭转。内容区域则须要减去内边距padding。 -- 摘自 MDN ResizeObserver天选之子， 应用 react hook useEffect，外围代码如下： ...

说说对 React Hooks 的了解？解决了什么问题？一、是什么Hook 是 React 16.8 的新增个性。它能够让你在不编写 class 的状况下应用 state 以及其余的 React 个性 至于为什么引入hook，官网给出的动机是解决长时间应用和保护react过程中常遇到的问题，例如： 难以重用和共享组件中的与状态相干的逻辑逻辑简单的组件难以开发与保护，当咱们的组件须要解决多个互不相干的 local state 时，每个生命周期函数中可能会蕴含着各种互不相干的逻辑在外面类组件中的this减少学习老本，类组件在基于现有工具的优化上存在些许问题因为业务变动，函数组件不得不改为类组件等等在以前，函数组件也被称为无状态的组件，只负责渲染的一些工作 因而，当初的函数组件也能够是有状态的组件，外部也能够保护本身的状态以及做一些逻辑方面的解决 二、有哪些下面讲到，Hooks让咱们的函数组件领有了类组件的个性，例如组件内的状态、生命周期 最常见的hooks有如下： useStateuseEffect其余useState首先给出一个例子，如下： import React, { useState } from 'react';function Example() { // 申明一个叫 "count" 的 state 变量 const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p > <button onClick={() => setCount(count + 1)}> Click me </button> </div> );}在函数组件中通过useState实现函数外部保护state，参数为state默认的值，返回值是一个数组，第一个值为以后的state，第二个值为更新state的函数 该函数组件等价于的类组件如下： class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( <div> <p>You clicked {this.state.count} times</p > <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div> ); }}从上述两种代码剖析，能够看出两者区别： ...

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内继续存在。命令式地获取及操作DOM： function TextInputWithFocusButton() {  // 通过useRef创立并获取Dom元素  const inputEl = useRef(null);      const onButtonClick = () => {    // `current` 指向已挂载到 DOM 上的文本输出元素    inputEl.current.focus(); };  return (    <>      <input ref={inputEl} type="text" />      <button onClick={onButtonClick}>Focus the input</button>    </> );}useRef 创立一个不受组件刷新而影响的变量 import React, { useRef, useState, useEffect } from "react";function UseRef() {  const [x,setX] = useState(0)  //函数组件只有更新了，a就会被从新为 0，所以函数组件须要借助useRef存储变量  let a = 0  //useRef能够生成一个变量，用于在函数组件中存储数据  let currentVal = useRef(0)  // 通过useRef创立并获取Dom元素  const inputElement = useRef(null);  useEffect(()=>{    console.log(`useEffect --- x:${x} --- currentVal:${currentVal.current} --- a:${a}`); },[x])    return (    <>      <p>{x} ----</p>      <button onClick={()=>{ setX(v=>v+1) ;  currentVal.current+=2 ; a+=2 }}>+1</button>    </> );}按钮点击+1，页面会打印： ...

react源码解析9.diff算法视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 在render阶段更新Fiber节点时，咱们会调用reconcileChildFibers比照current Fiber和jsx对象构建workInProgress Fiber，这里current Fiber是指以后dom对应的fiber树，jsx是class组件render办法或者函数组件的返回值。 在reconcileChildFibers中会依据newChild的类型来进入单节点的diff或者多节点diff //ReactChildFiber.old.jsfunction reconcileChildFibers( returnFiber: Fiber, currentFirstChild: Fiber | null, newChild: any,): Fiber | null { const isObject = typeof newChild === 'object' && newChild !== null; if (isObject) { switch (newChild.$$typeof) { case REACT_ELEMENT_TYPE: //繁多节点diff return placeSingleChild( reconcileSingleElement( returnFiber, currentFirstChild, newChild, lanes, ), ); } } //... if (isArray(newChild)) { //多节点diff return reconcileChildrenArray( returnFiber, currentFirstChild, newChild, lanes, ); } // 删除节点 return deleteRemainingChildren(returnFiber, currentFirstChild);}diff过程的次要流程如下图： ...

react源码解析8.render阶段视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo render阶段的入口render阶段的次要工作是构建Fiber树和生成effectList，在第5章中咱们晓得了react入口的两种模式会进入performSyncWorkOnRoot或者performConcurrentWorkOnRoot，而这两个办法别离会调用workLoopSync或者workLoopConcurrent //ReactFiberWorkLoop.old.jsfunction workLoopSync() { while (workInProgress !== null) { performUnitOfWork(workInProgress); }}function workLoopConcurrent() { while (workInProgress !== null && !shouldYield()) { performUnitOfWork(workInProgress); }}这两函数的区别是判断条件是否存在shouldYield的执行，如果浏览器没有足够的工夫，那么会终止while循环，也不会执行前面的performUnitOfWork函数，天然也不会执行前面的render阶段和commit阶段，这部分属于scheduler的知识点，咱们在第15章解说。 workInProgress：新创建的workInProgress fiberperformUnitOfWork：workInProgress fiber和会和曾经创立的Fiber连接起来造成Fiber树。这个过程相似深度优先遍历，咱们暂且称它们为‘捕捉阶段’和‘冒泡阶段’。伪代码执行的过程大略如下 function performUnitOfWork(fiber) { if (fiber.child) { performUnitOfWork(fiber.child);//beginWork } if (fiber.sibling) { performUnitOfWork(fiber.sibling);//completeWork }}render阶段整体执行流程用demo_0看视频调试 捕捉阶段从根节点rootFiber开始，遍历到叶子节点，每次遍历到的节点都会执行beginWork，并且传入以后Fiber节点，而后创立或复用它的子Fiber节点，并赋值给workInProgress.child。冒泡阶段在捕捉阶段遍历到子节点之后，会执行completeWork办法，执行实现之后会判断此节点的兄弟节点存不存在，如果存在就会为兄弟节点执行completeWork，当全副兄弟节点执行完之后，会向上‘冒泡’到父节点执行completeWork，直到rootFiber。示例，demo_0调试 function App() { return ( <> <h1> <p>count</p> xiaochen </h1> </> )}ReactDOM.render(<App />, document.getElementById("root"));当执行完深度优先遍历之后造成的Fiber树： ...

react源码解析12.状态更新流程视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo setState&forceUpdate在react中触发状态更新的几种形式： ReactDOM.renderthis.setStatethis.forceUpdateuseStateuseReducer咱们重点看下重点看下this.setState和this.forceUpdate，hook在第13章讲 this.setState内调用this.updater.enqueueSetState，次要是将update退出updateQueue中 //ReactBaseClasses.jsComponent.prototype.setState = function (partialState, callback) { if (!(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null)) { { throw Error( "setState(...): takes an object of state variables to update or a function which returns an object of state variables." ); } } this.updater.enqueueSetState(this, partialState, callback, 'setState');};//ReactFiberClassComponent.old.jsenqueueSetState(inst, payload, callback) { const fiber = getInstance(inst);//fiber实例 const eventTime = requestEventTime(); const suspenseConfig = requestCurrentSuspenseConfig(); const lane = requestUpdateLane(fiber, suspenseConfig);//优先级 const update = createUpdate(eventTime, lane, suspenseConfig);//创立update update.payload = payload; if (callback !== undefined && callback !== null) { //赋值回调 update.callback = callback; } enqueueUpdate(fiber, update);//update退出updateQueue scheduleUpdateOnFiber(fiber, lane, eventTime);//调度update}enqueueUpdate用来将update退出updateQueue队列 ...

react源码解析11.生命周期调用程序视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 各阶段生命周期执行状况函数组件hooks的周期会在hooks章节解说，这一章的使命周期次要针对类组件，各阶段生命周期执行状况看下图： render阶段： mount时：组件首先会经验constructor、getDerivedStateFromProps、componnetWillMount、renderupdate时：组件首先会经验componentWillReceiveProps、getDerivedStateFromProps、shouldComponentUpdate、rendererror时：会调用getDerivedStateFromErrorcommit阶段 mount时：组件会经验componnetDidMountupdate时：组件会调用getSnapshotBeforeUpdate、componnetDidUpdateunMount时：调用componnetWillUnmounterror时：调用componnetDidCatch其中红色的局部不倡议应用，须要留神的是commit阶段生命周期在mutation各个子阶段的执行程序，能够温习上一章 接下来依据一个例子来解说在mount时和update时更新的具体程序： mount时：首先会依照深度优先的形式，顺次构建wip Fiber节点而后切换成current Fiber，在render阶段会顺次执行各个节点的constructor、getDerivedStateFromProps/componnetWillMount、render，在commit阶段，也就是深度优先遍历向上冒泡的时候顺次执行节点的componnetDidMountupdate时：同样会深度优先构建wip Fiber树，在构建的过程中会diff子节点，在render阶段，如果返现有节点的变动，例如上图的c2，那就标记这个节点Update Flag，而后执行getDerivedStateFromProps和render，在commit阶段会顺次执行节点的getSnapshotBeforeUpdate、componnetDidUpdate

react源码解析3.react源码架构视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 这一章的目标是让咱们认识一下react源码架构和各个模块。 在真正的代码学习之前，咱们须要在大脑中有一个react源码的地图，晓得react渲染的大抵流程和框架，这样能力从上帝视角看react是怎么更新的，来吧少年。 react的外围能够用ui=fn(state)来示意，更具体能够用 const state = reconcile(update);const UI = commit(state);下面的fn能够分为如下一个局部： Scheduler（调度器）： 排序优先级，让优先级高的工作先进行reconcileReconciler（协调器）： 找出哪些节点产生了扭转，并打上不同的Flags（旧版本react叫Tag）Renderer（渲染器）： 将Reconciler中打好标签的节点渲染到视图上一图胜千言： jsxjsx是js语言的扩大，react通过babel词法解析（具体怎么转换能够查阅babel相干插件），将jsx转换成React.createElement，React.createElement办法返回virtual-dom对象（内存中用来形容dom阶段的对象），所有jsx实质上就是React.createElement的语法糖，它能申明式的编写咱们想要组件呈现出什么样的ui成果。在第5章jsx咱们会具体介绍jsx解析之后的后果。 Fiber双缓存Fiber对象下面保留了包含这个节点的属性、类型、dom等，Fiber通过child、sibling、return（指向父节点）来造成Fiber树，还保留了更新状态时用于计算state的updateQueue，updateQueue是一种链表构造，下面可能存在多个未计算的update，update也是一种数据结构，下面蕴含了更新的数据、优先级等，除了这些之外，下面还有和副作用无关的信息。 双缓存是指存在两颗Fiber树，current Fiber树形容了以后出现的dom树，workInProgress Fiber是正在更新的Fiber树，这两颗Fiber树都是在内存中运行的，在workInProgress Fiber构建实现之后会将它作为current Fiber利用到dom上 在mount时（首次渲染），会依据jsx对象（Class Component或的render函数者Function Component的返回值），构建Fiber对象，造成Fiber树，而后这颗Fiber树会作为current Fiber利用到实在dom上，在update（状态更新时如setState）的时候，会依据状态变更后的jsx对象和current Fiber做比照造成新的workInProgress Fiber，而后workInProgress Fiber切换成current Fiber利用到实在dom就达到了更新的目标，而这一切都是在内存中产生的，从而缩小了对dom好性能的操作。 例如上面代码的Fiber双缓存构造如下，在第7章会具体解说 function App() { const [count, setCount] = useState(0); return ( <> <h1 onClick={() => { // debugger; setCount(() => count + 1); }} > <p title={count}>{count}</p> xiaochen </h1> </> )}ReactDOM.render(<App />, document.getElementById("root")); ...

react源码解析6.legacy模式和concurrent模式视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo react启动的模式react有3种模式进入主体函数的入口，咱们能够从 react官网文档 应用 Concurrent 模式（实验性）中比照三种模式： legacy 模式： ReactDOM.render(<App />, rootNode)。这是以后 React app 应用的形式。以后没有打算删除本模式，然而这个模式可能不反对这些新性能。blocking 模式： ReactDOM.createBlockingRoot(rootNode).render(<App />)。目前正在试验中。作为迁徙到 concurrent 模式的第一个步骤。concurrent 模式： ReactDOM.createRoot(rootNode).render(<App />)。目前在试验中，将来稳固之后，打算作为 React 的默认开发模式。这个模式开启了所有的新性能。个性比照： legacy 模式在合成事件中有主动批处理的性能，但仅限于一个浏览器工作。非 React 事件想应用这个性能必须应用 unstable_batchedUpdates。在 blocking 模式和 concurrent 模式下，所有的 setState 在默认状况下都是批处理的。会在开发中收回正告 不同模式在react运行时的含意legacy模式是咱们罕用的，它构建dom的过程是同步的，所以在render的reconciler中，如果diff的过程特地耗时，那么导致的后果就是js始终阻塞高优先级的工作(例如用户的点击事件)，体现为页面的卡顿，无奈响应。 concurrent Mode是react将来的模式，它用工夫片调度实现了异步可中断的工作，依据设施性能的不同，工夫片的长度也不一样，在每个工夫片中，如果工作到了过期工夫，就会被动让出线程给高优先级的工作。这部分将在第15节 scheduler&lane模型 。 两种模式函数次要执行过程1.次要执行流程： 2.具体函数调用过程： 用demo_0跟着视频调试更加清晰，黄色局部是次要工作是创立fiberRootNode和rootFiber，红色局部是创立Update，蓝色局部是调度render阶段的入口函数 3.legacy模式： render调用legacyRenderSubtreeIntoContainer，最初createRootImpl会调用到createFiberRoot创立fiberRootNode,而后调用createHostRootFiber创立rootFiber，其中fiberRootNode是整个我的项目的的根节点，rootFiber是以后利用挂在的节点，也就是ReactDOM.render调用后的根节点 //最上层的节点是整个我的项目的根节点fiberRootNodeReactDOM.render(<App />, document.getElementById("root"));//rootFiberReactDOM.render(<App />, document.getElementById("root"));//rootFiber ...

react源码解析3.react源码架构视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 这一章的目标是让咱们认识一下react源码架构和各个模块。 在真正的代码学习之前，咱们须要在大脑中有一个react源码的地图，晓得react渲染的大抵流程和框架，这样能力从上帝视角看react是怎么更新的，来吧少年。 react的外围能够用ui=fn(state)来示意，更具体能够用 const state = reconcile(update);const UI = commit(state);下面的fn能够分为如下一个局部： Scheduler（调度器）： 排序优先级，让优先级高的工作先进行reconcileReconciler（协调器）： 找出哪些节点产生了扭转，并打上不同的Flags（旧版本react叫Tag）Renderer（渲染器）： 将Reconciler中打好标签的节点渲染到视图上一图胜千言： jsxjsx是js语言的扩大，react通过babel词法解析（具体怎么转换能够查阅babel相干插件），将jsx转换成React.createElement，React.createElement办法返回virtual-dom对象（内存中用来形容dom阶段的对象），所有jsx实质上就是React.createElement的语法糖，它能申明式的编写咱们想要组件呈现出什么样的ui成果。在第5章jsx咱们会具体介绍jsx解析之后的后果。 Fiber双缓存Fiber对象下面保留了包含这个节点的属性、类型、dom等，Fiber通过child、sibling、return（指向父节点）来造成Fiber树，还保留了更新状态时用于计算state的updateQueue，updateQueue是一种链表构造，下面可能存在多个未计算的update，update也是一种数据结构，下面蕴含了更新的数据、优先级等，除了这些之外，下面还有和副作用无关的信息。 双缓存是指存在两颗Fiber树，current Fiber树形容了以后出现的dom树，workInProgress Fiber是正在更新的Fiber树，这两颗Fiber树都是在内存中运行的，在workInProgress Fiber构建实现之后会将它作为current Fiber利用到dom上 在mount时（首次渲染），会依据jsx对象（Class Component或的render函数者Function Component的返回值），构建Fiber对象，造成Fiber树，而后这颗Fiber树会作为current Fiber利用到实在dom上，在update（状态更新时如setState）的时候，会依据状态变更后的jsx对象和current Fiber做比照造成新的workInProgress Fiber，而后workInProgress Fiber切换成current Fiber利用到实在dom就达到了更新的目标，而这一切都是在内存中产生的，从而缩小了对dom好性能的操作。 例如上面代码的Fiber双缓存构造如下，在第7章会具体解说 function App() { const [count, setCount] = useState(0); return ( <> <h1 onClick={() => { // debugger; setCount(() => count + 1); }} > <p title={count}>{count}</p> xiaochen </h1> </> )}ReactDOM.render(<App />, document.getElementById("root")); ...

react源码解析14.手写hooks视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 最要害的是要了解hook队列和update队列的指针指向和updateQueue的更新计算，具体见视频解说 import React from "react";import ReactDOM from "react-dom";let workInProgressHook;//当前工作中的hooklet isMount = true;//是否时mount时const fiber = {//fiber节点 memoizedState: null,//hook链表 stateNode: App//dom};const Dispatcher = (() => {//Dispatcher对象 function mountWorkInProgressHook() {//mount时调用 const hook = {//构建hook queue: {//更新队列 pending: null//未执行的update队列 }, memoizedState: null,//以后state next: null//下一个hook }; if (!fiber.memoizedState) { fiber.memoizedState = hook;//第一个hook的话间接赋值给fiber.memoizedState } else { workInProgressHook.next = hook;//不是第一个的话就加在上一个hook的前面，造成链表 } workInProgressHook = hook;//记录当前工作的hook return workInProgressHook; } function updateWorkInProgressHook() {//update时调用 let curHook = workInProgressHook; workInProgressHook = workInProgressHook.next;//下一个hook return curHook; } function useState(initialState) { let hook; if (isMount) { hook = mountWorkInProgressHook(); hook.memoizedState = initialState;//初始状态 } else { hook = updateWorkInProgressHook(); } let baseState = hook.memoizedState;//初始状态 if (hook.queue.pending) { let firstUpdate = hook.queue.pending.next;//第一个update do { const action = firstUpdate.action; baseState = action(baseState); firstUpdate = firstUpdate.next;//循环update链表 } while (firstUpdate !== hook.queue.pending);//通过update的action计算state hook.queue.pending = null;//重置update链表 } hook.memoizedState = baseState;//赋值新的state return [baseState, dispatchAction.bind(null, hook.queue)];//useState的返回 } return { useState };})();function dispatchAction(queue, action) {//触发更新 const update = {//构建update action, next: null }; if (queue.pending === null) { update.next = update;//update的环状链表 } else { update.next = queue.pending.next;//新的update的next指向前一个update queue.pending.next = update;//前一个update的next指向新的update } queue.pending = update;//更新queue.pending isMount = false;//标记mount完结 workInProgressHook = fiber.memoizedState;//更新workInProgressHook schedule();//调度更新}function App() { let [count, setCount] = Dispatcher.useState(1); let [age, setAge] = Dispatcher.useState(10); return ( <> <p>Clicked {count} times</p> <button onClick={() => setCount(() => count + 1)}> Add count</button> <p>Age is {age}</p> <button onClick={() => setAge(() => age + 1)}> Add age</button> </> );}function schedule() { ReactDOM.render(<App />, document.querySelector("#root"));}schedule();

react源码解析13.hooks源码视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo hook调用入口 在hook源码中hook存在于Dispatcher中，Dispatcher就是一个对象，不同hook 调用的函数不一样，全局变量ReactCurrentDispatcher.current会依据是mount还是update赋值为HooksDispatcherOnMount或HooksDispatcherOnUpdate ReactCurrentDispatcher.current = current === null || current.memoizedState === null//mount or update ? HooksDispatcherOnMount : HooksDispatcherOnUpdate; const HooksDispatcherOnMount: Dispatcher = {//mount时 useCallback: mountCallback, useContext: readContext, useEffect: mountEffect, useImperativeHandle: mountImperativeHandle, useLayoutEffect: mountLayoutEffect, useMemo: mountMemo, useReducer: mountReducer, useRef: mountRef, useState: mountState, //...};const HooksDispatcherOnUpdate: Dispatcher = {//update时 useCallback: updateCallback, useContext: readContext, useEffect: updateEffect, useImperativeHandle: updateImperativeHandle, useLayoutEffect: updateLayoutEffect, useMemo: updateMemo, useReducer: updateReducer, useRef: updateRef, useState: updateState, //...};hook数据结构 在FunctionComponent中，多个hook会造成hook链表，保留在Fiber的memoizedState的上，而须要更新的Update保留在hook.queue.pending中 ...

一、组件类的毛病v16.8 版本引入了全新的 API，叫做 React Hooks. v16.8 版本之前，组件的规范写法是类（class）。上面是一个简略的组件类。 import React, { Component } from "react";export default class Button extends Component { constructor() { super(); this.state = { buttonText: "Click me, please" }; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(() => { return { buttonText: "Thanks, been clicked!" }; }); } render() { const { buttonText } = this.state; return <button onClick={this.handleClick}>{buttonText}</button>; }}这个组件类仅仅是一个按钮，但能够看到，它的代码曾经很"重"了。实在的 React App 由多个类依照层级，一层层形成，复杂度成倍增长。再退出 Redux，就变得更简单。 Redux 的作者 Dan Abramov 总结了组件类的几个毛病。大型组件很难拆分和重构，也很难测试。业务逻辑扩散在组件的各个办法之中，导致反复逻辑或关联逻辑。组件类引入了简单的编程模式，比方 render props 和高阶组件。二、函数组件React 团队心愿，组件不要变成简单的容器，最好只是数据流的管道。开发者依据须要，组合管道即可。 组件的最佳写法应该是函数，而不是类。不过之前的版本中函数定义组件 ...

1. PureComponent介绍PureComponent会对props和state进行浅比拟，跳过不必要的更新，进步组件性能。 2. demo举例应用Componentimport React, { Component } from "react";class Foo extends Component { render() { console.log("foo-render") const { num } = this.props; return <div>foo-{num}</div>; }}class App extends Component { state = { num: 0, }; handle = () => { this.setState({ num: 0, }); }; render() { const { num } = this.state; return ( <div> <button onClick={this.handle}>点我</button> <Foo num={num} /> </div> ); }}点击按钮，即便num值不变，组件Foo依然更新了，控制台打印了foo-render 应用PureComponentimport React, { PureComponent, Component } from "react";class Foo extends PureComponent { render() { console.log("foo-render") const { num } = this.props; return <div>foo-{num}</div>; }}只有num值扭转时，才会触发Foo组件render ...

基于zty 1 为什么要应用React原生JavaScript的毛病 原生JavaScript操作DOM繁琐，效率低（DOM-API操作UI）应用JavaScript间接操作DOM，浏览器会进行大量的重绘重排原生JavaScript没有组件化编码方案，代码复用率很低重绘(repaint)：当一个元素的外观产生扭转，但没有扭转布局,从新把元素外观绘制进去的过程，叫做重绘 重排(reflow)：当DOM的变动影响了元素的几何信息(DOM对象的地位和尺寸大小)，浏览器须要从新计算元素的几何属性，将其安放在界面中的正确地位，这个过程叫做重排重绘 重排 ：https://juejin.cn/post/684490... 开发迅速。React组件化的个性使得React能够在我的项目中大量复用封装好的组件，进步代码的复用率，缩小了反复写雷同代码的繁琐而无聊的工作原生的JavaScript操作DOM繁琐，效率低（DOM-API操作UI）应用JavaScript，包含jQuery间接操作DOM，浏览器会进行大量的重绘和重排（尽管jQuery简化了操作DOM的步骤，但仍然效率低下）原生的JavaScript没有组件化编码方案，代码复用率低生态绝对欠缺。React 起源于 Facebook 的外部我的项目，具备绝对稳固的保护，周边生态绝对欠缺，像各种的UI库，路由库等，能够在更少的工夫内实现更多的工作。有大公司作为背书。除了React的开发公司Faceboook大量应用React外，国内外还有很多大公司也广泛应用React，在国外有Paypal，Airbnb等，在国内有阿里，腾讯，字节跳动等。有弱小的开源社区。开源我的项目的社区十分重要，在社区开发者的奉献下会让一些开源我的项目变得越来越好，我的项目的issue的解决速度也会失去晋升，同时还会提供大量的周边技术工具和技术博客。模块化与组件化模块：向外提供特定性能的js程序, 个别就是一个js文件为什么要拆成模块：随着业务逻辑减少，代码越来越多且简单。作用：复用js, 简化js的编写, 进步js运行效率 组件：用来实现部分性能成果的代码和资源的汇合(html/css/js/image等等) 为什么要用组件： 一个界面的性能更简单 作用：复用编码, 简化我的项目编码, 进步运行效率 模块化：当利用的js都以模块来编写的, 这个利用就是一个模块化的利用组件化：当利用是以多组件的形式实现, 这个利用就是一个组件化的利用 2 React的定义React的定义：用于==构建用户界面==的==JavaScript库==。关键字： 构建用户界面:阐明React专一于视图的构建，既不是一个申请库，也不是一个打包工具，而是次要提供UI层面的解决方案。JavaScript库：这阐明React并不是一个框架，并不能解决我的项目中的所有问题，为了在我的项目中应用它，须要联合其余的库，例如Redux/React-router等来帮助提供残缺的解决方案。在这些周边生态的配合下能力组合成一个框架换句话来说，React所做的有三步 发送申请取得数据解决数据（过滤，整顿格局等）操作DOM出现页面也就是说React也能够定义为一个将数据渲染为HTML视图的开源JavaScript库。 3 React的个性申明式编程：命令式编程 VS 申明式编程： 简略来说，命令式编程就是通过代码来通知计算机去做什么。 而申明式编程是通过代码来通知计算机你想要做什么，让计算机想出如何去做。 举个生存中的例子就是：命令式编程：我想喝一个冰可乐，而后我就会对身边的XXX说：“XXX，你去厨房，关上冰箱，拿出一瓶冰可乐，关上之后送过来给我。”申明式编程：我想喝一个冰可乐，而后我就会对身边的XXX说：“XXX，我想喝冰可乐。”而具体他是怎么拿到的冰可乐，怎么送过来的，是下楼买的还是在冰箱里拿的，我并不关怀，我只关怀我喝冰可乐的需要是否失去了满足。 用代码来举个例子：如果我要在界面上展现一个按钮，并且点击按钮后会扭转该按钮的class。用DOM编程写的代码就是命令式编程：首先你要指挥浏览器，第一步先要找到id为container的节点，而后创立一个button element，接着给这个button增加一个class name，而后增加一个点击事件，最初将button增加到container节点里。这整个过程每一步操作都是命令式的，一步一步通知浏览器要做什么。 const container = document. getElementById ( "container" );const btn = document.createElement ("button");btn.className = "btn red " ;btn.textContent = "Demo" ;btn.onclick = function ( ) { if ( this.classList.contains ( "red" ) ) { this.classList.remove( "red" ); this.classList.add ( "blue" ); }else { this.classList.remove( "blue" ); this.classList.add ( "red" ); }};container.appendChild( btn);而要实现雷同性能，采纳申明式编程的React就简略得多了。首先咱们定义一个Button组件，在render函数里通过返回一个相似HTML的数据结构，通知React我要渲染一个Button，它是id为container的子节点。Button上的ClassName是动态变化的，当点击按钮时class要扭转，这样就能够了。至于render什么时候被执行，是如何渲染到页面上的，点击按钮之后classname是如何更新的，这些都不须要你关怀，你只须要通知React你心愿以后的UI应该是一个什么样的状态就能够了。class Button extends React. Component { state = { color: "red" }; handleChange =()=> { const color = this.state.color == "red" ? "blue" : "red" ;this.setState({ color }); }; render( ) { return ( <div id="container"> <button className={ `btn ${this.state.color}` } onclick={this.handleChange} > Demo </button> </div> ); }}组件化：React提供了一种全新的语法扩大，JSX。JSX创造性地将渲染逻辑和UI逻辑联合在了一起，而这个结合体在React中就被称为组件。一个页面由多个组件组成，甚至整个利用都能够视为一个组件，只不过是最大的组件。组件能够层层嵌套，一个组件能够由多个组件组成，一个大的组件由很多个小组件组成，这些小组件也有可能由更小的组件组成。同一个组件可能会被应用在不同的中央。组件化的呈现大幅度地晋升了代码地复用率，同时也扭转了前端开发人员的一个编程思维一次学会，随处编写：这句话的意思不是学会了想写什么就能够写什么，也不是说写一次想在哪里跑就在哪里跑，而是说学会后能够在很多中央应用React的语法来写代码，比方配合React DOM来编写web端的页面，配合React Native来写手机客户端APP，配合React 360开发VR界面等。React的灵活性是因为它本身的定位决定的。React是一个用于构建用户界面的JS库，对于React来说，这里的用户界面是一个形象的虚构的用户界面，其实就是一个形容页面状态的数据结构。web页面，挪动客户端页面，VR界面都是用户界面，只有配合相应的渲染器就能在不同的平台中展现正确的UI界面。艰深来说，咱们能够把React的执行后果设想成一个视频文件数据，在不同的播放器设施，咱们通过转换器将视频编译成不同的格局来让他们在不同的播放器上失常地播放。所以在写web端React时咱们要额定引入React DOM来做渲染。此外，React应用虚构DOM+优良的Diffing算法，尽量减少与实在DOM的交互，最小化页面重绘在 React Native中能够应用React语法进行挪动端开发应用虚构DOM+Diff算法，尽量减少与实在DOM的交互React高效的起因 ...

对于 Tailwind CSSTailwind CSS 就是一个 CSS 框架，正如你所晓得的 bootstrap，element ui，Antd，bulma。一样。将一些 css 款式封装好，用来减速咱们开发的一个工具 。 然而它有与上述的框架有所不同，上述的框架更多的是一种可复用性的组件，例如一个按钮、一个表单、或者一个表格等等，他们封装了大量的罕用 UI 组件。然而 Tailwind CSS 与他们有实质的不同，它并没有封装某个具体的组件，而是封装了大量可复用的 css 款式。antd 等框架的劣势是在你须要某种实现某一个 UI 组件的时候，能够拿来即用，能够疾速高效的交付一个我的项目，然而也有其毛病，他们都封装都带的款式，而当你想要自定义一些个性化的款式的时候，就会发现这种操作比拟艰难，自由度很低，强行去批改它的款式会很难看，而且这些操作也会不优雅。 而 Tailwind CSS 则解决了这样的弊病，他自由度极高，能够得心应手的实现咱们想要的成果。咱们仅需将按咱们的需要去引入一个个根本的款式，也能够退出一些本人的款式。更值得一提的是，尽管他的自由度极高，然而他的设计却能够保障下我的项目的中组件的格调一致性，并且其自带的一些业余的色彩体系，也是十分值得学习和应用的。同样的也有本人的毛病，首先是他的引入形式，是通过 class 去进行引入，这将导致某些组件或者元素的 class 十分的长，html 文件里就显得很芜杂；另外还有他的学习老本也比拟高（当然这是每一种框架肯定会呈现的），初学者应用的时候，须要一直的去查看文档（当然也能够应用 vscode 插件，学会其语义化规定还是挺不便的）；最初，因为他是一些纯 CSS，短少与 JavaScript 的联合，所以很多须要配合 JavaScript 实现的组件，如下菜单等等，均没有方法通过纯正的 Tailwind CSS 去实现这样的成果。 装置和配置创立 react 我的项目npx create-react-app tailwindcss_demo --template typyscript初始化 tailwind CSS装置 Tailwind 以及其它依赖项:npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9据说 Create React App 尚未反对 PostCSS 8，所以须要装置 Tailwind CSS v2.0 PostCSS 7 兼容性版本。装置和配置 CRACOnpm install @craco/craco装置结束后，更新 package.json 文件中的 scripts，将 eject 以外的所有脚本都用 craco 代替 react-scripts。 ...

react源码解析7.Fiber架构视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo Fiber的深度了解react15在render阶段的reconcile是不可打断的，这会在进行大量节点的reconcile时可能产生卡顿，因为浏览器所有的工夫都交给了js执行，并且js的执行时单线程。为此react16之后就有了scheduler进行工夫片的调度，给每个task（工作单元）肯定的工夫，如果在这个工夫内没执行完，也要交出执行权给浏览器进行绘制和重排，所以异步可中断的更新须要肯定的数据结构在内存中来保留工作单元的信息，这个数据结构就是Fiber。 那么有了Fiber这种数据结构后，能实现哪些事件呢， 工作单元 工作合成 ：Fiber最重要的性能就是作为工作单元，保留原生节点或者组件节点对应信息（包含优先级），这些节点通过指针的形似造成Fiber树增量渲染：通过jsx对象和current Fiber的比照，生成最小的差别补丁，利用到实在节点上依据优先级暂停、持续、排列优先级：Fiber节点上保留了优先级，能通过不同节点优先级的比照，达到工作的暂停、持续、排列优先级等能力，也为下层实现批量更新、Suspense提供了根底保留状态：因为Fiber能保留状态和更新的信息，所以就能实现函数组件的状态更新，也就是hooksFiber的数据结构Fiber的自带的属性如下： //ReactFiber.old.jsfunction FiberNode( tag: WorkTag, pendingProps: mixed, key: null | string, mode: TypeOfMode,) { //作为动态的数据结构 保留节点的信息 this.tag = tag;//对应组件的类型 this.key = key;//key属性 this.elementType = null;//元素类型 this.type = null;//func或者class this.stateNode = null;//实在dom节点 //作为fiber数架构 连接成fiber树 this.return = null;//指向父节点 this.child = null;//指向child this.sibling = null;//指向兄弟节点 this.index = 0; this.ref = null; //用作为工作单元 来计算state this.pendingProps = pendingProps; this.memoizedProps = null; this.updateQueue = null; this.memoizedState = null; this.dependencies = null; this.mode = mode; //effect相干 this.effectTag = NoEffect; this.nextEffect = null; this.firstEffect = null; this.lastEffect = null; //优先级相干的属性 this.lanes = NoLanes; this.childLanes = NoLanes; //current和workInProgress的指针 this.alternate = null;}Fiber双缓存当初咱们晓得了Fiber能够保留实在的dom，实在dom对应在内存中的Fiber节点会造成Fiber树，这颗Fiber树在react中叫current Fiber，也就是以后dom树对应的Fiber树，而正在构建Fiber树叫workInProgress Fiber，这两颗树的节点通过alternate相连. ...

react源码解析6.legacy模式和concurrent模式视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo react启动的模式react有3种模式进入主体函数的入口，咱们能够从 react官网文档 应用 Concurrent 模式（实验性）中比照三种模式： legacy 模式： ReactDOM.render(<App />, rootNode)。这是以后 React app 应用的形式。以后没有打算删除本模式，然而这个模式可能不反对这些新性能。blocking 模式： ReactDOM.createBlockingRoot(rootNode).render(<App />)。目前正在试验中。作为迁徙到 concurrent 模式的第一个步骤。concurrent 模式： ReactDOM.createRoot(rootNode).render(<App />)。目前在试验中，将来稳固之后，打算作为 React 的默认开发模式。这个模式开启了所有的新性能。个性比照： legacy 模式在合成事件中有主动批处理的性能，但仅限于一个浏览器工作。非 React 事件想应用这个性能必须应用 unstable_batchedUpdates。在 blocking 模式和 concurrent 模式下，所有的 setState 在默认状况下都是批处理的。会在开发中收回正告 不同模式在react运行时的含意legacy模式是咱们罕用的，它构建dom的过程是同步的，所以在render的reconciler中，如果diff的过程特地耗时，那么导致的后果就是js始终阻塞高优先级的工作(例如用户的点击事件)，体现为页面的卡顿，无奈响应。 concurrent Mode是react将来的模式，它用工夫片调度实现了异步可中断的工作，依据设施性能的不同，工夫片的长度也不一样，在每个工夫片中，如果工作到了过期工夫，就会被动让出线程给高优先级的工作。这部分将在第15节 scheduler&lane模型 。 两种模式函数次要执行过程1.次要执行流程： 2.具体函数调用过程： 用demo_0跟着视频调试更加清晰，黄色局部是次要工作是创立fiberRootNode和rootFiber，红色局部是创立Update，蓝色局部是调度render阶段的入口函数 3.legacy模式： render调用legacyRenderSubtreeIntoContainer，最初createRootImpl会调用到createFiberRoot创立fiberRootNode,而后调用createHostRootFiber创立rootFiber，其中fiberRootNode是整个我的项目的的根节点，rootFiber是以后利用挂在的节点，也就是ReactDOM.render调用后的根节点 //最上层的节点是整个我的项目的根节点fiberRootNodeReactDOM.render(<App />, document.getElementById("root"));//rootFiberReactDOM.render(<App />, document.getElementById("root"));//rootFiber ...

react源码解析10.commit阶段视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 在render阶段的开端会调用commitRoot(root);进入commit阶段，这里的root指的就是fiberRoot，而后会遍历render阶段生成的effectList，effectList上的Fiber节点保留着对应的props变动。之后会遍历effectList进行对应的dom操作和生命周期、hooks回调或销毁函数，各个函数做的事件如下 在commitRoot函数中其实是调度了commitRootImpl函数 //ReactFiberWorkLoop.old.jsfunction commitRoot(root) { var renderPriorityLevel = getCurrentPriorityLevel(); runWithPriority$1(ImmediatePriority$1, commitRootImpl.bind(null, root, renderPriorityLevel)); return null;}在commitRootImpl的函数中次要分三个局部： commit阶段前置工作 调用flushPassiveEffects执行完所有effect的工作初始化相干变量赋值firstEffect给前面遍历effectList用 //ReactFiberWorkLoop.old.jsdo { // 调用flushPassiveEffects执行完所有effect的工作 flushPassiveEffects(); } while (rootWithPendingPassiveEffects !== null); //... // 重置变量 finishedWork指rooFiber root.finishedWork = null; //重置优先级 root.finishedLanes = NoLanes; // Scheduler回调函数重置 root.callbackNode = null; root.callbackId = NoLanes; // 重置全局变量 if (root === workInProgressRoot) { workInProgressRoot = null; workInProgress = null; workInProgressRootRenderLanes = NoLanes; } else { } //rootFiber可能会有新的副作用 将它也退出到effectLis let firstEffect; if (finishedWork.effectTag > PerformedWork) { if (finishedWork.lastEffect !== null) { finishedWork.lastEffect.nextEffect = finishedWork; firstEffect = finishedWork.firstEffect; } else { firstEffect = finishedWork; } } else { firstEffect = finishedWork.firstEffect; }mutation阶段 ...

react源码解析9.diff算法视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 在render阶段更新Fiber节点时，咱们会调用reconcileChildFibers比照current Fiber和jsx对象构建workInProgress Fiber，这里current Fiber是指以后dom对应的fiber树，jsx是class组件render办法或者函数组件的返回值。 在reconcileChildFibers中会依据newChild的类型来进入单节点的diff或者多节点diff //ReactChildFiber.old.jsfunction reconcileChildFibers( returnFiber: Fiber, currentFirstChild: Fiber | null, newChild: any,): Fiber | null { const isObject = typeof newChild === 'object' && newChild !== null; if (isObject) { switch (newChild.$$typeof) { case REACT_ELEMENT_TYPE: //繁多节点diff return placeSingleChild( reconcileSingleElement( returnFiber, currentFirstChild, newChild, lanes, ), ); } } //... if (isArray(newChild)) { //多节点diff return reconcileChildrenArray( returnFiber, currentFirstChild, newChild, lanes, ); } // 删除节点 return deleteRemainingChildren(returnFiber, currentFirstChild);}diff过程的次要流程如下图： ...

react源码解析20.总结&面试题视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 总结至此咱们介绍了react的理念，如果解决cpu和io的瓶颈，要害是实现异步可中断的更新 咱们介绍了react源码架构（ui=fn(state)），从scheduler开始调度（依据过期事件判断优先级），通过render阶段的深度优先遍历造成effectList（两头会执行reconcile|diff），交给commit解决实在节点（两头交叉生命周期和局部hooks），而这些调度的过程都离不开Fiber的撑持，Fiber是工作单元，也是节点优先级、更新UpdateQueue、节点信息的载体，Fiber双缓存则提供了比照前后节点更新的根底。咱们还介绍了jsx是React.createElement的语法糖。Lane模型则提供了更细粒度的优先级比照和计算，这所有都为concurrent mode提供了根底，在这之上变能够实现Suspense和batchedUpdate（16、17版本实现的逻辑不一样），18章context的valueStack和valueCursor在整个架构中运行机制，19章介绍了新版事件零碎，包含事件生产、监听和触发 面试题简答（详见视频源码角度解说）jsx和Fiber有什么关系 答：mount时通过jsx对象（调用createElement的后果）调用createFiberFromElement生成Fiberupdate时通过reconcileChildFibers或reconcileChildrenArray比照新jsx和老的Fiber（current Fiber）生成新的wip Fiber树 react17之前jsx文件为什么要申明import React from 'react'，之后为什么不须要了 答：jsx通过编译之后编程React.createElement，不引入React就会报错，react17扭转了编译形式，变成了jsx.createElement function App() { return <h1>Hello World</h1>;}//转换后import {jsx as _jsx} from 'react/jsx-runtime';function App() { return _jsx('h1', { children: 'Hello world' });}Fiber是什么，它为什么能进步性能 答：Fiber是一个js对象，能承载节点信息、优先级、updateQueue，同时它还是一个工作单元。 Fiber双缓存能够在构建好wip Fiber树之后切换成current Fiber，内存中间接一次性切换，进步了性能Fiber的存在使异步可中断的更新成为了可能，作为工作单元，能够在工夫片内执行工作，没工夫了交还执行权给浏览器，下次工夫片继续执行之前暂停之后返回的FiberFiber能够在reconcile的时候进行相应的diff更新，让最初的更新利用在实在节点上hooks 为什么hooks不能写在条件判断中 答：hook会按顺序存储在链表中，如果写在条件判断中，就没法放弃链表的程序 状态/生命周期 setState是同步的还是异步的 答：legacy模式下：命中batchedUpdates时是异步 未命中batchedUpdates时是同步的 concurrent模式下：都是异步的 componentWillMount、componentWillMount、componentWillUpdate为什么标记UNSAFE 答：新的Fiber架构能在scheduler的调度下实现暂停持续，排列优先级，Lane模型能使Fiber节点具备优先级，在高优先级的工作打断低优先级的工作时，低优先级的更新可能会被跳过，所有以上生命周期可能会被执行屡次，和之前版本的行为不统一。 组件 react元素$$typeof属性什么 答：用来示意元素的类型，是一个symbol类型 ...

react源码解析19.手写迷你版react视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 迷你react和真正的源码有哪些区别呢在render阶段咱们遍历了整颗Fiber树，在源码中如果节点什么都没扭转会命中优化的逻辑，而后跳过这个节点的遍历commit咱们也遍历了整颗Fiber树，源码中只遍历带有effect的Fiber节点，也就是遍历effectList每次遍历的时候咱们都是新建节点，源码中某些条件会复用节点没有用到优先级第一步：渲染器和入口函数 const React = { createElement, render,};const container = document.getElementById("root");const updateValue = (e) => { rerender(e.target.value);};const rerender = (value) => { const element = ( <div> <input onInput={updateValue} value={value} /> <h2>Hello {value}</h2> </div> ); React.render(element, container);};rerender("World");第二步：创立dom节点函数 /创立elementfunction createElement(type, props, ...children) { return { type, props: { ...props, children: children.map((child) => (typeof child === "object" ? child : createTextElement(child))), }, };}//创立text类型function createTextElement(text) { return { type: "TEXT_ELEMENT", props: { nodeValue: text, children: [], }, };}//创立domfunction createDom(fiber) { const dom = fiber.type === "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(fiber.type); updateDom(dom, {}, fiber.props); return dom;}第三步：更新节点函数 ...

react源码解析1.开篇介绍和面试题视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 怎么学习react源码作为前端最罕用的js库之一，相熟react源码成了高级或资深前端工程师必备的能力，如果你不想停留在api的应用层面或者想在前端技能的深度上有所突破，那相熟react源码将是你提高的很好的形式。 react的纯正体现在它的api上，一切都是围绕setState状态更新进行的，然而外部的逻辑却经验了很大的重构和变动，而且代码量也不小，如果只是从源码文件和函数来浏览，那会很难以了解react的渲染流程。优良工程师几年工夫打造的库，必然有借鉴之处，那么咱们应该怎么学习react源码呢。 首先，咱们能够从函数调用栈动手，理清react的各个模块的性能和它们调用的程序，盖房子一样，先搭好架子，对源码有个整体的意识，而后再看每个模块的细节，第一遍的时候切忌纠结每个函数实现的细节，陷入各个函数的深度调用中。其次能够联合一些demo和本人画图了解，react源码中设计大量的链表操作，画图是一个很好的了解指针操作的形式。源码里也有一些英文正文，能够依据正文或者依据此react源码解析文章进行了解。 相熟react源码并不是久而久之的事，想精进本人的技术，必须花工夫才行。 课程特色本课程遵循react v17.0.1源码的核心思想，目标是打造一门通俗易懂的react源码解析系列文章。课程从源码的各个模块开始，联合大量demo、示例图解和视频教程，带着大家一步一步调试react源码，课程也会齐全遵循react17手写hook和精简版的react不便大家的了解，随着react大版本的更新，此课程也会始终更新。 课程构造 课程播种为什么要学习react源码呢，你是应用了api很久，停留在框架应用层面还是会被动去理解框架的逻辑和运行形式呢。跟着课程走，了解起来不费劲，你将播种： 面试加分：大厂前端岗都要求相熟框架底层原理，也是面试必问环节，相熟react源码会为你的面试加分，也会为你的谈薪流程减少不少筹码坚固基础知识：在源码的scheduler中应用了小顶堆 这种数据结构，调度的实现则应用了messageChannel，在render阶段的reconciler中则应用了fiber、update、链表 这些构造，lane模型应用了二进制掩码，咱们也会介绍diff算法怎么升高比照复杂度。学习本课程也顺便坚固了数据结构和算法、事件循环。日常开发晋升效率：相熟react源码之后，你对react的运行流程有了新的意识，在日常的开发中，置信你对组件的性能优化、react应用技巧和解决bug会更加得心应手。置信学完课程之后，你对react的了解肯定会回升一个品位，甚至会超过大多数面试官了 常见面试题（带上问题学习吧）以下这些问题可能你曾经有答案了，然而你能从源码角度答复进去吗。 jsx和Fiber有什么关系react17之前jsx文件为什么要申明import React from 'react'，之后为什么不须要了Fiber是什么，它为什么能进步性能hooks 为什么hooks不能写在条件判断中状态/生命周期 setState是同步的还是异步的componentWillMount、componentWillMount、componentWillUpdate为什么标记UNSAFE组件 react元素$$typeof属性什么react怎么辨别Class组件和Function组件函数组件和类组件的相同点和不同点开放性问题 说说你对react的了解/请说一下react的渲染过程聊聊react生命周期简述diff算法react有哪些优化伎俩react为什么引入jsx说说virtual Dom的了解你对合成事件的了解 咱们写的事件是绑定在dom上么，如果不是绑定在哪里？为什么咱们的事件手动绑定this(不是箭头函数的状况)为什么不能用 return false 来阻止事件的默认行为？react怎么通过dom元素，找到与之对应的 fiber对象的？解释后果和景象 点击Father组件的div，Child会打印Child吗 function Child() { console.log('Child'); return <div>Child</div>;}function Father(props) { const [num, setNum] = React.useState(0); return ( <div onClick={() => {setNum(num + 1)}}> {num} {props.children} </div> );}function App() { return ( <Father> <Child/> </Father> );}const rootEl = document.querySelector("#root");ReactDOM.render(<App/>, rootEl);打印程序是什么 ...

react源码解析12.状态更新流程视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo setState&forceUpdate在react中触发状态更新的几种形式： ReactDOM.renderthis.setStatethis.forceUpdateuseStateuseReducer咱们重点看下重点看下this.setState和this.forceUpdate，hook在第13章讲 this.setState内调用this.updater.enqueueSetState，次要是将update退出updateQueue中 //ReactBaseClasses.jsComponent.prototype.setState = function (partialState, callback) { if (!(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null)) { { throw Error( "setState(...): takes an object of state variables to update or a function which returns an object of state variables." ); } } this.updater.enqueueSetState(this, partialState, callback, 'setState');};//ReactFiberClassComponent.old.jsenqueueSetState(inst, payload, callback) { const fiber = getInstance(inst);//fiber实例 const eventTime = requestEventTime(); const suspenseConfig = requestCurrentSuspenseConfig(); const lane = requestUpdateLane(fiber, suspenseConfig);//优先级 const update = createUpdate(eventTime, lane, suspenseConfig);//创立update update.payload = payload; if (callback !== undefined && callback !== null) { //赋值回调 update.callback = callback; } enqueueUpdate(fiber, update);//update退出updateQueue scheduleUpdateOnFiber(fiber, lane, eventTime);//调度update}enqueueUpdate用来将update退出updateQueue队列 ...

react源码解析11.生命周期调用程序视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 各阶段生命周期执行状况函数组件hooks的周期会在hooks章节解说，这一章的使命周期次要针对类组件，各阶段生命周期执行状况看下图： render阶段： mount时：组件首先会经验constructor、getDerivedStateFromProps、componnetWillMount、renderupdate时：组件首先会经验componentWillReceiveProps、getDerivedStateFromProps、shouldComponentUpdate、rendererror时：会调用getDerivedStateFromErrorcommit阶段 mount时：组件会经验componnetDidMountupdate时：组件会调用getSnapshotBeforeUpdate、componnetDidUpdateunMount时：调用componnetWillUnmounterror时：调用componnetDidCatch其中红色的局部不倡议应用，须要留神的是commit阶段生命周期在mutation各个子阶段的执行程序，能够温习上一章 接下来依据一个例子来解说在mount时和update时更新的具体程序： mount时：首先会依照深度优先的形式，顺次构建wip Fiber节点而后切换成current Fiber，在render阶段会顺次执行各个节点的constructor、getDerivedStateFromProps/componnetWillMount、render，在commit阶段，也就是深度优先遍历向上冒泡的时候顺次执行节点的componnetDidMountupdate时：同样会深度优先构建wip Fiber树，在构建的过程中会diff子节点，在render阶段，如果返现有节点的变动，例如上图的c2，那就标记这个节点Update Flag，而后执行getDerivedStateFromProps和render，在commit阶段会顺次执行节点的getSnapshotBeforeUpdate、componnetDidUpdate

面试官:useLayoutEffect和useEffect的区别hello，这里是潇晨，大家面试的过程中有没有遇到过这样的问题呢，useLayoutEffect和useEffect的区别是什么，大家可能会答复useEffect是异步的，useLayoutEffect是同步的，这样答复面试官真的会称心慢，咱们须要说分明他们在源码中的调用机会。 先来看个例子：点击触发更新之后，如果count之前的状态是0，咱们随机生成一个数字，在阻塞一段时间，在设置count位随机值，看看在useEffect和useLayoutEffect这两种状况下会有什么不同 import React, { useLayoutEffect, useState, useEffect } from "react";export default function App() { const [count, setCount] = useState(0); //用 useLayoutEffect 试试 useEffect(() => { if (count === 0) { const randomNum = Math.random() * 100;//随机生成一个数字 const now = performance.now(); while (performance.now() - now < 100) {//阻塞一段时间 console.log('blocking...'); } setCount(randomNum);//从新设置状态，设置成随机数 } }, [count]); return <div onClick={() => setCount(0)}>{count}</div>;}//在useEffect的状况下，一直点击触发更新，偶然会显示0//在useLayoutEffect的状况下，一直点击触发更新，不会偶现0在源码中不论首次渲染还是更新的时候都会经验一个阶段叫commit阶段，这个阶段次要的工作就是解决一些钩子函数、生命周期、遍历render阶段造成的EffectList链表，将带有副作用的Fiber节点利用到实在节点上，如果对render阶段不理解能够参阅往期文章 render阶段 ，上面这张图是commit阶段源码的结构图，咱们具体的解说一下。 在commitRootImpl的函数中次要分三个局部： commit阶段前置工作mutation阶段 调用commitBeforeMutationEffects，scheduleCallback调度执行flushPassiveEffects调用commitMutationEffects，解决相干的副作用，操作实在节点useLayoutEffect的销毁函数在这个函数中执行调用commitLayoutEffects，调用commitLayoutEffects的回调函数，这个时候副作用曾经利用到实在节点了，所以能拿到最新的节点。在commit阶段完结之后flushPassiveEffects执行useEffect的销毁函数和回调函数。commit阶段收尾工作所以useLayout/componentDidMount和useEffect的区别是什么？ 答：他们在commit阶段不同机会执行，useEffect在commit阶段结尾异步调用，useLayout/componentDidMount同步调用 具体源码调试视频（高效学习）:点击学习往期react源码解析文章：1.开篇介绍和面试题 2.react的设计理念 ...

面试官:react中的setState是同步的还是异步的hello，这里是潇晨，大家在面试的过程是不是常常会遇到这样的问题，react的setState是同步的还是异步的，这个问题答复的时候肯定要残缺，来看上面这几个例子： 例子1：点击button触发更新，在handle函数中会调用两次setState export default class App extends React.Component { state = { num: 0, }; updateNum = () => { console.log("before", this.state.num); this.setState({ num: this.state.num + 1 }); this.setState({ num: this.state.num + 1 }); console.log("after", this.state.num); }; render() { const { num } = this.state; console.log("render", num); return <button onClick={this.updateNum}>hello {num}</button>; }}//打印后果//render 0//before 0//after 0//render 1例子2:例子1的两次setState在setTimeout回调中执行 export default class App extends React.Component { state = { num: 0, }; updateNum = () => { console.log("before", this.state.num); setTimeout(() => { this.setState({ num: this.state.num + 1 }); this.setState({ num: this.state.num + 1 }); console.log("after", this.state.num); }, 0); }; render() { const { num } = this.state; console.log("render", num); return <button onClick={this.updateNum}>hello {num}</button>; }}//打印后果//render 0//before 0//render 1//render 2//after 2例子3:用unstable_batchedUpdates在setTimout中执行，unstable_batchedUpdates的回调函数中调用两次setState ...

应用 create-react-app 脚手架新建我的项目后，启动我的项目浏览器报错：Uncaught TypeError: Cannot read property 'forEach' of undefined at Object.injectIntoGlobalHook 这是因为React网页调试工具是老版本的，与新的脚手架有抵触导致的解决办法1：进入谷歌拓展程序，敞开或移除React Developer Tools扩大解决办法2：进入 我的项目目录\node_modules\@pmmmwh\react-refresh-webpack-plugin\client\ReactRefreshEntry.js 屏蔽掉下图中的 RefreshRuntime.injectIntoGlobalHook(safeThis); 而后保留=>重启我的项目 就OK啦 兄弟姐妹们，点波关注吧，一起分享乏味的技术！ 掘金： https://juejin.cn/user/303430... 全副原创好文 CSDN： https://blog.csdn.net/qq_4275... 全副原创好文 segmentfault 思否： https://segmentfault.com/u/ja... 全副原创好文 博客园 ：https://www.cnblogs.com/Jason... 全副原创好文

创立react我的项目create-react-app mobx-demo cd my-app npm run start应用react-app-rewirednpm install customize-cra react-app-rewired @babel/plugin-proposal-decorators --save在你的根目录即 和src同级的中央新建js文件 config-overrides.js 粘贴下方代码:const{override,addDecoratorsLegacy}=require('customize-cra');module.exports=override(addDecoratorsLegacy());批改package.json 的scripts如下:;) "scripts":{ "start":"react-app-rewired start", "build":"react-app-rewired build", "test":"react-app-rewired test", "eject":"react-app-rewired eject"}兄弟姐妹们，点波关注吧，一起分享乏味的技术！ 掘金： https://juejin.cn/user/303430... 全副原创好文 CSDN： https://blog.csdn.net/qq_4275... 全副原创好文 segmentfault 思否： https://segmentfault.com/u/ja... 全副原创好文 博客园 ：https://www.cnblogs.com/Jason... 全副原创好文

react源码解析5.jsx&外围api视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo virtual Dom是什么一句话概括就是，用js对象示意dom信息和构造，更新时从新渲染更新后的对象对应的dom，这个对象就是React.createElement()的返回后果 virtual Dom是一种编程形式，它以对象的模式保留在内存中，它形容了咱们dom的必要信息，并且用相似react-dom等模块与实在dom同步，这一过程也叫协调(reconciler)，这种形式能够申明式的渲染相应的ui状态，让咱们从dom操作中解放出来，在react中是以fiber树的模式寄存组件树的相干信息，在更新时能够增量渲染相干dom，所以fiber也是virtual Dom实现的一部分 为什么要用virtual Dom大量的dom操作慢，很小的更新都有可能引起页面的重新排列，js对象优于在内存中，解决起来更快，能够通过diff算法比拟新老virtual Dom的差别，并且批量、异步、最小化的执行dom的变更，以进步性能 另外就是能够跨平台，jsx --> ReactElement对象 --> 实在节点，有中间层的存在，就能够在操作实在节点之前进行对应的解决，解决的后果反映到实在节点上，这个实在节点能够是浏览器环境，也能够是Native环境 virtual Dom真的快吗？其实virtual Dom只是在更新的时候快，在利用初始的时候不肯定快 const div = document.createElement('div');let str = ''for(let k in div){ str+=','+k}console.log(str) jsx&createElementjsx能够申明式的形容视图，晋升开发效率，通过babel能够转换成React.createElement()的语法糖，也是js语法的扩大。 jsx是ClassComponent的render函数或者FunctionComponent的返回值，能够用来示意组件的内容，在通过babel编译之后，最初会被编译成React.createElement，这就是为什么jsx文件要申明import React from 'react'的起因（react17之后不必导入），你能够在 babel编译jsx 站点查看jsx被编译后的后果 React.createElement的源码中做了如下几件事 解决config，把除了保留属性外的其余config赋值给props把children解决后赋值给props.children解决defaultProps调用ReactElement返回一个jsx对象(virtual-dom)//ReactElement.jsexport function createElement(type, config, children) { let propName; const props = {}; let key = null; let ref = null; let self = null; let source = null; if (config != null) { //解决config，把除了保留属性外的其余config赋值给props //... } const childrenLength = arguments.length - 2; //把children解决后赋值给props.children //... //解决defaultProps //... return ReactElement( type, key, ref, self, source, ReactCurrentOwner.current, props, );}const ReactElement = function(type, key, ref, self, source, owner, props) { const element = { $$typeof: REACT_ELEMENT_TYPE,//示意是ReactElement类型 type: type,//class或function key: key,//key ref: ref,//ref属性 props: props,//props _owner: owner, }; return element;};$$typeof示意的是组件的类型，例如在源码中有一个查看是否是非法Element的函数，就是根object.$$typeof === REACT_ELEMENT_TYPE来判断的 ...

react源码解析3.react源码架构视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 这一章的目标是让咱们认识一下react源码架构和各个模块。 在真正的代码学习之前，咱们须要在大脑中有一个react源码的地图，晓得react渲染的大抵流程和框架，这样能力从上帝视角看react是怎么更新的，来吧少年。 react的外围能够用ui=fn(state)来示意，更具体能够用 const state = reconcile(update);const UI = commit(state);下面的fn能够分为如下一个局部： Scheduler（调度器）： 排序优先级，让优先级高的工作先进行reconcileReconciler（协调器）： 找出哪些节点产生了扭转，并打上不同的Flags（旧版本react叫Tag）Renderer（渲染器）： 将Reconciler中打好标签的节点渲染到视图上一图胜千言： jsxjsx是js语言的扩大，react通过babel词法解析（具体怎么转换能够查阅babel相干插件），将jsx转换成React.createElement，React.createElement办法返回virtual-dom对象（内存中用来形容dom阶段的对象），所有jsx实质上就是React.createElement的语法糖，它能申明式的编写咱们想要组件呈现出什么样的ui成果。在第5章jsx咱们会具体介绍jsx解析之后的后果。 Fiber双缓存Fiber对象下面保留了包含这个节点的属性、类型、dom等，Fiber通过child、sibling、return（指向父节点）来造成Fiber树，还保留了更新状态时用于计算state的updateQueue，updateQueue是一种链表构造，下面可能存在多个未计算的update，update也是一种数据结构，下面蕴含了更新的数据、优先级等，除了这些之外，下面还有和副作用无关的信息。 双缓存是指存在两颗Fiber树，current Fiber树形容了以后出现的dom树，workInProgress Fiber是正在更新的Fiber树，这两颗Fiber树都是在内存中运行的，在workInProgress Fiber构建实现之后会将它作为current Fiber利用到dom上 在mount时（首次渲染），会依据jsx对象（Class Component或的render函数者Function Component的返回值），构建Fiber对象，造成Fiber树，而后这颗Fiber树会作为current Fiber利用到实在dom上，在update（状态更新时如setState）的时候，会依据状态变更后的jsx对象和current Fiber做比照造成新的workInProgress Fiber，而后workInProgress Fiber切换成current Fiber利用到实在dom就达到了更新的目标，而这一切都是在内存中产生的，从而缩小了对dom好性能的操作。 例如上面代码的Fiber双缓存构造如下，在第7章会具体解说 function App() { const [count, setCount] = useState(0); return ( <> <h1 onClick={() => { // debugger; setCount(() => count + 1); }} > <p title={count}>{count}</p> xiaochen </h1> </> )}ReactDOM.render(<App />, document.getElementById("root")); ...

react源码解析8.render阶段视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo render阶段的入口render阶段的次要工作是构建Fiber树和生成effectList，在第5章中咱们晓得了react入口的两种模式会进入performSyncWorkOnRoot或者performConcurrentWorkOnRoot，而这两个办法别离会调用workLoopSync或者workLoopConcurrent //ReactFiberWorkLoop.old.jsfunction workLoopSync() { while (workInProgress !== null) { performUnitOfWork(workInProgress); }}function workLoopConcurrent() { while (workInProgress !== null && !shouldYield()) { performUnitOfWork(workInProgress); }}这两函数的区别是判断条件是否存在shouldYield的执行，如果浏览器没有足够的工夫，那么会终止while循环，也不会执行前面的performUnitOfWork函数，天然也不会执行前面的render阶段和commit阶段，这部分属于scheduler的知识点，咱们在第15章解说。 workInProgress：新创建的workInProgress fiberperformUnitOfWork：workInProgress fiber和会和曾经创立的Fiber连接起来造成Fiber树。这个过程相似深度优先遍历，咱们暂且称它们为‘捕捉阶段’和‘冒泡阶段’。伪代码执行的过程大略如下 function performUnitOfWork(fiber) { if (fiber.child) { performUnitOfWork(fiber.child);//beginWork } if (fiber.sibling) { performUnitOfWork(fiber.sibling);//completeWork }}render阶段整体执行流程用demo_0看视频调试 捕捉阶段从根节点rootFiber开始，遍历到叶子节点，每次遍历到的节点都会执行beginWork，并且传入以后Fiber节点，而后创立或复用它的子Fiber节点，并赋值给workInProgress.child。冒泡阶段在捕捉阶段遍历到子节点之后，会执行completeWork办法，执行实现之后会判断此节点的兄弟节点存不存在，如果存在就会为兄弟节点执行completeWork，当全副兄弟节点执行完之后，会向上‘冒泡’到父节点执行completeWork，直到rootFiber。示例，demo_0调试 function App() { return ( <> <h1> <p>count</p> xiaochen </h1> </> )}ReactDOM.render(<App />, document.getElementById("root"));当执行完深度优先遍历之后造成的Fiber树： ...

react源码解析7.Fiber架构视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo Fiber的深度了解react15在render阶段的reconcile是不可打断的，这会在进行大量节点的reconcile时可能产生卡顿，因为浏览器所有的工夫都交给了js执行，并且js的执行时单线程。为此react16之后就有了scheduler进行工夫片的调度，给每个task（工作单元）肯定的工夫，如果在这个工夫内没执行完，也要交出执行权给浏览器进行绘制和重排，所以异步可中断的更新须要肯定的数据结构在内存中来保留工作单元的信息，这个数据结构就是Fiber。 那么有了Fiber这种数据结构后，能实现哪些事件呢， 工作单元 工作合成 ：Fiber最重要的性能就是作为工作单元，保留原生节点或者组件节点对应信息（包含优先级），这些节点通过指针的形似造成Fiber树增量渲染：通过jsx对象和current Fiber的比照，生成最小的差别补丁，利用到实在节点上依据优先级暂停、持续、排列优先级：Fiber节点上保留了优先级，能通过不同节点优先级的比照，达到工作的暂停、持续、排列优先级等能力，也为下层实现批量更新、Suspense提供了根底保留状态：因为Fiber能保留状态和更新的信息，所以就能实现函数组件的状态更新，也就是hooksFiber的数据结构Fiber的自带的属性如下： //ReactFiber.old.jsfunction FiberNode( tag: WorkTag, pendingProps: mixed, key: null | string, mode: TypeOfMode,) { //作为动态的数据结构 保留节点的信息 this.tag = tag;//对应组件的类型 this.key = key;//key属性 this.elementType = null;//元素类型 this.type = null;//func或者class this.stateNode = null;//实在dom节点 //作为fiber数架构 连接成fiber树 this.return = null;//指向父节点 this.child = null;//指向child this.sibling = null;//指向兄弟节点 this.index = 0; this.ref = null; //用作为工作单元 来计算state this.pendingProps = pendingProps; this.memoizedProps = null; this.updateQueue = null; this.memoizedState = null; this.dependencies = null; this.mode = mode; //effect相干 this.effectTag = NoEffect; this.nextEffect = null; this.firstEffect = null; this.lastEffect = null; //优先级相干的属性 this.lanes = NoLanes; this.childLanes = NoLanes; //current和workInProgress的指针 this.alternate = null;}Fiber双缓存当初咱们晓得了Fiber能够保留实在的dom，实在dom对应在内存中的Fiber节点会造成Fiber树，这颗Fiber树在react中叫current Fiber，也就是以后dom树对应的Fiber树，而正在构建Fiber树叫workInProgress Fiber，这两颗树的节点通过alternate相连. ...

react源码解析18.react事件零碎视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 从一个bug说起上面这个demo_13在react17和react16中有什么不同吗？代码也很简略，模仿一个modal框，点击显示呈现，点击其余中央，相当于点击了mask，modal隐没，因为react事件都是委托到下层，所以须要在handleClick阻止冒泡，这样点击显示的时候不会触发document上的事件回调，导致modal无奈显示。然而在react16上发现这样做还是不行，须要调用e.nativeEvent.stopImmediatePropagation()能力实现，而react17上没什么影响 究其原因就是react16和17在委托事件的容器上做出了扭转，react16的事件会冒泡的document上，而17则会冒泡到root容器上，也就是ReactDom.render的第二个参数 export default class Demo13 extends React.Component { state = { show: false }; componentDidMount() { document.addEventListener("click", () => { this.setState({ show: false }); }); } handleClick = (e) => { e.stopPropagation();//react17中失效 // e.nativeEvent.stopImmediatePropagation(); //react16中失效 stopImmediatePropagation也阻止本级监听函数执行 this.setState({ show: true }); }; render() { return ( <div> <button onClick={this.handleClick}>显示</button> {this.state.show && <div onClick={(e) => e.nativeEvent.stopImmediatePropagation()}>modal</div>} </div> ); }}大家也能够看下demo_11、demo_12在react16、17触发程序有何差别，同时demo我的项目中的event.html也模仿了react16、17的事件代理机制 ...

react源码解析第17节.context源码视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 查看视频调试demo_7context流程图 cursor/valueStackreact源码中存在一个valueStack和valueCursor用来记录context的历史信息和以后context，另外还有一个didPerformWorkStackCursor用来示意以后的context有没有变动 //ReactFiberNewContext.new.jsconst valueCursor: StackCursor<mixed> = createCursor(null);const didPerformWorkStackCursor: StackCursor<boolean> = createCursor(false);//ReactFiberStack.new.jsconst valueStack: Array<any> = [];function pushProvider(providerFiber, nextValue) { var context = providerFiber.type._context; { push(valueCursor, context._currentValue, providerFiber); context._currentValue = nextValue; }}function popProvider(providerFiber) { var currentValue = valueCursor.current; pop(valueCursor, providerFiber); var context = providerFiber.type._context; { context._currentValue = currentValue; }}在render阶段调用updateContextProvider的时候会执行pushProvider，将新的值push进valueStack中在commit阶段调用completeWork的时候会执行popProvider，将栈顶context pop进去，为什么会有这样一个机制呢，因为咱们的context是跨层级的，在之前讲到render阶段和commit阶段的时候，咱们会以深度优先遍历的形式遍历节点，如果波及跨层级读取状态就有点力不从心了，就须要一层一层往下传递咱们的props，所以咱们能够用一个stack记录咱们的context，在render阶段pushProvider，在commit阶段popProvider，在每个具体的层级能依据valueCursor取以后value ...

react源码解析20.总结&第一章的面试题解答视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 总结至此咱们介绍了react的理念，如果解决cpu和io的瓶颈，要害是实现异步可中断的更新 咱们介绍了react源码架构（ui=fn(state)），从scheduler开始调度（依据过期事件判断优先级），通过render阶段的深度优先遍历造成effectList（两头会执行reconcile|diff），交给commit解决实在节点（两头交叉生命周期和局部hooks），而这些调度的过程都离不开Fiber的撑持，Fiber是工作单元，也是节点优先级、更新UpdateQueue、节点信息的载体，Fiber双缓存则提供了比照前后节点更新的根底。咱们还介绍了jsx是React.createElement的语法糖。Lane模型则提供了更细粒度的优先级比照和计算，这所有都为concurrent mode提供了根底，在这之上变能够实现Suspense和batchedUpdate（16、17版本实现的逻辑不一样），18章context的valueStack和valueCursor在整个架构中运行机制，19章介绍了新版事件零碎，包含事件生产、监听和触发 面试题简答（详见视频源码角度解说）jsx和Fiber有什么关系 答：mount时通过jsx对象（调用createElement的后果）调用createFiberFromElement生成Fiberupdate时通过reconcileChildFibers或reconcileChildrenArray比照新jsx和老的Fiber（current Fiber）生成新的wip Fiber树 react17之前jsx文件为什么要申明import React from 'react'，之后为什么不须要了 答：jsx通过编译之后编程React.createElement，不引入React就会报错，react17扭转了编译形式，变成了jsx.createElement function App() { return <h1>Hello World</h1>;}//转换后import {jsx as _jsx} from 'react/jsx-runtime';function App() { return _jsx('h1', { children: 'Hello world' });}Fiber是什么，它为什么能进步性能 答：Fiber是一个js对象，能承载节点信息、优先级、updateQueue，同时它还是一个工作单元。 Fiber双缓存能够在构建好wip Fiber树之后切换成current Fiber，内存中间接一次性切换，进步了性能Fiber的存在使异步可中断的更新成为了可能，作为工作单元，能够在工夫片内执行工作，没工夫了交还执行权给浏览器，下次工夫片继续执行之前暂停之后返回的FiberFiber能够在reconcile的时候进行相应的diff更新，让最初的更新利用在实在节点上hooks 为什么hooks不能写在条件判断中 答：hook会按顺序存储在链表中，如果写在条件判断中，就没法放弃链表的程序 状态/生命周期 setState是同步的还是异步的 答：legacy模式下：命中batchedUpdates时是异步 未命中batchedUpdates时是同步的 concurrent模式下：都是异步的 componentWillMount、componentWillMount、componentWillUpdate为什么标记UNSAFE 答：新的Fiber架构能在scheduler的调度下实现暂停持续，排列优先级，Lane模型能使Fiber节点具备优先级，在高优先级的工作打断低优先级的工作时，低优先级的更新可能会被跳过，所有以上生命周期可能会被执行屡次，和之前版本的行为不统一。 组件 react元素$$typeof属性什么 答：用来示意元素的类型，是一个symbol类型 ...

react源码解析19.手写迷你版react视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 迷你react和真正的源码有哪些区别呢在render阶段咱们遍历了整颗Fiber树，在源码中如果节点什么都没扭转会命中优化的逻辑，而后跳过这个节点的遍历commit咱们也遍历了整颗Fiber树，源码中只遍历带有effect的Fiber节点，也就是遍历effectList每次遍历的时候咱们都是新建节点，源码中某些条件会复用节点没有用到优先级第一步：渲染器和入口函数 const React = { createElement, render,};const container = document.getElementById("root");const updateValue = (e) => { rerender(e.target.value);};const rerender = (value) => { const element = ( <div> <input onInput={updateValue} value={value} /> <h2>Hello {value}</h2> </div> ); React.render(element, container);};rerender("World");第二步：创立dom节点函数 /创立elementfunction createElement(type, props, ...children) { return { type, props: { ...props, children: children.map((child) => (typeof child === "object" ? child : createTextElement(child))), }, };}//创立text类型function createTextElement(text) { return { type: "TEXT_ELEMENT", props: { nodeValue: text, children: [], }, };}//创立domfunction createDom(fiber) { const dom = fiber.type === "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(fiber.type); updateDom(dom, {}, fiber.props); return dom;}第三步：更新节点函数 ...

react源码解析10.commit阶段视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 在render阶段的开端会调用commitRoot(root);进入commit阶段，这里的root指的就是fiberRoot，而后会遍历render阶段生成的effectList，effectList上的Fiber节点保留着对应的props变动。之后会遍历effectList进行对应的dom操作和生命周期、hooks回调或销毁函数，各个函数做的事件如下 在commitRoot函数中其实是调度了commitRootImpl函数 //ReactFiberWorkLoop.old.jsfunction commitRoot(root) { var renderPriorityLevel = getCurrentPriorityLevel(); runWithPriority$1(ImmediatePriority$1, commitRootImpl.bind(null, root, renderPriorityLevel)); return null;}在commitRootImpl的函数中次要分三个局部： commit阶段前置工作 调用flushPassiveEffects执行完所有effect的工作初始化相干变量赋值firstEffect给前面遍历effectList用 //ReactFiberWorkLoop.old.jsdo { // 调用flushPassiveEffects执行完所有effect的工作 flushPassiveEffects(); } while (rootWithPendingPassiveEffects !== null); //... // 重置变量 finishedWork指rooFiber root.finishedWork = null; //重置优先级 root.finishedLanes = NoLanes; // Scheduler回调函数重置 root.callbackNode = null; root.callbackId = NoLanes; // 重置全局变量 if (root === workInProgressRoot) { workInProgressRoot = null; workInProgress = null; workInProgressRootRenderLanes = NoLanes; } else { } //rootFiber可能会有新的副作用 将它也退出到effectLis let firstEffect; if (finishedWork.effectTag > PerformedWork) { if (finishedWork.lastEffect !== null) { finishedWork.lastEffect.nextEffect = finishedWork; firstEffect = finishedWork.firstEffect; } else { firstEffect = finishedWork; } } else { firstEffect = finishedWork.firstEffect; }mutation阶段 ...

react源码解析9.diff算法视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 在render阶段更新Fiber节点时，咱们会调用reconcileChildFibers比照current Fiber和jsx对象构建workInProgress Fiber，这里current Fiber是指以后dom对应的fiber树，jsx是class组件render办法或者函数组件的返回值。 在reconcileChildFibers中会依据newChild的类型来进入单节点的diff或者多节点diff //ReactChildFiber.old.jsfunction reconcileChildFibers( returnFiber: Fiber, currentFirstChild: Fiber | null, newChild: any,): Fiber | null { const isObject = typeof newChild === 'object' && newChild !== null; if (isObject) { switch (newChild.$$typeof) { case REACT_ELEMENT_TYPE: //繁多节点diff return placeSingleChild( reconcileSingleElement( returnFiber, currentFirstChild, newChild, lanes, ), ); } } //... if (isArray(newChild)) { //多节点diff return reconcileChildrenArray( returnFiber, currentFirstChild, newChild, lanes, ); } // 删除节点 return deleteRemainingChildren(returnFiber, currentFirstChild);}diff过程的次要流程如下图： ...

面试官:说说react的渲染过程hello，这里是潇晨，大家在面试的过程中有没有遇到过一些和react相干的问题呢，比方面试官让你说说react渲染的过程，这到题目比拟凋谢，也比拟考验大家对react渲染原理以及源码的整体架构的了解。 整体流程： react的外围能够用ui=fn(state)来示意，更具体能够用 const state = reconcile(update);const UI = commit(state);下面的fn能够分为如下一个局部： Scheduler（调度器）： 排序优先级，让优先级高的工作先进行reconcileReconciler（协调器）： 找出哪些节点产生了扭转，并打上不同的Flags（旧版本react叫Tag）Renderer（渲染器）： 将Reconciler中打好标签的节点渲染到视图上那这些模块是怎么配合工作的呢： 首先jsx通过babel的ast词法解析之后编程React.createElement，React.createElement函数执行之后就是jsx对象，也被称为virtual-dom。不论是在首次渲染还是更新状态的时候，这些渲染的工作都会通过Scheduler的调度，Scheduler会依据工作的优先级来决定将哪些工作优先进入render阶段，比方用户触发的更新优先级十分高，如果以后正在进行一个比拟耗时的工作，则这个工作就会被用户触发的更新打断，在Scheduler中初始化工作的时候会计算一个过期工夫，不同类型的工作过期工夫不同，优先级越高的工作，过期工夫越短，优先级越低的工作，过期工夫越长。在最新的Lane模型中，则能够更加细粒度的依据二进制1的地位，来决定工作的优先级，通过二进制的交融和相交，判断工作的优先级是否足够在此次render的渲染。Scheduler会调配一个工夫片给须要渲染的工作，如果是一个十分耗时的工作，如果在一个工夫片之内没有执行实现，则会从以后渲染到的Fiber节点暂停计算，让出执行权给浏览器，在之后浏览器闲暇的时候从之前暂停的那个Fiber节点持续前面的计算，这个计算的过程就是计算Fiber的差别，并标记副作用。具体可浏览往期课件和视频解说，往期文章在底部。在render阶段：render阶段的配角是Reconciler，在mount阶段和update阶段，它会比拟jsx和以后Fiber节点的差别（diff算法指的就是这个比拟的过程），将带有副作用的Fiber节点标记进去，这些副作用有Placement（插入）、Update（更新）、Deletetion（删除）等，而这些带有副作用Fiber节点会退出一条EffectList中，在commit阶段就会遍历这条EffectList，解决相应的副作用，并且利用到实在节点上。而Scheduler和Reconciler都是在内存中工作的，所以他们不影响最初的出现。在commit阶段：会遍历EffectList，解决相应的生命周期，将这些副作用利用到实在节点，这个过程会对应不同的渲染器，在浏览器的环境中就是react-dom，在canvas或者svg中就是reac-art等。另外咱们也能够从首次渲染和更新的时候看在render和commit这两个子阶段是如果工作的： mount时： 在render阶段会依据jsx对象构建新的workInProgressFiber树，不太理解Fiber双缓存的能够查看往期文章 Fiber架构，而后将相应的fiber节点标记为Placement，示意这个fiber节点须要被插入到dom树中，而后会这些带有副作用的fiber节点退出一条叫做Effect List的链表中。在commit阶段会遍历render阶段造成的Effect List，执行链表上相应fiber节点的副作用，比方Placement插入，或者执行Passive（useEffect的副作用）。将这些副作用利用到实在节点上update时： 在render阶段会依据最新状态的jsx对象比照current Fiber，再构建新的workInProgressFiber树，这个比照的过程就是diff算法，diff算法又分成单节点的比照和多节点的比照，不太分明的同学参见之前的文章 diff算法 ，比照的过程中同样会经验收集副作用的过程，也就是将比照进去的差别标记进去，退出Effect List中，这些比照进去的副作用例如：Placement（插入）、Update(更新)、Deletion（删除）等。在commit阶段同样会遍历Effect List，将这些fiber节点上的副作用利用到实在节点上 视频解说（高效学习）:点击学习往期react源码解析文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答

react源码解析2.react的设计理念视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 异步可中断React15慢在哪里在讲这部分之前，须要讲是那些因素导致了react变慢，并且须要重构呢。 React15之前的协调过程是同步的，也叫stack reconciler，又因为js的执行是单线程的，这就导致了在更新比拟耗时的工作时，不能及时响应一些高优先级的工作，比方用户的输出，所以页面就会卡顿，这就是cpu的限度。 解决方案如何解决这个问题呢，试想一下，如果咱们在日常的开发中，在单线程的环境中，遇到了比拟耗时的代码计算会怎么做呢，首先咱们可能会将工作宰割，让它可能被中断，在其余工作到来的时候让出执行权，当其余工作执行后，再从之前中断的局部开始异步执行剩下的计算。所以要害是实现一套异步可中断的计划。 实现在方才的解决方案中提到了工作宰割，和异步执行，并且能让出执行权，由此能够带出react中的三个概念 Fiber：react15的更新是同步的，因为它不能将工作宰割，所以须要一套数据结构让它既能对应实在的dom又能作为分隔的单元，这就是Fiber。 let firstFiberlet nextFiber = firstFiberlet shouldYield = false//firstFiber->firstChild->siblingfunction performUnitOfWork(nextFiber){ //... return nextFiber.next}function workLoop(deadline){ while(nextFiber && !shouldYield){ nextFiber = performUnitOfWork(nextFiber) shouldYield = deadline.timeReaming < 1 } requestIdleCallback(workLoop)}requestIdleCallback(workLoop)Scheduler：有了Fiber，咱们就须要用浏览器的工夫片异步执行这些Fiber的工作单元，咱们晓得浏览器有一个api叫做requestIdleCallback，它能够在浏览器闲暇的时候执行一些工作，咱们用这个api执行react的更新，让高优先级的工作优先响应不就能够了吗，但事实是requestIdleCallback存在着浏览器的兼容性和触发不稳固的问题，所以咱们须要用js实现一套工夫片运行的机制，在react中这部分叫做scheduler。Lane：有了异步调度，咱们还须要细粒度的治理各个工作的优先级，让高优先级的工作优先执行，各个Fiber工作单元还能比拟优先级，雷同优先级的工作能够一起更新，想想是不是更cool呢。产生进去的下层实现 因为有了这一套异步可中断的机制，咱们就能实现batchedUpdates批量更新和Suspense 上面这两张图就是应用异步可中断更新前后的区别，能够领会一下 代数效应（Algebraic Effects）除了cpu的瓶颈问题，还有一类问题是和副作用相干的问题，比方获取数据、文件操作等。不同设施性能和网络情况都不一样，react怎么去解决这些副作用，让咱们在编码时最佳实际，运行利用时体现统一呢，这就须要react有拆散副作用的能力，为什么要拆散副作用呢，因为要解耦，这就是代数效应。 发问：咱们都写过获取数据的代码，在获取数据前展现loading，数据获取之后勾销loading，假如咱们的设施性能和网络情况都很好，数据很快就获取到了，那咱们还有必要在一开始的时候展现loading吗？如何能力有更好的用户体验呢？ 看下上面这个例子 function getPrice(id) { return fetch(`xxx.com?id=${productId}`).then((res)=>{ return res.price })}async function getTotalPirce(id1, id2) { const p1 = await getPrice(id1); const p2 = await getPrice(id2); return p1 + p2;}async function run(){ await getTotalPrice('001', '002'); }getPrice是一个异步获取数据的办法，咱们能够用async+await的形式获取数据，然而这会导致调用getTotalPrice的run办法也会变成异步函数，这就是async的传染性，所以没法拆散副作用。 ...

react源码解析1.开篇介绍和面试题视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 怎么学习react源码作为前端最罕用的js库之一，相熟react源码成了高级或资深前端工程师必备的能力，如果你不想停留在api的应用层面或者想在前端技能的深度上有所突破，那相熟react源码将是你提高的很好的形式。 react的纯正体现在它的api上，一切都是围绕setState状态更新进行的，然而外部的逻辑却经验了很大的重构和变动，而且代码量也不小，如果只是从源码文件和函数来浏览，那会很难以了解react的渲染流程。优良工程师几年工夫打造的库，必然有借鉴之处，那么咱们应该怎么学习react源码呢。 首先，咱们能够从函数调用栈动手，理清react的各个模块的性能和它们调用的程序，盖房子一样，先搭好架子，对源码有个整体的意识，而后再看每个模块的细节，第一遍的时候切忌纠结每个函数实现的细节，陷入各个函数的深度调用中。其次能够联合一些demo和本人画图了解，react源码中设计大量的链表操作，画图是一个很好的了解指针操作的形式。源码里也有一些英文正文，能够依据正文或者依据此react源码解析文章进行了解。 相熟react源码并不是久而久之的事，想精进本人的技术，必须花工夫才行。 课程特色本课程遵循react v17.0.1源码的核心思想，目标是打造一门通俗易懂的react源码解析系列文章。课程从源码的各个模块开始，联合大量demo、示例图解和视频教程，带着大家一步一步调试react源码，课程也会齐全遵循react17手写hook和精简版的react不便大家的了解，随着react大版本的更新，此课程也会始终更新。 课程构造 课程播种为什么要学习react源码呢，你是应用了api很久，停留在框架应用层面还是会被动去理解框架的逻辑和运行形式呢。跟着课程走，了解起来不费劲，你将播种： 面试加分：大厂前端岗都要求相熟框架底层原理，也是面试必问环节，相熟react源码会为你的面试加分，也会为你的谈薪流程减少不少筹码坚固基础知识：在源码的scheduler中应用了小顶堆 这种数据结构，调度的实现则应用了messageChannel，在render阶段的reconciler中则应用了fiber、update、链表 这些构造，lane模型应用了二进制掩码，咱们也会介绍diff算法怎么升高比照复杂度。学习本课程也顺便坚固了数据结构和算法、事件循环。日常开发晋升效率：相熟react源码之后，你对react的运行流程有了新的意识，在日常的开发中，置信你对组件的性能优化、react应用技巧和解决bug会更加得心应手。置信学完课程之后，你对react的了解肯定会回升一个品位，甚至会超过大多数面试官了 常见面试题（带上问题学习吧）以下这些问题可能你曾经有答案了，然而你能从源码角度答复进去吗。 jsx和Fiber有什么关系react17之前jsx文件为什么要申明import React from 'react'，之后为什么不须要了Fiber是什么，它为什么能进步性能hooks 为什么hooks不能写在条件判断中状态/生命周期 setState是同步的还是异步的componentWillMount、componentWillMount、componentWillUpdate为什么标记UNSAFE组件 react元素$$typeof属性什么react怎么辨别Class组件和Function组件函数组件和类组件的相同点和不同点开放性问题 说说你对react的了解/请说一下react的渲染过程聊聊react生命周期简述diff算法react有哪些优化伎俩react为什么引入jsx说说virtual Dom的了解你对合成事件的了解 咱们写的事件是绑定在dom上么，如果不是绑定在哪里？为什么咱们的事件手动绑定this(不是箭头函数的状况)为什么不能用 return false 来阻止事件的默认行为？react怎么通过dom元素，找到与之对应的 fiber对象的？解释后果和景象 点击Father组件的div，Child会打印Child吗 function Child() { console.log('Child'); return <div>Child</div>;}function Father(props) { const [num, setNum] = React.useState(0); return ( <div onClick={() => {setNum(num + 1)}}> {num} {props.children} </div> );}function App() { return ( <Father> <Child/> </Father> );}const rootEl = document.querySelector("#root");ReactDOM.render(<App/>, rootEl);打印程序是什么 ...

react源码解析6.legacy模式和concurrent模式视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo react启动的模式react有3种模式进入主体函数的入口，咱们能够从 react官网文档 应用 Concurrent 模式（实验性）中比照三种模式： legacy 模式： ReactDOM.render(<App />, rootNode)。这是以后 React app 应用的形式。以后没有打算删除本模式，然而这个模式可能不反对这些新性能。blocking 模式： ReactDOM.createBlockingRoot(rootNode).render(<App />)。目前正在试验中。作为迁徙到 concurrent 模式的第一个步骤。concurrent 模式： ReactDOM.createRoot(rootNode).render(<App />)。目前在试验中，将来稳固之后，打算作为 React 的默认开发模式。这个模式开启了所有的新性能。个性比照： legacy 模式在合成事件中有主动批处理的性能，但仅限于一个浏览器工作。非 React 事件想应用这个性能必须应用 unstable_batchedUpdates。在 blocking 模式和 concurrent 模式下，所有的 setState 在默认状况下都是批处理的。会在开发中收回正告 不同模式在react运行时的含意legacy模式是咱们罕用的，它构建dom的过程是同步的，所以在render的reconciler中，如果diff的过程特地耗时，那么导致的后果就是js始终阻塞高优先级的工作(例如用户的点击事件)，体现为页面的卡顿，无奈响应。 concurrent Mode是react将来的模式，它用工夫片调度实现了异步可中断的工作，依据设施性能的不同，工夫片的长度也不一样，在每个工夫片中，如果工作到了过期工夫，就会被动让出线程给高优先级的工作。这部分将在第15节 scheduler&lane模型 。 两种模式函数次要执行过程1.次要执行流程： 2.具体函数调用过程： 用demo_0跟着视频调试更加清晰，黄色局部是次要工作是创立fiberRootNode和rootFiber，红色局部是创立Update，蓝色局部是调度render阶段的入口函数 3.legacy模式： render调用legacyRenderSubtreeIntoContainer，最初createRootImpl会调用到createFiberRoot创立fiberRootNode,而后调用createHostRootFiber创立rootFiber，其中fiberRootNode是整个我的项目的的根节点，rootFiber是以后利用挂在的节点，也就是ReactDOM.render调用后的根节点 //最上层的节点是整个我的项目的根节点fiberRootNodeReactDOM.render(<App />, document.getElementById("root"));//rootFiberReactDOM.render(<App />, document.getElementById("root"));//rootFiber ...

react源码解析3.react源码架构视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 这一章的目标是让咱们认识一下react源码架构和各个模块。 在真正的代码学习之前，咱们须要在大脑中有一个react源码的地图，晓得react渲染的大抵流程和框架，这样能力从上帝视角看react是怎么更新的，来吧少年。 react的外围能够用ui=fn(state)来示意，更具体能够用 const state = reconcile(update);const UI = commit(state);下面的fn能够分为如下一个局部： Scheduler（调度器）： 排序优先级，让优先级高的工作先进行reconcileReconciler（协调器）： 找出哪些节点产生了扭转，并打上不同的Flags（旧版本react叫Tag）Renderer（渲染器）： 将Reconciler中打好标签的节点渲染到视图上一图胜千言： jsxjsx是js语言的扩大，react通过babel词法解析（具体怎么转换能够查阅babel相干插件），将jsx转换成React.createElement，React.createElement办法返回virtual-dom对象（内存中用来形容dom阶段的对象），所有jsx实质上就是React.createElement的语法糖，它能申明式的编写咱们想要组件呈现出什么样的ui成果。在第5章jsx咱们会具体介绍jsx解析之后的后果。 Fiber双缓存Fiber对象下面保留了包含这个节点的属性、类型、dom等，Fiber通过child、sibling、return（指向父节点）来造成Fiber树，还保留了更新状态时用于计算state的updateQueue，updateQueue是一种链表构造，下面可能存在多个未计算的update，update也是一种数据结构，下面蕴含了更新的数据、优先级等，除了这些之外，下面还有和副作用无关的信息。 双缓存是指存在两颗Fiber树，current Fiber树形容了以后出现的dom树，workInProgress Fiber是正在更新的Fiber树，这两颗Fiber树都是在内存中运行的，在workInProgress Fiber构建实现之后会将它作为current Fiber利用到dom上 在mount时（首次渲染），会依据jsx对象（Class Component或的render函数者Function Component的返回值），构建Fiber对象，造成Fiber树，而后这颗Fiber树会作为current Fiber利用到实在dom上，在update（状态更新时如setState）的时候，会依据状态变更后的jsx对象和current Fiber做比照造成新的workInProgress Fiber，而后workInProgress Fiber切换成current Fiber利用到实在dom就达到了更新的目标，而这一切都是在内存中产生的，从而缩小了对dom好性能的操作。 例如上面代码的Fiber双缓存构造如下，在第7章会具体解说 function App() { const [count, setCount] = useState(0); return ( <> <h1 onClick={() => { // debugger; setCount(() => count + 1); }} > <p title={count}>{count}</p> xiaochen </h1> </> )}ReactDOM.render(<App />, document.getElementById("root")); ...

react源码解析16.concurrent模式视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo concurrent modereact17反对concurrent mode，这种模式的基本目标是为了让利用放弃cpu和io的疾速响应，它是一组新性能，包含Fiber、Scheduler、Lane，能够依据用户硬件性能和网络情况调整利用的响应速度，外围就是为了实现异步可中断的更新。concurrent mode也是将来react次要迭代的方向。 cup：让耗时的reconcile的过程能让出js的执行权给更高优先级的工作，例如用户的输出，io：依附SuspenseFiberFiber咱们之前介绍过，这里咱们来看下在concurrent mode下Fiber的意义，react15之前的reconcile是同步执行的，当组件数量很多，reconcile时的计算量很大时，就会呈现页面的卡顿，为了解决这个问题就须要一套异步可中断的更新来让耗时的计算让出js的执行权给高优先级的工作，在浏览器有闲暇的时候再执行这些计算。所以咱们须要一种数据结构来形容实在dom和更新的信息，在适当的时候能够在内存中中断reconcile的过程，这种数据结构就是Fiber。 SchedulerScheduler独立于react自身，相当于一个独自的package，Scheduler的意义在于，当cup的计算量很大时，咱们依据设施的fps算出一帧的工夫，在这个工夫内执行cup的操作，当工作执行的工夫快超过一帧的工夫时，会暂停工作的执行，让浏览器有工夫进行重排和重绘。在适当的时候持续工作。 在js中咱们晓得generator也能够暂停和持续工作，然而咱们还须要用优先级来排列工作，这个是generator无奈实现的。在Scheduler中应用MessageChannel实现了工夫切片，而后用小顶堆排列工作优先级的高下，达到了异步可中断的更新。 Scheduler能够用过期工夫来代表优先级的高下。 优先级越高，过期工夫越短，离以后工夫越近，也就是说过一会就要执行它了。 优先级越低，过期工夫越长，离以后工夫越长，也就是过很久了能力轮到它执行。 laneLane用二进制位示意工作的优先级，不便优先级的计算，不同优先级占用不同地位的‘赛道’，而且存在批的概念，优先级越低，‘赛道’越多。高优先级打断低优先级，新建的工作须要赋予什么优先级等问题都是Lane所要解决的问题。 batchedUpdates简略来说，在一个上下文中同时触发屡次更新，这些更新会合并成一次更新，例如 onClick() { this.setState({ count: this.state.count + 1 }); this.setState({ count: this.state.count + 1 });} 在之前的react版本中如果脱离以后的上下文就不会被合并，例如把屡次更新放在setTimeout中，起因是处于同一个context的屡次setState的executionContext都会蕴含BatchedContext，蕴含BatchedContext的setState会合并，当executionContext等于NoContext，就会同步执行SyncCallbackQueue中的工作，所以setTimeout中的屡次setState不会合并，而且会同步执行。 onClick() { setTimeout(() => { this.setState({ count: this.state.count + 1 }); this.setState({ count: this.state.count + 1 }); });}export function batchedUpdates<A, R>(fn: A => R, a: A): R { const prevExecutionContext = executionContext; executionContext |= BatchedContext; try { return fn(a); } finally { executionContext = prevExecutionContext; if (executionContext === NoContext) { resetRenderTimer(); //executionContext为NoContext就同步执行SyncCallbackQueue中的工作 flushSyncCallbackQueue(); } }} 在Concurrent mode下，下面的例子也会合并为一次更新，根本原因在如下一段简化的源码，如果屡次setState，会比拟这几次setState回调的优先级，如果优先级统一，则先return掉，不会进行前面的render阶段 ...

react源码解析15.scheduler&Lane视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 当咱们在相似上面的搜寻框组件进行搜寻时会发现，组件分为搜寻局部和搜寻后果展现列表，咱们冀望输入框能立即响应，后果列表能够有期待的工夫，如果后果列表数据量很大，在进行渲染的时候，咱们又输出了一些文字，因为用户输出事件的优先级是很高的，所以就要进行后果列表的渲染，这就引出了不同工作之间的优先级和调度 Scheduler咱们晓得如果咱们的利用占用较长的js执行工夫，比方超过了设施一帧的工夫，那么设施的绘制就会出不的景象。 Scheduler次要的性能是工夫切片和调度优先级，react在比照差别的时候会占用肯定的js执行工夫，Scheduler外部借助MessageChannel实现了在浏览器绘制之前指定一个工夫片，如果react在指定工夫内没比照完，Scheduler就会强制交出执行权给浏览器 工夫切片 在浏览器的一帧中js的执行工夫如下 requestIdleCallback是在浏览器重绘重排之后，如果还有闲暇就能够执行的机会，所以为了不影响重绘重排，能够在浏览器在requestIdleCallback中执行耗性能的计算，然而因为requestIdleCallback存在兼容和触发机会不稳固的问题，scheduler中采纳MessageChannel来实现requestIdleCallback，以后环境不反对MessageChannel就采纳setTimeout。 在之前的介绍中咱们晓得在performUnitOfWork之后会执行render阶段和commit阶段，如果在浏览器的一帧中，cup的计算还没实现，就会让出js执行权给浏览器，这个判断在workLoopConcurrent函数中，shouldYield就是用来判断残余的工夫有没有用尽。在源码中每个工夫片时5ms，这个值会依据设施的fps调整。 function workLoopConcurrent() { while (workInProgress !== null && !shouldYield()) { performUnitOfWork(workInProgress); }}function forceFrameRate(fps) {//计算工夫片 if (fps < 0 || fps > 125) { console['error']( 'forceFrameRate takes a positive int between 0 and 125, ' + 'forcing frame rates higher than 125 fps is not supported', ); return; } if (fps > 0) { yieldInterval = Math.floor(1000 / fps); } else { yieldInterval = 5;//工夫片默认5ms }}工作的暂停在shouldYield函数中有一段，所以能够晓得，如果以后工夫大于工作开始的工夫+yieldInterval，就打断了工作的进行。 ...

react源码解析18事件零碎视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 从一个bug说起上面这个demo_13在react17和react16中有什么不同吗？代码也很简略，模仿一个modal框，点击显示呈现，点击其余中央，相当于点击了mask，modal隐没，因为react事件都是委托到下层，所以须要在handleClick阻止冒泡，这样点击显示的时候不会触发document上的事件回调，导致modal无奈显示。然而在react16上发现这样做还是不行，须要调用e.nativeEvent.stopImmediatePropagation()能力实现，而react17上没什么影响 究其原因就是react16和17在委托事件的容器上做出了扭转，react16的事件会冒泡的document上，而17则会冒泡到root容器上，也就是ReactDom.render的第二个参数 export default class Demo13 extends React.Component { state = { show: false }; componentDidMount() { document.addEventListener("click", () => { this.setState({ show: false }); }); } handleClick = (e) => { e.stopPropagation();//react17中失效 // e.nativeEvent.stopImmediatePropagation(); //react16中失效 stopImmediatePropagation也阻止本级监听函数执行 this.setState({ show: true }); }; render() { return ( <div> <button onClick={this.handleClick}>显示</button> {this.state.show && <div onClick={(e) => e.nativeEvent.stopImmediatePropagation()}>modal</div>} </div> ); }}大家也能够看下demo_11、demo_12在react16、17触发程序有何差别，同时demo我的项目中的event.html也模仿了react16、17的事件代理机制 ...

react源码解析17.context视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 查看视频调试demo_7context流程图 cursor/valueStackreact源码中存在一个valueStack和valueCursor用来记录context的历史信息和以后context，另外还有一个didPerformWorkStackCursor用来示意以后的context有没有变动 //ReactFiberNewContext.new.jsconst valueCursor: StackCursor<mixed> = createCursor(null);const didPerformWorkStackCursor: StackCursor<boolean> = createCursor(false);//ReactFiberStack.new.jsconst valueStack: Array<any> = [];function pushProvider(providerFiber, nextValue) { var context = providerFiber.type._context; { push(valueCursor, context._currentValue, providerFiber); context._currentValue = nextValue; }}function popProvider(providerFiber) { var currentValue = valueCursor.current; pop(valueCursor, providerFiber); var context = providerFiber.type._context; { context._currentValue = currentValue; }}在render阶段调用updateContextProvider的时候会执行pushProvider，将新的值push进valueStack中在commit阶段调用completeWork的时候会执行popProvider，将栈顶context pop进去，为什么会有这样一个机制呢，因为咱们的context是跨层级的，在之前讲到render阶段和commit阶段的时候，咱们会以深度优先遍历的形式遍历节点，如果波及跨层级读取状态就有点力不从心了，就须要一层一层往下传递咱们的props，所以咱们能够用一个stack记录咱们的context，在render阶段pushProvider，在commit阶段popProvider，在每个具体的层级能依据valueCursor取以后value ...

react源码解析8.render阶段视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo render阶段的入口render阶段的次要工作是构建Fiber树和生成effectList，在第5章中咱们晓得了react入口的两种模式会进入performSyncWorkOnRoot或者performConcurrentWorkOnRoot，而这两个办法别离会调用workLoopSync或者workLoopConcurrent //ReactFiberWorkLoop.old.jsfunction workLoopSync() { while (workInProgress !== null) { performUnitOfWork(workInProgress); }}function workLoopConcurrent() { while (workInProgress !== null && !shouldYield()) { performUnitOfWork(workInProgress); }}这两函数的区别是判断条件是否存在shouldYield的执行，如果浏览器没有足够的工夫，那么会终止while循环，也不会执行前面的performUnitOfWork函数，天然也不会执行前面的render阶段和commit阶段，这部分属于scheduler的知识点，咱们在第15章解说。 workInProgress：新创建的workInProgress fiberperformUnitOfWork：workInProgress fiber和会和曾经创立的Fiber连接起来造成Fiber树。这个过程相似深度优先遍历，咱们暂且称它们为‘捕捉阶段’和‘冒泡阶段’。伪代码执行的过程大略如下 function performUnitOfWork(fiber) { if (fiber.child) { performUnitOfWork(fiber.child);//beginWork } if (fiber.sibling) { performUnitOfWork(fiber.sibling);//completeWork }}render阶段整体执行流程用demo_0看视频调试 捕捉阶段从根节点rootFiber开始，遍历到叶子节点，每次遍历到的节点都会执行beginWork，并且传入以后Fiber节点，而后创立或复用它的子Fiber节点，并赋值给workInProgress.child。冒泡阶段在捕捉阶段遍历到子节点之后，会执行completeWork办法，执行实现之后会判断此节点的兄弟节点存不存在，如果存在就会为兄弟节点执行completeWork，当全副兄弟节点执行完之后，会向上‘冒泡’到父节点执行completeWork，直到rootFiber。示例，demo_0调试 function App() { return ( <> <h1> <p>count</p> xiaochen </h1> </> )}ReactDOM.render(<App />, document.getElementById("root"));当执行完深度优先遍历之后造成的Fiber树： ...

react源码解析7.Fiber架构视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo Fiber的深度了解react15在render阶段的reconcile是不可打断的，这会在进行大量节点的reconcile时可能产生卡顿，因为浏览器所有的工夫都交给了js执行，并且js的执行时单线程。为此react16之后就有了scheduler进行工夫片的调度，给每个task（工作单元）肯定的工夫，如果在这个工夫内没执行完，也要交出执行权给浏览器进行绘制和重排，所以异步可中断的更新须要肯定的数据结构在内存中来保留工作单元的信息，这个数据结构就是Fiber。 那么有了Fiber这种数据结构后，能实现哪些事件呢， 工作单元 工作合成 ：Fiber最重要的性能就是作为工作单元，保留原生节点或者组件节点对应信息（包含优先级），这些节点通过指针的形似造成Fiber树增量渲染：通过jsx对象和current Fiber的比照，生成最小的差别补丁，利用到实在节点上依据优先级暂停、持续、排列优先级：Fiber节点上保留了优先级，能通过不同节点优先级的比照，达到工作的暂停、持续、排列优先级等能力，也为下层实现批量更新、Suspense提供了根底保留状态：因为Fiber能保留状态和更新的信息，所以就能实现函数组件的状态更新，也就是hooksFiber的数据结构Fiber的自带的属性如下： //ReactFiber.old.jsfunction FiberNode( tag: WorkTag, pendingProps: mixed, key: null | string, mode: TypeOfMode,) { //作为动态的数据结构 保留节点的信息 this.tag = tag;//对应组件的类型 this.key = key;//key属性 this.elementType = null;//元素类型 this.type = null;//func或者class this.stateNode = null;//实在dom节点 //作为fiber数架构 连接成fiber树 this.return = null;//指向父节点 this.child = null;//指向child this.sibling = null;//指向兄弟节点 this.index = 0; this.ref = null; //用作为工作单元 来计算state this.pendingProps = pendingProps; this.memoizedProps = null; this.updateQueue = null; this.memoizedState = null; this.dependencies = null; this.mode = mode; //effect相干 this.effectTag = NoEffect; this.nextEffect = null; this.firstEffect = null; this.lastEffect = null; //优先级相干的属性 this.lanes = NoLanes; this.childLanes = NoLanes; //current和workInProgress的指针 this.alternate = null;}Fiber双缓存当初咱们晓得了Fiber能够保留实在的dom，实在dom对应在内存中的Fiber节点会造成Fiber树，这颗Fiber树在react中叫current Fiber，也就是以后dom树对应的Fiber树，而正在构建Fiber树叫workInProgress Fiber，这两颗树的节点通过alternate相连. ...

面试官:说说你对react生命周期的了解hello，这里是潇晨，明天咱们来看下react生命周期在各个阶段是怎么执行的，在面试的过程中有没有遇到这个问题呢，大家也能够学习往期react源码体系文章哦，往期文章目录在文章结尾。 在之前的react源码介绍中，咱们能够将利用的渲染过程分为mount阶段（利用首次渲染）和update阶段（利用状态更新），无论在mount阶段还是update阶段，都会经验两个子阶段，一个是render阶段，一个是commit阶段。 mount时： 在render阶段会依据jsx对象构建新的workInProgressFiber树，不太理解Fiber双缓存的能够查看往期文章 Fiber架构，而后将相应的fiber节点标记为Placement，示意这个fiber节点须要被插入到dom树中，而后会这些带有副作用的fiber节点退出一条叫做Effect List的链表中。在commit阶段会遍历render阶段造成的Effect List，执行链表上相应fiber节点的副作用，比方Placement插入，或者执行Passive（useEffect的副作用）。将这些副作用利用到实在节点上update时： 在render阶段会依据最新状态的jsx对象比照current Fiber，再构建新的workInProgressFiber树，这个比照的过程就是diff算法，diff算法又分成单节点的比照和多节点的比照，不太分明的同学参见之前的文章 diff算法 ，比照的过程中同样会经验收集副作用的过程，也就是将比照进去的差别标记进去，退出Effect List中，这些比照进去的副作用例如：Placement（插入）、Update(更新)、Deletion（删除）等。在commit阶段同样会遍历Effect List，将这些fiber节点上的副作用利用到实在节点上为什么要先讲render在mount和update阶段的整体流程呢，这是因为react生命周期就是穿插在这些子阶段中执行的，来看一张图 render阶段： mount时：组件首先会经验constructor、getDerivedStateFromProps、componnetWillMount、renderupdate时：组件首先会经验componentWillReceiveProps、getDerivedStateFromProps、shouldComponentUpdate、rendererror时：会调用getDerivedStateFromErrorcommit阶段 mount时：组件会经验componnetDidMountupdate时：组件会调用getSnapshotBeforeUpdate、componnetDidUpdateunMount时：调用componnetWillUnmounterror时：调用componnetDidCatch其中红色的局部不倡议应用，须要留神的是commit阶段生命周期在mutation各个子阶段的执行程序，能够温习上一章 接下来依据一个例子来解说在mount时和update时更新的具体程序： mount时：首先会依照深度优先的形式，顺次构建wip Fiber节点而后切换成current Fiber，在render阶段会顺次执行各个节点的constructor、getDerivedStateFromProps/componnetWillMount、render，在commit阶段，也就是深度优先遍历向上冒泡的时候顺次执行节点的componnetDidMountupdate时：同样会深度优先构建wip Fiber树，在构建的过程中会diff子节点，在render阶段，如果返现有节点的变动，例如上图的c2，那就标记这个节点Update Flag，而后执行getDerivedStateFromProps和render，在commit阶段会顺次执行节点的getSnapshotBeforeUpdate、componnetDidUpdate视频解说（高效学习）:点击学习往期react源码解析文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答

一、这段代码怎么个逻辑const element = <h1 title="foo">Hello</h1>;const container = document.getElementById("root");ReactDOM.render(element, container);babel帮咱们转化（react17当前，react内置了转化工具） const element = <h1 title="foo">Hello</h1>;// 会转成const element = React.createElement("h1", { title: "foo" }, "Hello");最终转成对象 type是dom节点的类型, 它是通过document.createElement 创立的标签名称type也可能是个函数，sep II 会讲到children在这里是个字符串, 然而它通常是个数组，蕴含多个元素. // 最终转成对象const element = {type: "h1",props: { title: "foo", children: "Hello",},};二、react render干了啥为了防止争执, 我用element标识react element, 用node标识Dom元素 const node = document.createElement(element.type)node["title"] = element.props.title// 不要间接抄作dom，不便最初一起操作const text = document.createTextNode("")text["nodeValue"] = element.props.childrennode.appendChild(text)container.appendChild(node)三、createElement函数const element = ( <div id="foo"> <a>bar</a> <b /> </div>)// toconst element = React.createElement( "div", { id: "foo" }, React.createElement("a", null, "bar"), React.createElement("b"))间接放代码 ...

大家好！本文次要是对于行将公布的 react 18 的新个性。那么 react18 带来了什么呢？ 详情能够关注 github React 18 工作组仓库 1. automatic batching：主动批处理。batching 批处理，说的是，能够将回调函数中多个 setState 事件合并为一次渲染，因而是异步的。 解决的问题是屡次同值、不同值 setState, 冀望最初显示的是最初一次 setState 的后果，缩小渲染。 const Index = () => { const [name, setName] = useState('') const [age, setAge] = useState(0) const change = () => { setName('a') setAge(1) // 仅触发一次渲染，批处理，2次setState合并为一次渲染 // 需须要立刻重渲染，须要手动调用 // ReactDOM.flushSync(() => { // setName('a') // 立刻执行渲染 // setAge(1) // 立刻执行渲染 // // 不会合并解决，即没有批处理，触发2次 // }); } console.log(1) // 只打印一次 return ( <div> <p>name: {name}</p> <p>age: {age}</p> <button onClick={change}>更改</button> </div> )}然而 react 18 之前，在 promise、timeout 或者 event 回调中调用屡次 setState，因为失落了上下文，无奈做合并解决，所以每次 setState 调用都会立刻触发一次重渲染： ...

react源码解析1.开篇介绍和面试题视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 怎么学习react源码作为前端最罕用的js库之一，相熟react源码成了高级或资深前端工程师必备的能力，如果你不想停留在api的应用层面或者想在前端技能的深度上有所突破，那相熟react源码将是你提高的很好的形式。 react的纯正体现在它的api上，一切都是围绕setState状态更新进行的，然而外部的逻辑却经验了很大的重构和变动，而且代码量也不小，如果只是从源码文件和函数来浏览，那会很难以了解react的渲染流程。优良工程师几年工夫打造的库，必然有借鉴之处，那么咱们应该怎么学习react源码呢。 首先，咱们能够从函数调用栈动手，理清react的各个模块的性能和它们调用的程序，盖房子一样，先搭好架子，对源码有个整体的意识，而后再看每个模块的细节，第一遍的时候切忌纠结每个函数实现的细节，陷入各个函数的深度调用中。其次能够联合一些demo和本人画图了解，react源码中设计大量的链表操作，画图是一个很好的了解指针操作的形式。源码里也有一些英文正文，能够依据正文或者依据此react源码解析文章进行了解。 相熟react源码并不是久而久之的事，想精进本人的技术，必须花工夫才行。 课程特色本课程遵循react v17.0.1源码的核心思想，目标是打造一门通俗易懂的react源码解析系列文章。课程从源码的各个模块开始，联合大量demo、示例图解和视频教程，带着大家一步一步调试react源码，课程也会齐全遵循react17手写hook和精简版的react不便大家的了解，随着react大版本的更新，此课程也会始终更新。 课程构造 课程播种为什么要学习react源码呢，你是应用了api很久，停留在框架应用层面还是会被动去理解框架的逻辑和运行形式呢。跟着课程走，了解起来不费劲，你将播种： 面试加分：大厂前端岗都要求相熟框架底层原理，也是面试必问环节，相熟react源码会为你的面试加分，也会为你的谈薪流程减少不少筹码坚固基础知识：在源码的scheduler中应用了小顶堆 这种数据结构，调度的实现则应用了messageChannel，在render阶段的reconciler中则应用了fiber、update、链表 这些构造，lane模型应用了二进制掩码，咱们也会介绍diff算法怎么升高比照复杂度。学习本课程也顺便坚固了数据结构和算法、事件循环。日常开发晋升效率：相熟react源码之后，你对react的运行流程有了新的意识，在日常的开发中，置信你对组件的性能优化、react应用技巧和解决bug会更加得心应手。置信学完课程之后，你对react的了解肯定会回升一个品位，甚至会超过大多数面试官了 常见面试题（带上问题学习吧）以下这些问题可能你曾经有答案了，然而你能从源码角度答复进去吗。 jsx和Fiber有什么关系react17之前jsx文件为什么要申明import React from 'react'，之后为什么不须要了Fiber是什么，它为什么能进步性能hooks 为什么hooks不能写在条件判断中状态/生命周期 setState是同步的还是异步的componentWillMount、componentWillMount、componentWillUpdate为什么标记UNSAFE组件 react元素$$typeof属性什么react怎么辨别Class组件和Function组件函数组件和类组件的相同点和不同点开放性问题 说说你对react的了解/请说一下react的渲染过程聊聊react生命周期简述diff算法react有哪些优化伎俩react为什么引入jsx说说virtual Dom的了解你对合成事件的了解 咱们写的事件是绑定在dom上么，如果不是绑定在哪里？为什么咱们的事件手动绑定this(不是箭头函数的状况)为什么不能用 return false 来阻止事件的默认行为？react怎么通过dom元素，找到与之对应的 fiber对象的？解释后果和景象 点击Father组件的div，Child会打印Child吗 function Child() { console.log('Child'); return <div>Child</div>;}function Father(props) { const [num, setNum] = React.useState(0); return ( <div onClick={() => {setNum(num + 1)}}> {num} {props.children} </div> );}function App() { return ( <Father> <Child/> </Father> );}const rootEl = document.querySelector("#root");ReactDOM.render(<App/>, rootEl);打印程序是什么 ...

react源码解析14.手写hooks视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 最要害的是要了解hook队列和update队列的指针指向和updateQueue的更新计算，具体见视频解说 import React from "react";import ReactDOM from "react-dom";let workInProgressHook;//当前工作中的hooklet isMount = true;//是否时mount时const fiber = {//fiber节点 memoizedState: null,//hook链表 stateNode: App//dom};const Dispatcher = (() => {//Dispatcher对象 function mountWorkInProgressHook() {//mount时调用 const hook = {//构建hook queue: {//更新队列 pending: null//未执行的update队列 }, memoizedState: null,//以后state next: null//下一个hook }; if (!fiber.memoizedState) { fiber.memoizedState = hook;//第一个hook的话间接赋值给fiber.memoizedState } else { workInProgressHook.next = hook;//不是第一个的话就加在上一个hook的前面，造成链表 } workInProgressHook = hook;//记录当前工作的hook return workInProgressHook; } function updateWorkInProgressHook() {//update时调用 let curHook = workInProgressHook; workInProgressHook = workInProgressHook.next;//下一个hook return curHook; } function useState(initialState) { let hook; if (isMount) { hook = mountWorkInProgressHook(); hook.memoizedState = initialState;//初始状态 } else { hook = updateWorkInProgressHook(); } let baseState = hook.memoizedState;//初始状态 if (hook.queue.pending) { let firstUpdate = hook.queue.pending.next;//第一个update do { const action = firstUpdate.action; baseState = action(baseState); firstUpdate = firstUpdate.next;//循环update链表 } while (firstUpdate !== hook.queue.pending);//通过update的action计算state hook.queue.pending = null;//重置update链表 } hook.memoizedState = baseState;//赋值新的state return [baseState, dispatchAction.bind(null, hook.queue)];//useState的返回 } return { useState };})();function dispatchAction(queue, action) {//触发更新 const update = {//构建update action, next: null }; if (queue.pending === null) { update.next = update;//update的环状链表 } else { update.next = queue.pending.next;//新的update的next指向前一个update queue.pending.next = update;//前一个update的next指向新的update } queue.pending = update;//更新queue.pending isMount = false;//标记mount完结 workInProgressHook = fiber.memoizedState;//更新workInProgressHook schedule();//调度更新}function App() { let [count, setCount] = Dispatcher.useState(1); let [age, setAge] = Dispatcher.useState(10); return ( <> <p>Clicked {count} times</p> <button onClick={() => setCount(() => count + 1)}> Add count</button> <p>Age is {age}</p> <button onClick={() => setAge(() => age + 1)}> Add age</button> </> );}function schedule() { ReactDOM.render(<App />, document.querySelector("#root"));}schedule();

react源码解析13.hooks源码视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo hook调用入口 在hook源码中hook存在于Dispatcher中，Dispatcher就是一个对象，不同hook 调用的函数不一样，全局变量ReactCurrentDispatcher.current会依据是mount还是update赋值为HooksDispatcherOnMount或HooksDispatcherOnUpdate ReactCurrentDispatcher.current = current === null || current.memoizedState === null//mount or update ? HooksDispatcherOnMount : HooksDispatcherOnUpdate; const HooksDispatcherOnMount: Dispatcher = {//mount时 useCallback: mountCallback, useContext: readContext, useEffect: mountEffect, useImperativeHandle: mountImperativeHandle, useLayoutEffect: mountLayoutEffect, useMemo: mountMemo, useReducer: mountReducer, useRef: mountRef, useState: mountState, //...};const HooksDispatcherOnUpdate: Dispatcher = {//update时 useCallback: updateCallback, useContext: readContext, useEffect: updateEffect, useImperativeHandle: updateImperativeHandle, useLayoutEffect: updateLayoutEffect, useMemo: updateMemo, useReducer: updateReducer, useRef: updateRef, useState: updateState, //...};hook数据结构 在FunctionComponent中，多个hook会造成hook链表，保留在Fiber的memoizedState的上，而须要更新的Update保留在hook.queue.pending中 ...

react源码解析16.concurrent模式视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo concurrent modereact17反对concurrent mode，这种模式的基本目标是为了让利用放弃cpu和io的疾速响应，它是一组新性能，包含Fiber、Scheduler、Lane，能够依据用户硬件性能和网络情况调整利用的响应速度，外围就是为了实现异步可中断的更新。concurrent mode也是将来react次要迭代的方向。 cup：让耗时的reconcile的过程能让出js的执行权给更高优先级的工作，例如用户的输出，io：依附SuspenseFiberFiber咱们之前介绍过，这里咱们来看下在concurrent mode下Fiber的意义，react15之前的reconcile是同步执行的，当组件数量很多，reconcile时的计算量很大时，就会呈现页面的卡顿，为了解决这个问题就须要一套异步可中断的更新来让耗时的计算让出js的执行权给高优先级的工作，在浏览器有闲暇的时候再执行这些计算。所以咱们须要一种数据结构来形容实在dom和更新的信息，在适当的时候能够在内存中中断reconcile的过程，这种数据结构就是Fiber。 SchedulerScheduler独立于react自身，相当于一个独自的package，Scheduler的意义在于，当cup的计算量很大时，咱们依据设施的fps算出一帧的工夫，在这个工夫内执行cup的操作，当工作执行的工夫快超过一帧的工夫时，会暂停工作的执行，让浏览器有工夫进行重排和重绘。在适当的时候持续工作。 在js中咱们晓得generator也能够暂停和持续工作，然而咱们还须要用优先级来排列工作，这个是generator无奈实现的。在Scheduler中应用MessageChannel实现了工夫切片，而后用小顶堆排列工作优先级的高下，达到了异步可中断的更新。 Scheduler能够用过期工夫来代表优先级的高下。 优先级越高，过期工夫越短，离以后工夫越近，也就是说过一会就要执行它了。 优先级越低，过期工夫越长，离以后工夫越长，也就是过很久了能力轮到它执行。 laneLane用二进制位示意工作的优先级，不便优先级的计算，不同优先级占用不同地位的‘赛道’，而且存在批的概念，优先级越低，‘赛道’越多。高优先级打断低优先级，新建的工作须要赋予什么优先级等问题都是Lane所要解决的问题。 batchedUpdates简略来说，在一个上下文中同时触发屡次更新，这些更新会合并成一次更新，例如 onClick() { this.setState({ count: this.state.count + 1 }); this.setState({ count: this.state.count + 1 });} 在之前的react版本中如果脱离以后的上下文就不会被合并，例如把屡次更新放在setTimeout中，起因是处于同一个context的屡次setState的executionContext都会蕴含BatchedContext，蕴含BatchedContext的setState会合并，当executionContext等于NoContext，就会同步执行SyncCallbackQueue中的工作，所以setTimeout中的屡次setState不会合并，而且会同步执行。 onClick() { setTimeout(() => { this.setState({ count: this.state.count + 1 }); this.setState({ count: this.state.count + 1 }); });}export function batchedUpdates<A, R>(fn: A => R, a: A): R { const prevExecutionContext = executionContext; executionContext |= BatchedContext; try { return fn(a); } finally { executionContext = prevExecutionContext; if (executionContext === NoContext) { resetRenderTimer(); //executionContext为NoContext就同步执行SyncCallbackQueue中的工作 flushSyncCallbackQueue(); } }} 在Concurrent mode下，下面的例子也会合并为一次更新，根本原因在如下一段简化的源码，如果屡次setState，会比拟这几次setState回调的优先级，如果优先级统一，则先return掉，不会进行前面的render阶段 ...

react源码解析15.scheduler&Lane视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 当咱们在相似上面的搜寻框组件进行搜寻时会发现，组件分为搜寻局部和搜寻后果展现列表，咱们冀望输入框能立即响应，后果列表能够有期待的工夫，如果后果列表数据量很大，在进行渲染的时候，咱们又输出了一些文字，因为用户输出事件的优先级是很高的，所以就要进行后果列表的渲染，这就引出了不同工作之间的优先级和调度 Scheduler咱们晓得如果咱们的利用占用较长的js执行工夫，比方超过了设施一帧的工夫，那么设施的绘制就会出不的景象。 Scheduler次要的性能是工夫切片和调度优先级，react在比照差别的时候会占用肯定的js执行工夫，Scheduler外部借助MessageChannel实现了在浏览器绘制之前指定一个工夫片，如果react在指定工夫内没比照完，Scheduler就会强制交出执行权给浏览器 工夫切片 在浏览器的一帧中js的执行工夫如下 requestIdleCallback是在浏览器重绘重排之后，如果还有闲暇就能够执行的机会，所以为了不影响重绘重排，能够在浏览器在requestIdleCallback中执行耗性能的计算，然而因为requestIdleCallback存在兼容和触发机会不稳固的问题，scheduler中采纳MessageChannel来实现requestIdleCallback，以后环境不反对MessageChannel就采纳setTimeout。 在之前的介绍中咱们晓得在performUnitOfWork之后会执行render阶段和commit阶段，如果在浏览器的一帧中，cup的计算还没实现，就会让出js执行权给浏览器，这个判断在workLoopConcurrent函数中，shouldYield就是用来判断残余的工夫有没有用尽。在源码中每个工夫片时5ms，这个值会依据设施的fps调整。 function workLoopConcurrent() { while (workInProgress !== null && !shouldYield()) { performUnitOfWork(workInProgress); }}function forceFrameRate(fps) {//计算工夫片 if (fps < 0 || fps > 125) { console['error']( 'forceFrameRate takes a positive int between 0 and 125, ' + 'forcing frame rates higher than 125 fps is not supported', ); return; } if (fps > 0) { yieldInterval = Math.floor(1000 / fps); } else { yieldInterval = 5;//工夫片默认5ms }}工作的暂停在shouldYield函数中有一段，所以能够晓得，如果以后工夫大于工作开始的工夫+yieldInterval，就打断了工作的进行。 ...

react源码解析6.legacy模式和concurrent模式视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo react启动的模式react有3种模式进入主体函数的入口，咱们能够从 react官网文档 应用 Concurrent 模式（实验性）中比照三种模式： legacy 模式： ReactDOM.render(<App />, rootNode)。这是以后 React app 应用的形式。以后没有打算删除本模式，然而这个模式可能不反对这些新性能。blocking 模式： ReactDOM.createBlockingRoot(rootNode).render(<App />)。目前正在试验中。作为迁徙到 concurrent 模式的第一个步骤。concurrent 模式： ReactDOM.createRoot(rootNode).render(<App />)。目前在试验中，将来稳固之后，打算作为 React 的默认开发模式。这个模式开启了所有的新性能。个性比照： legacy 模式在合成事件中有主动批处理的性能，但仅限于一个浏览器工作。非 React 事件想应用这个性能必须应用 unstable_batchedUpdates。在 blocking 模式和 concurrent 模式下，所有的 setState 在默认状况下都是批处理的。会在开发中收回正告 不同模式在react运行时的含意legacy模式是咱们罕用的，它构建dom的过程是同步的，所以在render的reconciler中，如果diff的过程特地耗时，那么导致的后果就是js始终阻塞高优先级的工作(例如用户的点击事件)，体现为页面的卡顿，无奈响应。 concurrent Mode是react将来的模式，它用工夫片调度实现了异步可中断的工作，依据设施性能的不同，工夫片的长度也不一样，在每个工夫片中，如果工作到了过期工夫，就会被动让出线程给高优先级的工作。这部分将在第15节 scheduler&lane模型 。 两种模式函数次要执行过程1.次要执行流程： 2.具体函数调用过程： 用demo_0跟着视频调试更加清晰，黄色局部是次要工作是创立fiberRootNode和rootFiber，红色局部是创立Update，蓝色局部是调度render阶段的入口函数 3.legacy模式： render调用legacyRenderSubtreeIntoContainer，最初createRootImpl会调用到createFiberRoot创立fiberRootNode,而后调用createHostRootFiber创立rootFiber，其中fiberRootNode是整个我的项目的的根节点，rootFiber是以后利用挂在的节点，也就是ReactDOM.render调用后的根节点 //最上层的节点是整个我的项目的根节点fiberRootNodeReactDOM.render(<App />, document.getElementById("root"));//rootFiberReactDOM.render(<App />, document.getElementById("root"));//rootFiber ...

react源码解析3.react源码架构视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 这一章的目标是让咱们认识一下react源码架构和各个模块。 在真正的代码学习之前，咱们须要在大脑中有一个react源码的地图，晓得react渲染的大抵流程和框架，这样能力从上帝视角看react是怎么更新的，来吧少年。 react的外围能够用ui=fn(state)来示意，更具体能够用 const state = reconcile(update);const UI = commit(state);下面的fn能够分为如下一个局部： Scheduler（调度器）： 排序优先级，让优先级高的工作先进行reconcileReconciler（协调器）： 找出哪些节点产生了扭转，并打上不同的Flags（旧版本react叫Tag）Renderer（渲染器）： 将Reconciler中打好标签的节点渲染到视图上一图胜千言： jsxjsx是js语言的扩大，react通过babel词法解析（具体怎么转换能够查阅babel相干插件），将jsx转换成React.createElement，React.createElement办法返回virtual-dom对象（内存中用来形容dom阶段的对象），所有jsx实质上就是React.createElement的语法糖，它能申明式的编写咱们想要组件呈现出什么样的ui成果。在第5章jsx咱们会具体介绍jsx解析之后的后果。 Fiber双缓存Fiber对象下面保留了包含这个节点的属性、类型、dom等，Fiber通过child、sibling、return（指向父节点）来造成Fiber树，还保留了更新状态时用于计算state的updateQueue，updateQueue是一种链表构造，下面可能存在多个未计算的update，update也是一种数据结构，下面蕴含了更新的数据、优先级等，除了这些之外，下面还有和副作用无关的信息。 双缓存是指存在两颗Fiber树，current Fiber树形容了以后出现的dom树，workInProgress Fiber是正在更新的Fiber树，这两颗Fiber树都是在内存中运行的，在workInProgress Fiber构建实现之后会将它作为current Fiber利用到dom上 在mount时（首次渲染），会依据jsx对象（Class Component或的render函数者Function Component的返回值），构建Fiber对象，造成Fiber树，而后这颗Fiber树会作为current Fiber利用到实在dom上，在update（状态更新时如setState）的时候，会依据状态变更后的jsx对象和current Fiber做比照造成新的workInProgress Fiber，而后workInProgress Fiber切换成current Fiber利用到实在dom就达到了更新的目标，而这一切都是在内存中产生的，从而缩小了对dom好性能的操作。 例如上面代码的Fiber双缓存构造如下，在第7章会具体解说 function App() { const [count, setCount] = useState(0); return ( <> <h1 onClick={() => { // debugger; setCount(() => count + 1); }} > <p title={count}>{count}</p> xiaochen </h1> </> )}ReactDOM.render(<App />, document.getElementById("root")); ...

面试官:你是怎么了解Fiber的hello，这里是潇晨，明天咱们来聊一聊Fiber。不晓得大家面试的时候有没有遇到过和react Fiber相干的问题呢，这一类问题比拟凋谢，但也是考查对react源码了解深度的问题，如果面试高级前端岗，凑巧你平时用的是react，那这道面试题是你必须要会的一道。 大型利用为什么会慢那之前的利用为什么会慢呢，传统的前端利用例如js原生或者jquery利用，在构建简单的大型利用的时候，各种页面之前的互相操作和更新很有可能会引起页面的重绘或重排列，而频繁操作这些dom其实是十分耗费性能的 在看下图，这是一个节点上的属性，能够看到一个节点上的属性是十分多的，在简单利用中，操作这些属性的时候可能一不小心就会引起节点大量的更新，那如何进步利用的性能呢？ const div = document.createElement('div');let str = ''for(let k in div){ str+=','+k}console.log(str) 为什么会呈现Fiberreact从15版本开始，到当初的17，以及快进去的18，外部经验了十分大的变动，这一切都是围绕着一个指标进行的，这个指标是异步可中断的更新，而这个目标的最终后果是为了构建疾速响应的利用。 简单利用在更新的时候可能会更新大量的dom，所以react在应用层和dom层之间减少了一层Fiber，而Fiber是在内存中工作的，所以在更新的时候只须要在内存中进行dom更新的比拟，最初再利用到须要更新实在节点上 这就引出了一个比照新老节点的过程，而比照两棵树的计算其实是十分耗费性能的，react提出了diff算法来升高比照的复杂度，具体diff的过程能够参考往期文章 diff算法 然而面对越来越简单的利用，diff算法耗费的工夫片还是很长，在没做出优化的状况下，react在进行Fiber的比照和更新节点上的状态的时候仍然力不从心， 在react15之前，这个比照的过程被称之为stack reconcile，它的比照形式是‘一条路走到黑’，也就是说这个比照的过程是不能被中断的，这会呈现什么状况呢，比方在页面渲染一个比拟耗费性能操作，如果这个时候如果用户进行一些操作就会呈现卡顿，利用就会显得不晦涩。react16之后呈现了scheduler，以及react17的Lane模型，它们能够配合着工作，将比拟耗时的工作依照Fiber节点划分成工作单元，并且遍历Fiber树计算或者更新节点上的状态能够被中断、持续，以及能够被高优先级的工作打断，比方用户触发的更新就是一个高优先级的工作，高优先级的工作优先执行，利用就不会太卡顿。什么是Fiber这就是react所要做的事件了，react翻新的提出了jsx，申明式地形容页面出现的成果，jsx会被babel通过ast解析成React.createElement，而React.createElement函数执行之后就是jsx对象或者说是virtual-dom 在mount的时候，也就是首次渲染的时候，render阶段会依据jsx对象生成新的Fiber节点，而后这些Fiber节点会被标记成带有‘Placement’的副作用，阐明它们是新增的节点，须要被插入到实在节点中，在commit阶段就会操作实在节点，将它们插入到dom树中。在update的时候，也就是利用触发更新的时候，render阶段会依据最新的jsx和老的Fiber进行比照，生成新的Fiber，这些Fiber会带有各种副作用，比方‘Deletion’、‘Update’、‘Placement’等，这一个比照的过程就是diff算法 ，在commit阶段会操作实在节点，执行相应的副作用。如果对render阶段和commit阶段不理解的能够查看往期文章 8.render阶段 10.commit阶段 Fiber有比拟多的含意，他能够从以下几个角度了解： 工作单元 工作合成 ：Fiber最重要的性能就是作为工作单元，保留原生节点或者组件节点对应信息（包含优先级），这些节点通过指针的形似造成Fiber树增量渲染：通过jsx对象和current Fiber的比照，生成最小的差别补丁，利用到实在节点上依据优先级暂停、持续、排列优先级：Fiber节点上保留了优先级，能通过不同节点优先级的比照，达到工作的暂停、持续、排列优先级等能力，也为下层实现批量更新、Suspense提供了根底保留状态：因为Fiber能保留状态和更新的信息，所以就能实现函数组件的状态更新，也就是hooksFiber的数据结构Fiber的自带的属性如下： //ReactFiber.old.jsfunction FiberNode( tag: WorkTag, pendingProps: mixed, key: null | string, mode: TypeOfMode,) { //作为动态的数据结构 保留节点的信息 this.tag = tag;//对应组件的类型 this.key = key;//key属性 this.elementType = null;//元素类型 this.type = null;//func或者class this.stateNode = null;//实在dom节点 //作为fiber数架构 连接成fiber树 this.return = null;//指向父节点 this.child = null;//指向child this.sibling = null;//指向兄弟节点 this.index = 0; this.ref = null; //用作为工作单元 来计算state this.pendingProps = pendingProps; this.memoizedProps = null; this.updateQueue = null; this.memoizedState = null; this.dependencies = null; this.mode = mode; //effect相干 this.effectTag = NoEffect; this.nextEffect = null; this.firstEffect = null; this.lastEffect = null; //优先级相干的属性 this.lanes = NoLanes; this.childLanes = NoLanes; //current和workInProgress的指针 this.alternate = null;}Fiber是怎么工作的当初咱们晓得了Fiber能够保留实在的dom，实在dom对应在内存中的Fiber节点会造成Fiber树，这颗Fiber树在react中叫current Fiber，也就是以后dom树对应的Fiber树，而正在构建Fiber树叫workInProgress Fiber，这两颗树的节点通过alternate相连. ...

react源码解析2.react的设计理念视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 异步可中断React15慢在哪里在讲这部分之前，须要讲是那些因素导致了react变慢，并且须要重构呢。 React15之前的协调过程是同步的，也叫stack reconciler，又因为js的执行是单线程的，这就导致了在更新比拟耗时的工作时，不能及时响应一些高优先级的工作，比方用户的输出，所以页面就会卡顿，这就是cpu的限度。 解决方案如何解决这个问题呢，试想一下，如果咱们在日常的开发中，在单线程的环境中，遇到了比拟耗时的代码计算会怎么做呢，首先咱们可能会将工作宰割，让它可能被中断，在其余工作到来的时候让出执行权，当其余工作执行后，再从之前中断的局部开始异步执行剩下的计算。所以要害是实现一套异步可中断的计划。 实现在方才的解决方案中提到了工作宰割，和异步执行，并且能让出执行权，由此能够带出react中的三个概念 Fiber：react15的更新是同步的，因为它不能将工作宰割，所以须要一套数据结构让它既能对应实在的dom又能作为分隔的单元，这就是Fiber。 let firstFiberlet nextFiber = firstFiberlet shouldYield = false//firstFiber->firstChild->siblingfunction performUnitOfWork(nextFiber){ //... return nextFiber.next}function workLoop(deadline){ while(nextFiber && !shouldYield){ nextFiber = performUnitOfWork(nextFiber) shouldYield = deadline.timeReaming < 1 } requestIdleCallback(workLoop)}requestIdleCallback(workLoop)Scheduler：有了Fiber，咱们就须要用浏览器的工夫片异步执行这些Fiber的工作单元，咱们晓得浏览器有一个api叫做requestIdleCallback，它能够在浏览器闲暇的时候执行一些工作，咱们用这个api执行react的更新，让高优先级的工作优先响应不就能够了吗，但事实是requestIdleCallback存在着浏览器的兼容性和触发不稳固的问题，所以咱们须要用js实现一套工夫片运行的机制，在react中这部分叫做scheduler。Lane：有了异步调度，咱们还须要细粒度的治理各个工作的优先级，让高优先级的工作优先执行，各个Fiber工作单元还能比拟优先级，雷同优先级的工作能够一起更新，想想是不是更cool呢。产生进去的下层实现 因为有了这一套异步可中断的机制，咱们就能实现batchedUpdates批量更新和Suspense 上面这两张图就是应用异步可中断更新前后的区别，能够领会一下 代数效应（Algebraic Effects）除了cpu的瓶颈问题，还有一类问题是和副作用相干的问题，比方获取数据、文件操作等。不同设施性能和网络情况都不一样，react怎么去解决这些副作用，让咱们在编码时最佳实际，运行利用时体现统一呢，这就须要react有拆散副作用的能力，为什么要拆散副作用呢，因为要解耦，这就是代数效应。 发问：咱们都写过获取数据的代码，在获取数据前展现loading，数据获取之后勾销loading，假如咱们的设施性能和网络情况都很好，数据很快就获取到了，那咱们还有必要在一开始的时候展现loading吗？如何能力有更好的用户体验呢？ 看下上面这个例子 function getPrice(id) { return fetch(`xxx.com?id=${productId}`).then((res)=>{ return res.price })}async function getTotalPirce(id1, id2) { const p1 = await getPrice(id1); const p2 = await getPrice(id2); return p1 + p2;}async function run(){ await getTotalPrice('001', '002'); }getPrice是一个异步获取数据的办法，咱们能够用async+await的形式获取数据，然而这会导致调用getTotalPrice的run办法也会变成异步函数，这就是async的传染性，所以没法拆散副作用。 ...

react源码解析1.开篇介绍和面试题视频解说（高效学习）：进入学习往期文章：1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录构造和调试 5.jsx&外围api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件零碎 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 怎么学习react源码作为前端最罕用的js库之一，相熟react源码成了高级或资深前端工程师必备的能力，如果你不想停留在api的应用层面或者想在前端技能的深度上有所突破，那相熟react源码将是你提高的很好的形式。 react的纯正体现在它的api上，一切都是围绕setState状态更新进行的，然而外部的逻辑却经验了很大的重构和变动，而且代码量也不小，如果只是从源码文件和函数来浏览，那会很难以了解react的渲染流程。优良工程师几年工夫打造的库，必然有借鉴之处，那么咱们应该怎么学习react源码呢。 首先，咱们能够从函数调用栈动手，理清react的各个模块的性能和它们调用的程序，盖房子一样，先搭好架子，对源码有个整体的意识，而后再看每个模块的细节，第一遍的时候切忌纠结每个函数实现的细节，陷入各个函数的深度调用中。其次能够联合一些demo和本人画图了解，react源码中设计大量的链表操作，画图是一个很好的了解指针操作的形式。源码里也有一些英文正文，能够依据正文或者依据此react源码解析文章进行了解。 相熟react源码并不是久而久之的事，想精进本人的技术，必须花工夫才行。 课程特色本课程遵循react v17.0.1源码的核心思想，目标是打造一门通俗易懂的react源码解析系列文章。课程从源码的各个模块开始，联合大量demo、示例图解和视频教程，带着大家一步一步调试react源码，课程也会齐全遵循react17手写hook和精简版的react不便大家的了解，随着react大版本的更新，此课程也会始终更新。 课程构造 课程播种为什么要学习react源码呢，你是应用了api很久，停留在框架应用层面还是会被动去理解框架的逻辑和运行形式呢。跟着课程走，了解起来不费劲，你将播种： 面试加分：大厂前端岗都要求相熟框架底层原理，也是面试必问环节，相熟react源码会为你的面试加分，也会为你的谈薪流程减少不少筹码坚固基础知识：在源码的scheduler中应用了小顶堆 这种数据结构，调度的实现则应用了messageChannel，在render阶段的reconciler中则应用了fiber、update、链表 这些构造，lane模型应用了二进制掩码，咱们也会介绍diff算法怎么升高比照复杂度。学习本课程也顺便坚固了数据结构和算法、事件循环。日常开发晋升效率：相熟react源码之后，你对react的运行流程有了新的意识，在日常的开发中，置信你对组件的性能优化、react应用技巧和解决bug会更加得心应手。置信学完课程之后，你对react的了解肯定会回升一个品位，甚至会超过大多数面试官了 常见面试题（带上问题学习吧）以下这些问题可能你曾经有答案了，然而你能从源码角度答复进去吗。 jsx和Fiber有什么关系react17之前jsx文件为什么要申明import React from 'react'，之后为什么不须要了Fiber是什么，它为什么能进步性能hooks 为什么hooks不能写在条件判断中状态/生命周期 setState是同步的还是异步的componentWillMount、componentWillMount、componentWillUpdate为什么标记UNSAFE组件 react元素$$typeof属性什么react怎么辨别Class组件和Function组件函数组件和类组件的相同点和不同点开放性问题 说说你对react的了解/请说一下react的渲染过程聊聊react生命周期简述diff算法react有哪些优化伎俩react为什么引入jsx说说virtual Dom的了解你对合成事件的了解 咱们写的事件是绑定在dom上么，如果不是绑定在哪里？为什么咱们的事件手动绑定this(不是箭头函数的状况)为什么不能用 return false 来阻止事件的默认行为？react怎么通过dom元素，找到与之对应的 fiber对象的？解释后果和景象 点击Father组件的div，Child会打印Child吗 function Child() { console.log('Child'); return <div>Child</div>;}function Father(props) { const [num, setNum] = React.useState(0); return ( <div onClick={() => {setNum(num + 1)}}> {num} {props.children} </div> );}function App() { return ( <Father> <Child/> </Father> );}const rootEl = document.querySelector("#root");ReactDOM.render(<App/>, rootEl);打印程序是什么 ...