React 初始化渲染:
babel会把jsx的语法转换成React.createElement(type, config, children)的形式,这个函数执行的结果是生成一个ReactElement 对象(单纯的 JavaScript 对象,仅包括 type, props, key, ref 等属性),当调用ReactDOM.render(<APP/>)的时候,会根据ReactElement的四种类型,生成四种不同的class,每个class都有一个mountComponent的方法,这个方法里面会返回html,然后赋值给container,获取html的过程是递归的
从源码全面剖析 React 组件更新机制
React - setState源码分析
React源码解析(一):组件的实现与挂载(发散)
React 源码深度解读(九):单个元素更新
React 事件代理与 stopImmediatePropagation:
1. react是基于事件委托实现事件代理的,举个例子,不管有多少个子元素绑定了clickc事件,在document上针对click事件只绑定了一个disptachEvent函数,在该函数中通过e.target属性,去识别哪些子元素触发了clikc事件
2. react的event对象是react 自己合成的,如果想获取原生的需要调取e.nativeEvent,还对象上还有一个stopImmediatePropagation方法,可以阻止同级别的事件
React.PureComponent:
如果是Component,哪怕props和state没有变化,比如父组件setState了一个不相关数据,子组件也会重新渲染,PureComponent做的是一个浅比较,即只比较第一层和第二层是否相等,如果相等,则认为没变化
zh-hans.reactjs.org/docs/react-…
完全理解React Fiber
React Fiber是什么
React Hooks 解析(上):基础
React Hooks 解析(下):进阶