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值的对组件标识,通过标识来观察新旧组件,是否一致,缺少了或增加了一目了然