chrome占用cpu过高的解决 技术实现
首先，如何发现是chrome导致的cpu过热和风扇启动呢。 我们可以去mac的活动监视器里去看，按cpu倒序。 也可以去360这样的安全管家软件了去看： 之后我们去分析chrome里面到底哪里有问题： chrome其实也有任务管理器可以打开： 我当时会发现上面任务管理器有一个占用超过100% cpu的进程是某个插件，于是我搜索任务管理器里面的插件id。 就这...
react源码解密8-fiber架构 技术实现
fiber架构的由来 以前咱们实现的react源码，他初始mount和二次update都是一个递归的树的渲染过程。这个任务消耗其实不小，对于单线程的js来说很容易可能就卡住主线程了。 如果用requestIdleCallback来空闲时间执行： 他无法区分任务优先级。因为并不是所有渲染都是低优先级的。可能也有一些要赶紧执行render的东西。 mount和u...
react源码解密6-渲染性能优化 技术实现
前置准备 jsx我们应该叫他什么。他本质上是createElement( div 或MyApp, props, xxxx), 我觉得他返回的应该叫组件树或elements树吧（这个树里既有div类型的节点，又有MyApp函数式组件类型的节点） 实际render的时候，才会执行上述elements树里面的组件函数或class，从而拿到每个element节点的...
react源码解密4-实现组件 技术实现
elements和Component概念 上一节我们主入口render的时候，你会发现我们render的本质是React.createElement: // ReactDOM.render( div class= page-wrap hello myreact render to dom /div ) React.createElement(div, { ...
react源码解密1-思路介绍 技术实现
本教程以react18为例。 源码学什么 核心原理 组件生命周期 虚拟dom实现 diff算法 组件渲染与更新 hooks机制 事件与状态管理 事件代理机制 自定义事件系统 setState工作原理 状态更新处理 props与state react架构 fiber系统 cocurrent模式 lane模型 调度系统 时间切片 react功能简介 传统的前端开...