react学习基本概念总结

[coolpail]

react 学习记录

自己学习，记录便于后面回顾

基础知识点的记忆：

• state与props

• state是组件自己的数据，而props是父组件通过属性赋值方式将其传送给组件；这样达到了，父子组件数据的联通

• state的赋值方式，推荐用函数式赋值

  this.setState(() => ({
      react: 'i like'
  }))
  

• setState是一个异步函数，并且多次setSate，会将其放入队列中，合并成一次进行执行

• 正因为是异步的函数，所以当我们改变后不能在同步的代码中直接获取，有两种方式可以解决

  constructor() {
      this.state = {
          react: ''
      }
  }
  this.setState((preState) => ({
      react: 'i very like'
  }))
  this.setState((preState) => ({                   //
      react: preState.react + '我很喜欢react'
  }))
  this.state.react   //不会变化，是空
  this.setState((preState) => ({
      react: preState.react + '我很喜欢react'
  }), () => {
      console.log(this.state.react)              //这边回调的this指向组件自身，而且获取到最新的state
  })
  

  上面setState函数中有两个参数，第一个参数是一个函数，会自动将最近修改的最新的state，传入进来；第二个参数是一个也是函数，this指向组件自身；两个函数的执行都是异步的，因为setState就是一个异步函数

• 而子组件怎么想父组件传送数据呢？这通过父组件先子组件赋值方法，子组件通过调用父组件的方法，来达到将其数据返回给父组件，所以最终props的数据还是在父组件的方法中

• 组件的显示是有什么决定的，就是render，return的结果，return结果中有用到jsx对象，则需要引入import React from 'react'

• return中的jsx组件只能被一个div包裹，组件不能并列；但可以通过<Fragment></Fragment>来占位，优点是其不会显示在dom节点中

• 怎么不转译html形式的文本,dangerouslySetInnerHTML = {{ __html: xxx}};第一层{}是说明里面要填写js语句，第二层则是说明写的是一个对象，整句话的意思就是innerHTML=XXX

生命周期函数

什么事生命周期函数：就是说在某个阶段会自动执行的函数，叫做生命周期函数；

• Mounting阶段

  constructor:用于初始化state，一个组件只执行一次
  

static getDerivedStateFromProps(props, state);需要返回一个对象或者null，不能返回undefined；该函数的作用是可以用父组件传进来的props的值在render之前进行修改；该函数在state修改update的时候也会执行

render函数，不是Component内置的函数，所以这个生命函数必须要写；用于创建虚拟dom，即js对象

componentDidMount;在组件挂载完后进行的操作，只执行一次，就在挂载的最后阶段；一般在这个阶段进行ajax请求；在这个阶段修改了state的值，上面的两个函数render和getDerivedStateFromProps也会在再次执行
```

• updating阶段
  就是当组件的state发生改变的时候会再次执行一些生命周期函数
  会先执行getDerivedStateFromProps；接着shouldComponentUpdate(nextProps, nextState)，参数是最新的数据nextState和nextProps，可以和之前的this.state,this.props进行操作比较询问是否允许进行更新返回一个布尔值，false则不需更新，后面的生命周期函数不会再自动执行这个false常用来提升性能，因为父组件更新state时，子组件的render函数也会被执行，我们返回false，就不会执行没必要的子组件的render，提高了性能，返会true则，会进行下一个函数render。虚拟dom的构建；在组件渲染到网页前会执行一个getSnapshotBeforeUpdate(prevProps, prevState)这个函数必须和componentDidUpdate(prevProps, prevState, snapshot)一起使用;该函数在组件更新完后会自动执行，第三个参数是getSnapshotBeforeUpdate的返回值

• Unmounting阶段
  发生在组件的删除前，会自动执行，我们常用于清除组件之前被添加的还会继续执行的东西。例如定时器

虚拟dom

只理解了一些简单的概念：虚拟dom就是js对象，是替代真实dom，让js更加高效的进行操作；
state发生update后render函数会生成新的虚拟dom，来和之前之前老的虚拟dom进行比较：
主要采取几种策略：

• 同层比较，说白话就是从大头才是比较，大头坏了整个不要了，重新创建；这种方法再第一层不同，后面都相同的情况下，会带来性能的降低，因为它会重新渲染创建；但是提高的算法的速度，很简单就一层一层的比较，不用循环递归；放弃了一些极端情况，带来了算法上的提高
• key值的对组件标识，通过标识来观察新旧组件，是否一致，缺少了或增加了一目了然