React -04+生命周期

2021-12-31 110 阅读2分钟

特殊属性 children属性

;<Hello children='我是子节点' />
// children 是一个特殊的 prop，上面的写法和下面等价，当内容比较多的时候，下面的写法更加直观
;<Hello>我是子节点</Hello>

props

校验

1.下载并引入

import PropTypes from 'prop-types'

2.往类组件上面添加静态属性 propTypes
3.添加相关的校验规则
4.常见校验规则

{
    // 常见类型
    fn1: PropTypes.func,
    // 必选
    fn2: PropTypes.func.isRequired,
    // 特定结构的对象
    obj: PropTypes.shape({
        color: PropTypes.string,
        fontSize: PropTypes.number
    })
}

在class类中写入静态校验

// 【静态】
  static propTypes = {
    // 校验 colors 必须是一个数组
    colors: PropTypes.array,
  }

方法二组件添加

// !#2 组件.propTypes = {}
/* Hello.propTypes = {
  // 校验 colors 必须是一个数组
  colors: PropTypes.array,
} */

生命周期

三大阶段五个钩子

1.挂载阶段：

（1）constructor 初始化状态 state 和创建 ref 引用
（2）render 渲染UI 和不能直接调用 setState
（3）componentDidMount 发请求和操作DOM

2.更新阶段

（1）render
（2）componentDidUpdate 可以根据更新完之后的数据做相关操作，不能直接调用setState

3. 卸载（销毁）阶段

componentWillUnMount 可以用来清除定时器和解绑事件

setState

更新数据的表现

同步：在定时器内进行setState 和在原生事件内部进行setState
异步：在生命周期钩子里面进行 setState 或者在合成事件的回调函数里面进行setState

第一个参数可以是函数

// 初始
state = { count: 1 }

// 更新
this.setState((preState) => {
    return {
        count: preState.count + 1,
    }
})

this.setState((preState) => {
    return {
        count: preState.count + 2,
    }
})

// 输出
console.log(this.state.count) // 依然是 1

其中 preState 是上一次更新完毕的状态

可以拿到上一次更新完毕的状态，更新数据的表现依然是异步的，返回值必须是一个对象，里面表示要更新的状态。其中 preState 是上一次更新完毕的状态

第二个参数页可以写一个回调函数

1. 可以在此回调函数里面拿到更新完毕后的数据
2 . 页可以在 componentDidUpdate钩子里面拿到更新完毕的数据

Hooks

可以为函数组件提供状态和生命周期
只能在函数式组件或另一个自定义 Hook中使用
可以解决组件的状态和业务逻辑服用问题
Hook + 函数式组件的写法可以和class组件的写法共存