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值的对组件标识,通过标识来观察新旧组件,是否一致,缺少了或增加了一目了然
    原文作者:Infinity
    原文地址: https://segmentfault.com/a/1190000017043845
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞