react原理

JSX：标签语法

• 渲染逻辑与UI逻辑内在耦合

UI绑定事件，状态变化更新到UI，在UI展示准备好的数据

• react组件首字母大写更加语义化，Dom标签小写
• React.createElement的语法糖；编译到<当作html来编译，编译到｛｝当作普通js代码编译

状态更新
16.3生命周期

16.3之前的生命周期

react元素：react创建的普通对象，reactdom负责更新dom与react元素保持一致

• 不可变对象（不能添加修改删除属性，不能修改已有属性的可枚举，可配置，可写性）嵌套Object.freeze
• 也可以是用户自定义组件

组件：独立可复用的代码片段，函数组件和class组件
事件处理

• return false不能阻止默认行为，必须显式用preventDefault

key：数组中设置唯一key

diff算法

• 传统diff算法是O(n3):两颗数的所有节点对比需要O(n²)，对比过程中若不一样则删除再插入，若不存在则删除，若新增则插入O(n)
• 三个前提
  （1）只对同级比较，跨层级的dom不会进行复用
  （2）不同类型节点生成的dom树不同，此时会直接销毁老节点及子孙节点，并新建节点
  （3）可以通过key来对元素diff的过程提供复用的线索
• 同一层级加key：
  (1)key是react给组件的标识，复用原先组件，减少卸载组件创建组件开销；
  (2)若不加key，会依次比较两个列表，遇到不同则舍弃重新创建；
  (3)不推荐用index做key，index会在插入删除排序有变动，会更新子组件；若是用唯一id做key，子组件只是移动

代码分割

• 动态import，使引入的代码分离在另一个bundle中，在使用它时才加载

import(/* webpackChunkName: "Utils" */ './Utils').then(util=>{
            this.setState({count:util.add()});
})

• react.lazy:懒加载组件，分离出需要懒加载的组件，等加载完展示；基于路由分割，一个路由一个bundle，等到跳转到某个路由时才加载对应的bundle

Context

• 无需为每层组件手动添加props，就能在组件间传递数据
• React.createContext创建，Provider提供包含的子组件共享值，Consumer子组件可修改共享值

refs