![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 80
起晚的蜗牛
Though getting up late, I will keep going and never give up.
展开
-
React 的调和算法(Diffing 算法)
目录算法策略单节点diffing数组节点diffingkey值的使用要求算法策略React的调和算法,主要发生在render阶段,调和算法并不是一个特定的算法函数,而是指在调和过程中,为提高构建workInProcess树的性能,以及Dom树更新的性能,而采用的一种策略,又称diffing算法。 在React 的官网上描述“Diffing” 算法时,提到了“diffing ...原创 2019-10-18 00:02:00 · 2449 阅读 · 0 评论 -
React的调和过程(Reconciliation)
目录什么是Reconciliation调和的目的触发调和过程的方式调和过程涉及的数据结构ReactElementFibe 节点两棵Fibe Node树两棵树的创建时间两棵树关联Instance & Fibe & DOM 关联线性任务链effect list调和过程Render阶段(renderRoot)递归流程Com...原创 2019-10-17 23:54:24 · 3819 阅读 · 1 评论 -
react 性能提升
使用React框架时,可以从两方面提高应用的性能:减少不必要的Render函数的调用。 复用Dom减少不必要的Render函数的调用在React的生命周期里有四种方式可以触发一个组件render函数的调用,分别是:1. 组件初始挂载时2. props 更新时3. 调用 setState()4. 调用forceUpdate()这四种方式中,初始挂载的调用是必不可少的,...原创 2019-11-04 01:01:29 · 329 阅读 · 1 评论 -
React 解决 “cross-cutting concerns” 问题
在React 官方文档中描述render prop 时,是为了解决横切关注问题“cross-cutting concerns”。“cross-cutting concerns”指的是两个非常不一样的组件存在一些类似的功能。对于“cross-cutting concerns” 问题,React 给出了三种解决方案来复用类似功能:1)Minxs:解决部分method类似问题,但是已被弃用,ES6 ...原创 2019-09-11 00:33:31 · 1565 阅读 · 0 评论 -
react 中使用 plupload 上传文件
这几天做一个项目的迭代开发,需要在react 中使用plupload 插件实现上传文件。需求很简单,如下图,点击“...” 按钮选择文件,点击“Import”按钮上传文件。 plupload 上传文件大概分为以下几步:1. 新建一个uploader实例,并在构造时配置好上传的相关属性。const uploader = new plupload.Uploader({ browse_butt...原创 2018-06-14 00:05:43 · 6749 阅读 · 2 评论