首先，如何发现是chrome导致的cpu过热和风扇启动呢。 我们可以去mac的活动监视器里去看，按cpu倒序。 也可以去360这样的安全管家软件了去看： 之后我们去分析chrome里面到底哪里有问题： chrome其实也有任务管理器可以打开： 我当时会发现上面任务管理器有一个占用超过100% cpu的进程是某个插件，于是我搜索任务管理器里面的插件id。 就这...

fiber架构的由来 以前咱们实现的react源码，他初始mount和二次update都是一个递归的树的渲染过程。这个任务消耗其实不小，对于单线程的js来说很容易可能就卡住主线程了。 如果用requestIdleCallback来空闲时间执行： 他无法区分任务优先级。因为并不是所有渲染都是低优先级的。可能也有一些要赶紧执行render的东西。 mount和u...

介绍

react16.8里面增加了hooks

前置准备 jsx我们应该叫他什么。他本质上是createElement( div 或MyApp, props, xxxx), 我觉得他返回的应该叫组件树或elements树吧（这个树里既有div类型的节点，又有MyApp函数式组件类型的节点） 实际render的时候，才会执行上述elements树里面的组件函数或class，从而拿到每个element节点的...

类组件生命周期

elements和Component概念 上一节我们主入口render的时候，你会发现我们render的本质是React.createElement: // ReactDOM.render( div class= page-wrap hello myreact render to dom /div ) React.createElement(div, { ...

dom和虚拟dom 真实dom是前端必修课，她是浏览器内提供的一套底层文档对象模型，从而让你渲染浏览器内的内容以及操控浏览器内的内容。 如果从技术本质上来看，她其实应该是浏览器这个软件本身底层 c++所实现的渲染之上的一层逻辑抽象。用一种dom这样的数据结构来管理浏览器画布里绘制的东西。 再从技术层面往上层看，c++的dom模型系统为了能被开发者调用，她暴露...

官方脚手架区别 目前官方版本是react19.https://react.dev/learn/creating-a-react-app learn文档左侧有： create a react app。 这个是直接用现成的框架，即携带了路由、请求库等的完整框架。例如next.js。 因为react是一个库并不是框架，所以这些next.js框架就给你把其他配套加上...

本教程以react18为例。 源码学什么 核心原理 组件生命周期 虚拟dom实现 diff算法 组件渲染与更新 hooks机制 事件与状态管理 事件代理机制 自定义事件系统 setState工作原理 状态更新处理 props与state react架构 fiber系统 cocurrent模式 lane模型 调度系统 时间切片 react功能简介 传统的前端开...

每天我都在思考做“知否”的价值是什么。今日我思考的切入点是“公开性”。