CodingMeUp
commented
6 years ago 15、组件中setState继承自ReactComponent、在挂载组件的时候实例会接受一个React的更新队列作为updater的属性、setState传递的对象(partialState)执行enqueneUpdate、如果更新已经在进展中、则注入到dirtyComponents如果没有则初始化打开更新事务再注入到dirtyComponents
一、 每个组件都有自己的一组处于等待的”状态“的列表，当你在一次事务中调用 setState 方法，其实只是把那个状态对象注入一个队列里，它会在之后一个一个依次被合并到组件 state 中。调用此setState方法同时，你的组件也会被添加进 dirtyComponents 列表。
简单说： setState后判断批处理事务有没打开，无就打开，把受到影响的组件添加到dirtyComponents列表、调用ReactUpdates.flushBatchedUpdates的同时关闭事务、再处理dirtyComponents列表的中的组件（这里有排序、挂载的时候组件获得的序列整数[mount order]、父组件先挂载先更新）、根据提升批号updateBatchNumber避免重复更新同一个组件
16、关于更新组件
已经挂载后的组件执行再更新操作的时候、componentWillReceiveProps和shouldComponentUpdate方法会被调用、若这个更新有效那DOM会被更新、DIFF算法会生效、对复杂的实现往往会重写、componentWillUpdate不调用setState了、把componentDidUpdate压入队列、调用render方法拿到记过、判断组件是否需要被完全替换或者额外的更新、调用已经挂载后的组件执行再更新操作的时候、componentWillReceiveProps和shouldComponentUpdate方法会被调用、若这个更新有效那DOM会被更新、DIFF算法会生效、对复杂的实现往往会重写、componentWillUpdate不调用setState了、把componentDidUpdate压入队列、调用render方法拿到记过、判断组件是否需要被完全替换或者额外的更新、调用componentDidUpdate
1、使用ReactDom.render创建你的组件Component
2、创建ReactCompositeComponent对象让根元素包裹整个VDOM
3、开始挂载(mount)组件
4、开始批量更新(batch update)
5、事务包裹预处理UI并禁用浏览器相关的事件处理
6、事务更新队列返回的更新(updater)被赋值给实例、构造组件后创建了new ExampleApplication()、开始第一次接触React生态系统
7、发生行为componentWillMount、可以setState但是不会触发render(因为此时组件还没有被挂载)
8、订阅componentDidMount、被注入了事务队列、在很后面执行、在挂载系列操作执行完后才执行
9、调用组件中申明的render方法、第二次接触我们代码
10、基于ReactCompositeComponent的render方法获得的元素创建VDOM,所以VDOM是一个ReactDomElement、继续挂载
11、创建_Tag的HTML标签(复杂HTML标签封装)、更新DOM属性及创建子元素及挂载
12、更新DOM属性、这里是性能优化重要一环(diff差分对比算法探测属性的差异)
一、lastprops循环(检查nextProps对象里是否同prop，相同就跳过，因为会再nextProps循环中处理,重置样式的值，删除时间监听器，去除DOM属性名和属性值)
二、nextprops循环(检查prop是不是变化、也就是检查将来值和老值相同，相同跳过，对于样式，我们更新从lastprop到现在变化的部分值、添加事件监听器如onclick、根据事务传递下来确定DOM是否准备好来判断添加监听器的时间、处理完事件监听器、设置DOM属性和值)
13、组件本身的创建完了、子组件的创建
14、一种被称作markup的HTML生成、代替父容器的内容、还原UI并告知挂载准备好了、(调用componentDidMount)、清空批量更新并且处理脏组件