react生命周期钩子函数

初始化阶段

constructor

• 通过super来完成继承，并将props赋值给this.props

• 做一些初始化动作，把比如：state的定义和初始化的赋值，比如：非箭头函数的this绑定

• 注意：我们不在这个钩子函数内部做多余的动作

• constructor constructor constructor constructor constructor constructor constructor constructor constructor constructor(哈哈哈，记不住单词多打几遍)

getDerivedStateFromProps

• 注意：需要有static关键词，这个钩子函数需要有返回值，返回值是一个新的状态或者是null

(UNSAFE_)componentWillMount

• 类似vue中beforeMount created结合
• 表示组件即将挂载，未挂载做准备。内部事务，我们干预
• 为vdom --> 真实dom的渲染过程做准备

render

作用：

1. 通过React.createElment将jsx结构渲染为Ndom对象模型
2. 可以进行 this.props 和 this.state 的计算

返回值：

1. React元素
2. React组件
3. Fragment( 片段 )
4. Portals【 插槽 】
5. 字符串或是数组，被渲染成text节点
6. Boolean和null,不会渲染任何东西

componentDidMount

• 组件挂载结束了
• 类似于vue中的mounted

作用

1. 可以用来做数据请求，然后将数据返回给我们的state
2. 这个阶段已经生成了真实DOM，所以我们可以做DOM操作
3. 我们可以做第三方类库的实例化

axios

• 特性

  • 从浏览器中创建 XMLHttpRequests

  • 从 node.js 创建 http 请求

  • 支持 Promise API

  • 拦截请求和响应

  • 转换请求数据和响应数据

  • 取消请求

  • 自动转换 JSON 数据

  • 客户端支持防御 XSRF

fetch

• 它不需要ajax一样手动封装
• 它符合前端模块化
• 默认get请求
• 支持promise

更新阶段

UNSAFE_componentWillReceiveProps（nextProps）

• 表示组件的属性发生了改变后触发，它是用来接收新的属性
• nextProps表示修改后的新属性
• console.log(this.props == nextProps)这个判断条件可以判断组件中的属性是否改变
• 项目中

getDerivedStateFromProps(nextProps)

• 注意：这个钩子函数中this的值为undefined

• 注意：这个钩子函数还要求我们要有一个初始化的状态

• 注意：必须要有返回值

  作用

  1. 可以返回一个新的state
  2. 如果props改变了可以接收一个新属性，如果没有改变，接收的则是旧属性

  触发条件

  1. 初始化执行了一次，因为它替代了componeWillMount
  2. props改变也可以触发--因为它替代了componWillReceiveProps
  3. state改变也可以触发--因为它替代了componentWillUpdate

shouldComponentUpdate（nextProps,nextState）

• 表示：组件是否应该更新，这个钩子函数可以决定组件是否更新，是性能优化的方案

• 必须要有返回值，返回值是布尔值

  • 可以通过两个参数和对应的this.props/this.state做对比，来确定更新阶段要不要继续
    • 对比：
      • 浅对比 class xxx extends PureComponent 只能比较嵌套的最外层 vdom对比一层
      • 深对比 class xxx extends Component 能比较内部嵌套的东西 vdom对比多层

componentWillUpdate

• 表示组件即将更新

  注意

  1. 不要在这里调用 setState
  2. 不要在这里做数据请求

render

getSnapshotBeforeUpdate(prevProps.prevState)

• 这个钩子函数的意义就是通过返回值给componeDidUpdate传递一个数据

componentDidUpdate(prevProps.prevState,snapshot)

• 表示：组件更新结束
• 真实DOM渲染出来了，可以操作DOM
• 第三方库实例化，动态数据实例化