2021-08-09小记

react生命周期

• 挂载阶段：
  constructor() -----> 初始化构造函数
  static getDerivedStateFromProps() -------->计算属性，必须有返回值，如果没有则return null
  return出来的值会合并到state中
  render() ---------> 渲染函数
  componentDidMount() ---------- 组件挂载完毕执行

• 更新阶段：
  static getDerivedStateFromProps()
  shouldComponentUpdate() ------>如果return true则执行render，否则不执行render
  render()

• 卸载阶段：

  componentWillUnmount()
  

react获取dom节点

• react 15.8 版本之前

  ref属性写成字符串会导致内存泄露----->会导致节点的重复引用，而之前引用的节点无法解除引用，造成内存泄漏
  官方推荐使用一个函数,函数的参数是那个dom节点{this.dom = dom}

• react 16.0 版本之后

  React.creatRef() 这个api操作dom

react性能优化

1、shouldComponentUpdate

​ 两个参数，1、nextProps；2、nextState

2、pureComponent（纯组件）和memo 阻止组件不必要的更新

​ pureComponent需要确保state为不可变量

​ pureComponent实现了shouldComponentUpdate的浅比较

​ memo，包裹函数组件，第二个参数（可选，省略则浅比较）是回调函数，函数有两个参数，prevProps和NextProps， 返回true，表示props相等，不更新，否则返回false，更新组件（和shouldComponentUpdate相反，因为比较的东西不 同）

3、immutable.js ====数据操作自动返回新对象，实现不可变量

react原理

• vdom和diff算法===>patch函数（比对）和h函数（构建虚拟dom）

• 合成事件 ========> 17.0之前document，之后root

• setState和batchUpdate=====>异步同步，是否命中batchUpdate机制（可以被react管理就是异步，原生就是同步）（setState不可变量）

  transaction事物机制=====>
  -transaction.initialize()===>改isbatchUpdate为true
  -yourHandle()执行你的函数
  -transaction.close()===>改isbatchUpdate为false
  

• 组件渲染过程------讲生命周期

• react fiber
  组件渲染问题：js单线程，dom渲染共用，导致卡顿
  解决：reconciliation阶段进行任务拆分，dom需要渲染时暂停，空闲时间恢复
  使用的api window.requsetldleCallback()

• 路由原理：三大路由：hash，history，memoryRouter ( X )

  hash

​ history

react不可变量

从React渲染组件性能考虑，使用旧数据创建新数据时，要保证旧数据同时可用，
并且没有变化的部分还可用，目的是尽量减少不必要的渲染和重绘。

如果是简单的赋值给一个新的变量，新旧对象只是名称不同，不进行深比较js认为数据不变。其次，也会带来引入对象浅拷贝的问题，造成不可预测的展示值。
这对react响应重新渲染造成了性能影响，或不能及时更新dom。

shouldComponentUpdate 是因为 state值和setState值一样是也会触发更新，但是只到浅比较，对于深层结构没有效率。
但是做深层拷贝很耗时，于是这才有了Immutable 不可变数据，来提升组件render的效率。

react 路由

react-router ----> react-router-dom

react-router-dom依赖于react-router

BrowserRouter（history路由）作为路由的外层包裹

Route作为显示组件的视图组件
1、方法一：component ==> 传入一个类型（即一个组件。可以是类组件，也可以是一个函数组件）
2、方法二：render ===> 传入一个回调函数，返回一个dom节点
3、方法三：children ==> 设置一个dom节点
Link（NavLink）作为跳转路由的链接

withRouter（高阶组件） ===> 调用withRouter(组件) 可以使组件的props中有路由的三个属性

三个属性：location、history、match

Switch--------> 类似分