React知识点汇总

纯函数确定的输入,产生确定的输出,与执行次数,时间无关不产生副作用单纯的函数调用例如: const add=x=>x+1副作用系统IO相关APIDate.now()、Math.random()等不确定性方法在函数体内修改函数外变量的值在函数体内修改函数参数的值调用会产生副作用的函数 http请求总结：具有不确定性的操作，你都可以理解为是不纯的，不纯的那么意味可能带来副作用。...

情系半生e

283人浏览 · 2021-07-09 17:36:22

情系半生e · 2021-07-09 17:36:22 发布

本文章用于记录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也是可以的