react基础学习记录一

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值的对组件标识，经过标识来观察新旧组件，是否一致，缺乏了或增长了一目了然