浅谈React事件系统主要分为两篇:

浅谈React事件系统-事件绑定
浅谈React事件系统-源码解读

场景

一位同事在群里抛出一个问题, 假设一个列表有800个节点, 给每个节点都绑定一个 onClick事件, 如果下面这样子写页面就会有非常卡

浅谈React事件系统主要分为两篇:

浅谈React事件系统-事件绑定
浅谈React事件系统-源码解读

准备工作

• 去github下载一份源码react v16.2.0
• 下载一个好用的编辑器, 支持快速定位到当前function的引用

背景

在SPAUI提供的众多组件中, Tree树状选择器组件是比较复杂的UI组件之一, 由于前端架构的演进, 老的Tree组件在功能拓展性和兼容性越来越显得吃力. 重构Tree组件似乎越来越有必要了.
在重构Tree组件的过程中, 缩小50%+代码量和提升40%性能的背后是对组件完全重新设计, 包括数据传入处理, 渲染, 事件处理等

写这篇文章的初衷也是为了记录自己在重构Tree组件中的一些思考, 方便后续维护的同学理解它, 同时也希望里面提到的组件设计思想可以被认可并推广

问题背景

有个做NodeJS后台的同学抛出了一段代码, 问为啥输出的结果不一样

1
2
3
4
5
6
7
8
9
10

co(fucntion* () {
	var a = yield [Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)]
	console.log(a)
	// [1, 2, 3]
})
aysnc fucntion() {
	var a = await [Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)]
	console.log(a)
	//  [Promise.resolve(1), Promise.resolve(2). Promise.resolve(3)]
}

前言

提起React,可能脑海里第一印象就是Virtual Dom, 性能好, 渲染快, 之前也看过很多现成的原理分析文章, 但是别人的东西始终是建立在别人的理解之上,
既然现在平时的工作已经大规模使用React及其生态，那么React 源码分析一方面可以加深对React理解，另外一方面学习其内核原理，更好的在工作业务中寻找一个最佳实践。
本次源码阅读的版本是 从2017年11.28的发布的 React 16.2版本