react一篇稍微深入

setState( Object | fn, callback )

  1. 在一个流程中（render3完成，页面dom得到更新，叫一个数据更新流程）多次setState，会合并为一个setState来调用，合并机制非常好，但是会出现问题

3.利用第一个参数函数形式解决

1
2
3
4
5
6
先前的state
this.setState(（prevState）=> {
return { }
})
等同||
this.setState(（prevState）=> ({}))

4.列表渲染
key的重要性，是给到react内部去优化性能
key在兄弟节点中是必须的

4.1. 虚拟dom的比对叫做 diff算法

  1. 不同的根节点的树，就不需要比较了，直接以新的替换

    特性：

    1. 同级比较
      1.1 同级元素类型变了，那么就不再比较子元素，直接将老的树销毁，生成新的树替换
      1.2 同级元素相同，这时再递归比较子元素
    2. 子元素比较

      react中支持key属性，当子元素拥有key是，react使用key来匹配原有数上的子元素以及最新树上的子元素，使用key来匹配，使得效率变得更高

# react实现

虚拟dom就是一段，jsx语法对象

1.受控组件
需要使用state数据去控制这个form元素

2.非受控组件
不需要使用state数据去控制的表单元素

非受控组件input的默认值，用defaultValue={this.state.value}

chexkoutbox 用defaultChecked

# 生命周期

三大阶段
1.挂载

  • constructor（）在组件实例化的时候触发

     不能在里面setState
1. 调用父类的z构造函数super（props）
  2. 初始化数据 this.state = {}

   3.绑定this指向

  • render（）渲染

     默认进来一次，后续如果有更新会再次触发
使用setState要小心

  • componentDidMount()

    组件挂载完成
 1. 获取异步数据
 2. 获取dom元素

  • componentWillMount()即将过期， 不要使用

  • static getDerivedStateFromProps ( props,state) 能够根据props数来设置state数据 

    1. 默认render之前调用一次
2. 后续数据有变化，重新render之前又会调用
3. 不能使用 this.setState
4. 需要 return {} | null 如果是

    2.更新

    • static getDerivedStateFromProps

    • shouldComponentUpdate （nextProps， nextState）
      这个组件是否是应该进行渲染？ 做性能优化
      一般不去用他，推荐使用 PureComponent
      如果使用了它，就不能再使用PureConponent
      ！ 需要返回中，布尔值，如果返回true -> 更新生命周期函数往下执行，false -> 不更新生命周期不往下执行

    • render

      • getSnapshotBeforeUpdate(prevProps, prevState)

      真实DOM渲染完成的前一刻触发
      此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。

      • componentDidUpdate(prevProps, prevState, snapshot)

      snapshot 是 getSnapshotBeforeUpdate 返回的值

      1. 不能随意的去使用网络请求和setState。 除非加上了判断条件

    3.销毁
    conmponentWillUnmounted

组件之间通信

  1. 父 -> 子 props

  2. 子-> 父 传递方法给子组件

  3. 兄-> 弟 3.1.状态提升

    3.2.使用第三方的中央事件管理器 （pubsub）
3.3.context

    Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

    let MyContest = React.createContext()创建一个context对象

    MyContext.Provider 组件  供应商
MyContext.Consumer 组件  消费者， 开始结束标签内需要使用一个**函数**来return jsx，而这个函数接收一个参数，参数就是供应商的value数据
 一.使用以上三步骤

    ​ 二.在消费者组件使用 static ContextType = MyContext

    this.context接收数据

    ​ 3.4.自己写一个bus

4.react官方提供的状态管理器 flux
第三方： Redux javascript的状态管理器，跟Vuex很相似
> 单一数据源，整个应用的state被存储在一颗object tree中
1. 在redux的流程中任何时刻state，都不会发生变化，不能直接改变
2. state的改变不是改变原来的state，是生成了一个新的state替换旧的state，
3. Reducers不能改变state，生成一个新的state 去return（纯函数的概念）
纯函数：任何时候都不会修改参数，有相同的入参，一定会产生相同的出参（每次传入相同的参数，都会出现相同的返回值）

react组件标签之间的内容不会自动渲染出来，会在props中传入children

ref的三种使用手法

Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素

  1. ref=”myUL” this.refs.myUL
  2. ref={(target)=>{this.myUL = target}} this.myUL
  3. 构造函数中定义 this.myUL = React.createRef()
    ref={this.myUL} 在元素标签上设置
    this.myUL.current 获取元素

    在组件标签内写内容，利用改组件的{this.props.children}来实现相vue中solt功能

Share
8 min. read