首页
首页
沸点
课程
直播
活动
竞赛
商城
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
确定删除此收藏集吗
删除后此收藏集将被移除
取消
确定删除
确定删除此文章吗
删除后此文章将被从当前收藏集中移除
取消
确定删除
编辑收藏集
名称:
描述:
0
/100
公开
当其他人关注此收藏集后不可再更改为隐私
隐私
仅自己可见此收藏集
取消
确定
react
订阅
awehook
更多收藏集
微信扫码分享
微信
新浪微博
QQ
13篇文章 · 0订阅
【长文慎入】一文吃透 react 事件机制原理
上个月有幸研究了 react 事件机制这个知识点,并且在公司内部把自己的理解进行了分享。现在趁还算热乎赶紧的整理下来,留住这个长脸的时刻。 主要分为4大块儿,主要是结合源码对 react 事件机制的原理 进行分析,希望可以让你对 react事件机制有更清晰的认识和理解。 当然肯…
React性能分析利器来了,妈妈再也不用担心我的React应用慢了
默认打开Profiler什么都没有,要点击录制按钮进行记录(跟chrome的performance挺像)。 看上去像一个柱状图,每一个柱子代表一次commit,他的颜色和高度对应执行时长,越高颜色越黄代表时间越长,反之越短。 火焰图部分会以一个类似树形的结构显示一次commit…
2019年了,整理了N个实用案例帮你快速迁移到React Hooks
在React Conf 2018宣布React Hooks后,我第一时间开始尝试使用React Hooks,现在新项目基本不写Class组件了。对我来说,它确实让我的开发效率提高了很多,改变了已有的组件开发思维和模式. 我在React组件设计实践总结04 - 组件的思维中已经总…
【React深入】setState的执行机制
以下几个问题是我们在实际开发中经常会遇到的场景,下面用几个简单的示例代码来还原一下。 3.更新时会把每个组件的更新合并,每个组件只会触发一次更新的生命周期。 由于源码比较复杂,就不贴在这里了,有兴趣的可以去github上clone一份然后按照下面的流程图去走一遍。 1.将set…
性能!!让你的 React 组件跑得再快一点
React 基于虚拟 DOM 和高效 Diff 算法的完美配合,实现了对 DOM 最小粒度的更新。大多数情况下,React 对 DOM 的渲染效率足以我们的业务日常。但在个别复杂业务场景下,性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能,其很重要的一个方向,就是避免…
[译] Fiber内幕:深入概述React新的协调算法
React使用一个构建用户界面的JavaScript库,它的核心机制是跟踪组件状态的的变化,然后将更新的状态投影在屏幕上。在React中,我们把这个过程称为协调。我们调用setState方法后,框架会检测state和prop是否发生变化,并重新渲染UI组件。 React文档关于…
从Preact中了解React组件和hooks基本原理
React 的代码库现在已经比较庞大了,加上 v16 的 Fiber 重构,初学者很容易陷入细节的汪洋大海,搞懂了会让人觉得自己很牛逼,搞不懂很容易让人失去信心, 怀疑自己是否应该继续搞前端。那么尝试在本文这里找回一点自信吧(高手绕路). Preact 是 React 的缩略版…
React Hooks 详解 【近 1W 字】+ 项目实战
如果你在编写函数组件并意识到需要向其添加一些 state,以前的做法是必须将其它转化为 class。现在你可以直接在现有的函数组件中使用 Hooks 1. 类组件的不足 综上所述,如果不注意的话,很容易写成第三种写法,导致性能上有所损耗。 2. Hooks 优势 副作用的关注点…
怎样学习React?当然是自己动手实现一个React啦
深入学习一个框架最直接的方式,就是弄明白框架的原理。React无疑是一个非常值得学习其原理的框架,它设计简单,没有引入任何新的概念,一个组件就是一个方法或一个类。 但是要完整弄明白React的源码并不简单,React的代码有数万行,特别是在引入Fiber架构后,在React简单…
这可能是最通俗的 React Fiber(时间分片) 打开方式
写一篇关于 React Fiber 的文章, 这个 Flag 立了很久,这也是今年的目标之一。 最近的在掘金的文章获得很多关注和鼓励,给了我很多动力,所以下定决心好好把它写出来。 我会以最通俗的方式将它讲透, 因此这算是一篇科普式的文章。不管你是使用React、还是Vue,这里…