生命周期

React 学习笔记 /

简介

只有类组件才有生命周期
生命周期分为三个阶段: 创建时 (挂载阶段), 更新时, 卸载时
创建时常用的钩子函数有 (按照执行顺序排): constructor, render, componentDidMount
更新时常用的钩子函数有 (按照执行顺序排): render, componentDidUpdate
卸载时常用的钩子函数有 (按照执行顺序排): componentWillUnmount

constructor

组件创建时, 最先执行
作用:
1. 初始化 state
2. 给事件绑定 this

render

每次渲染组件时都会触发, 该函数贯穿了组件的创建和更新两个阶段
执行的时机:
- 当组件接收到新属性的时候会触发该方法
- 调用 setState 方法时
- 调用 forceUpdate (强制更新) 方法时
作用:
1. 渲染 UI
2. 不能在 render 中调用 setState , 因为 setState 不仅能更新状态, 也能更新 UI, 如果调用 setState 的话, 会形成无限递归调用

componentDidMount

当组件挂载 (DOM 渲染完) 后执行
作用:
1. 发送网络请求
2. 进行 DOM 操作

componecntDidIpdate

当组件更新后执行
作用:
1. 发送网络请求
2. 进行 DOM 操作
3. 在该函数中不管是直接调用还是间接调用 setState 的时候, 需要添加上 if 条件判断, 否则会形成无限递归调用, if 条件判断一般是拿当前的 props 和更新前的 props 来做比较, 该函数中的第一个参数 prevProps 就表示更新前的 props

componentWillUnmount

当组件卸载 (即从页面中消失) 的时候执行
作用:
1. 执行清理工作, 如清理定时器等

本文章首发在 LearnKu.com 网站上。

Laravel 8.x 译者 355 声望

暂无个人描述~

讨论数量: 0

发起讨论只看当前版本

暂无话题~