基础知识

组件

• 函数组件

  1. 函数组件中没有this

  2. 函数组件没有state，通过state hook组件组件实现不使用class的情况下，实现state

  3. 函数组件没有生命周期，通过 effect hook组件实现不使用class的情况下，实现生命周期，useeffect 可以理解为 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

  • Hook

  1. hook更新数据，不是合并而是替换，更新数据时，需要使用一个新的数据完全取代原本的数据
  2. hook的setState对同一个变量，多次setState不会合并执行，setState是异步的

• class组件

  1. class 组件有state 有生命周期，有this
  2. this.setState 更新数据是合并数据，而不是替换
  3. class的setState对同一个变量，多次setState会合并执行，setState是异步的

在react中，函数组件和class组件是等效的

函数组件和class组件，使用上的不同之处

函数组件使用state，需要先引入useState Hook

import React, { useState } from 'react';

1. 声明变量

   • calss中 --- this.state= {count: 0}
   • 函数组件中 --- const [count, setCount] = useState(0)

2. 读取state

   • class中 --- {this.state.xxx}
   • 函数组件中 --- {xxx} //函数组件中，没有this

3. 更新state

   • calss中 --- this.setState({count: this.state.count + 1})
   • 函数组件中 --- setCount(count + 1)

状态提升

在 React 中，将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。这就是所谓的“状态提升”。

由于react是单向数据流，所以，当两个组件需要同步更新数据时，不应该考虑如何将两个组件同步起来，而是利用单向数据流的原理，将各自的state提升到最近的共同的父组件中，从而实现同步更新

受控组件&非受控组件

React 有两种不同的方式来处理表单输入。

如果一个 input 表单元素的值是由 React 控制，就其称为受控组件。当用户将数据输入到受控组件时，会触发修改状态的事件处理器，这时由你的代码来决定此输入是否有效（如果有效就使用更新后的值重新渲染）。如果不重新渲染，则表单元素将保持不变。

一个非受控组件，就像是运行在 React 体系之外的表单元素。当用户将数据输入到表单字段（例如 input，dropdown 等）时，React 不需要做任何事情就可以映射更新后的信息。然而，这也意味着，你无法强制给这个表单字段设置一个特定值。

在大多数情况下，你应该使用受控组件。

严格模式

严格模式可能会多次调用某些方法，因此不要在这些方法中编写具有副作用的代码，忽视此规则可能会导致各种问题的出现，包括出现内存泄露或出现无效的应用程序状态。

render

setState

constructor

componentWillMount

conponentWillUpdate

shouldComponentUpdate

componentWillReceiveProps

getDerivedStateFromProps

以上方法可能会多次调用，因此不要这这些方法中编写副作用代码

生命周期

旧版生命周期

初始化阶段

setup props and state

挂载阶段

componentWillMount

render

componentDidMount

更新阶段

属性更新，props

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

状态更新，state

shouldComponentUpdate

componentWillUpdate

render

componentDilUpdtae

卸载阶段

componentWillUnmount

新版生命周期

Hook

进阶部分

踩坑部分

1. 在class组件中，在方法里面使用this.setstate方法时需要给方法绑定作用域，或者写成箭头函数，否则会拿不到setstate方法，报错setstate is undefined
2. 循环渲染结构时，循环的key值应保持不变，循环结构中包含了input，在input框使用了，value和onchange事件，进行双向数据绑定时，不能修改循环数据中的key，否则会造成页面的重新渲染，导致无法显示中文的候选栏，致使无法输入中文