React知识点汇总

本文章用于记录React学习过程中遇到的知识点

React17 生命周期

来源于官网:生命周期
初始化挂载阶段-由ReactDome.render()触发

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount() //常用

更新-由内部的setState()或者父组件的render触发

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

卸载

• componentWillUnmount() //常用

其它
错误处理

• static getDerivedStateFromError()
• componentDidCatch()

初始调用
进入页面使用 useEffect(()=>{},[]); 函数进行调用, 用户获取数据等方法

什么是副作用

纯函数

• 确定的输入,产生确定的输出,与执行次数,时间无关
• 不产生副作用
• 单纯的函数调用
  例如: const add=x=>x+1

副作用

• 系统IO相关API
• Date.now()、
• Math.random()等不确定性方法
• 在函数体内修改函数外变量的值
• 在函数体内修改函数参数的值
• 调用会产生副作用的函数 http请求

总结：具有不确定性的操作，你都可以理解为是不纯的，不纯的那么意味可能带来副作用。

withRouter的用途

withRouter的用途

• withRouter可以加工一般组件,让其拥有路由组件所特有的API
• withRouter的返回值是一个新组件

例如:公用的layout组件(左侧slider右侧content的形式),没有自己的路由,如果也想获取在router路由中定义的路由组件功能的话,需要在外部包裹 withRouter(layout)

PureComponent, Component, Memo的区别

PureComponent和Component的区别
区别:

• component在监听state,props时,无论内容是否改变,都会重新进行render操作,进行无效的渲染操作;
• pureComponent会对state,props进行"浅比较",并且引用类型的数据是无法比较的. 即如果内容无改变,则不进行render操作,减少了无效的渲染
• memo: 允许返回一个函数组件而非一个类,接收两个参数, 第二个参数为是否props更新

使用场景:

• component:已知每次都会进行有效的更新
• pureComponent:已知有可能会进行无效更新的类组件
• memo: 已知有可能会进行无效更新的函数组件

React.creatRef和ref的使用

ref概念:

• ref可以获取Dom元素上的dom节点
• ref可以获取组件的实例

用途及使用场景:

• 管理焦点、文本选择、媒体回放
• 触发必要动画；
• 整合第三方DOM库

方式一:通过创建createRef的形式

import { Button } from 'antd';
import React, { Component, Fragment } from 'react';
class Test extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef(); //创建createRef
  }
  //定义获取方法
  getRefsData() {
    console.log(this.myRef.current.value);
  }
  render() {
    return (
      <Fragment>
        <input ref={this.myRef}></input> //绑定到实例上

        <Button onClick={this.getRefsData.bind(this)}>获取ref数据写法一</Button>
        <Button onClick={() => this.getRefsData()}>获取ref数据写法二</Button>
      </Fragment>
    );
  }
}
export default Test;

方式二:通过回调refs的形式,将el作为参数传给this.myInput

import { Button } from 'antd';
import React, { Component, Fragment } from 'react';
class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      myInput: ''
    };
  }
  getRefsData() {
    console.log(this.state.myInput.value);
  }
  render() {
    return (
      <Fragment>
        <input ref={el => (this.state.myInput = el)}></input>;//el是Dom的节点
		<Button onClick={this.getRefsData.bind(this)}>获取ref数据写法一</Button>
        <Button onClick={() => this.getRefsData()}>获取ref数据写法二</Button>
      </Fragment>
    );
  }
}

export default Test;

表单组件分类-受控组件和非受控组件

简述:
受控组件即通过state进行管理,并只能通过setState()进行更新的的组件
非受控组件即表单数据由DOM本身进行处理,不受setState()的控制

什么是高阶函数

如果一个函数符合下面两个规范中的任何一个,那该函数就是高阶函数

• 若A函数,接受的参数是一个函数,那么A就可以称之为高阶函数
• 若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数

常见的高阶函数有:Promise、setTimeout、arr.map()等等

React/Vue中的key的作用和注意事项

①虚拟DOM中key的作用:
简单的说: key是虚拟DOM对象的标识,在更新显示时key起着极其重要的作用
详细的说: 当状态当中的数据发生变化时,react会根据新数据生成新的虚拟DOM,随后React进行新虚拟DOM与旧虚拟DOM的diff比较,
比较规则如下:
旧虚拟DOM中找到了与新虚拟DOM相同的key：

• a)若虚拟DOM中内容没变,直接使用之前的真实DOM
• b)若虚拟DON中的内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM

旧虚拟DOM中未找到与新虚拟DOM相同的key

• 根据数据创建新的真实DOM,随后渲染到页面

② 用index作为key可能会引发的问题:
1.若对数据进行:逆序添加,逆序删除等破坏顺序操作:

• 会产生没有必要的真实DOM更新 ==>界面效果没问题,但是效率低

2.如果结构中还包含输入类的DOM:

• 会产生错误DOM更新 ===>界面有问题

3.注意: 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的

③ 开发中如何选择key?
1.最好使用每条数据的唯一标识作为key,比如id,手机号,身份证号,学号等
2.如果确定只是简单的展示诗句,用index也是可以的

Redux和Mobx选用问题

声明: 并没有完全的绝对性,只是看是否更适合
大项目: 建议使用Redux,因为有完善的流程模板,更好的便于团队规范管理,减少因团队编码风格导致的阅读困难,到项目后期也便于维护,更好的查询业务走向
小项目: 建议使用Mobx,使用简单方便更自由,便于快速开发

新扩展:
Reduxjs-Toolkit: React官方在redux基础上做的封装, 在使用上更加便捷,简化了范式模板

参考文章: React笔记