React 组件进阶

目录

特殊的children 属性

 props 校验

 生命周期（三大阶段）

 1.挂载阶段

2.更新阶段

3.卸载阶段（销毁） 

4. setState 更新数据的表现

---

特殊的children 属性

组件的子节点的本质：会作为组件的 children 属性存在

 props 校验

1.安装并导入prop-types包

2.导入import PropTypes from 'prop-types'

3.把PropTypes当做静态属性来进行校验

export default class TodoMain extends Component {
    static propTypes = {
        list: PropTypes.array,
    }
}

 生命周期（三大阶段）

 1.挂载阶段

constructor 

触发时机---创建组件时，最先执行

作用---1. 初始化 state 2. 创建 Ref 等

render

触发时机---每次组件渲染都会触发

作用---渲染 UI（注意： 不能调用 setState() ）

componentDidMount

触发时机---组件挂载（完成 DOM 渲染）后

作用---1. 发送网络请求 2.DOM 操作

2.更新阶段

render

触发时机---每次组件渲染都会触发

作用--- 渲染 UI（与挂载阶段是同一个 render）

componentDidUpdate

触发时机---组件更新（完成 DOM 渲染）后

作用--- DOM 操作，可以获取到更新后的 DOM 内容，不要调用 setState

3.卸载阶段（销毁） 

componentWillUnmount

触发时机---组件卸载（从页面中消失）

作用--- 执行清理工作（比如：清理定时器等、解绑事件等）

主要是：定时器和解绑事件。

4. setState 更新数据的表现

 分为两步：

1.异步（在生命周期内部，还有就是在合成事件内部---合成事件指的react里面的点击事件，onChange事件）-----也就是常见的在生命周期或合成事件处理函数中

2.同步（在定时器内部，还有原生事件里面）

注意 setState 本身就是一个同步的方法

-----还有其他语法

1.如何立即同步更新后的数据

  把代码写到 this.setState 第二个参数回调里面

 handleClick = () => {
    this.setState(
      {
        age: this.state.age + 1,
      },
      () => {
        // 这里可以拿到更新之后的数据
        console.log(this.state.age)
      }
    )
  }

2.多次调用 setState 如何拿到上一次的state？

 handleClick = () => {
    this.setState(() => ({
      age: this.state.age + 1,
    }))
    // 第一个参数也可以是一个回调函数，回调函数返回一个对象，对象里面表示要设置的数据
    this.setState((prevState) => ({
      age: prevState.age + 2,
    }))
    // prevState: 表示上一次更新完毕后的 state
    this.setState((prevState) => ({
      age: prevState.age + 2,
    }))
    this.setState((prevState) => ({
      age: prevState.age + 1,
    }))
    // !上面的写法确实可以累计，把累计的结果渲染到页面上面，但是不能改变 setState 异步更新的表现形式
    console.log(this.state.age) // 18
  }