react v16.3 新生命周期
时间:2018-11-16
本文章向大家介绍react v16.3 新生命周期,需要的朋友可以参考一下
背景:我在react文档里找生命周期的图,居然没有,不敢相信我是在推特上找到的。。。
正文
react v16.3 新生命周期:
- static getDerivedStateFromProps
- getSnapshotBeforeUpdata
1: getDerivedStateFromProps, 在render之前,返回一个obj更新state,或者null不更新state, 这个生命周期的使用场景是:state根据props变化。
static getDerivedStateFromProps(nextProps: SearchProps, prevState: SearchState) {
const { location } = nextProps
const state = location.state
if (state && (state.keyword !== prevState.keyword)) {
const { keyword } = statereturn {
pageState: 0,
employee: {
hit: 0,
count: 0,
data: [],
currentOffset: 0
},
document: {
hit: 0,
count: 0,
data: [],
currentOffset: 0
},
keyword,
needExact: false
}
}
return null
}
2: getSnapshotBeforeUpdata 触发时间:在实际dom挂载之前,虚拟dom构建之后。返回的任何数据或者null,都将作为componentDidUpdate()的参数。
getSnapshotBeforeUpdate(prevProps, prevState) { // Are we adding new items to the list? // Capture the scroll position so we can adjust scroll later. if (prevProps.list.length < this.props.list.length) { const list = this.listRef.current; return list.scrollHeight - list.scrollTop; } return null; } componentDidUpdate(prevProps, prevState, snapshot) { // If we have a snapshot value, we've just added new items. // Adjust scroll so these new items don't push the old ones out of view. // (snapshot here is the value returned from getSnapshotBeforeUpdate) if (snapshot !== null) { const list = this.listRef.current; list.scrollTop = list.scrollHeight - snapshot; } }
建议用法总结请移步:https://juejin.im/post/5aca20c96fb9a028d700e1ce
这里拷贝一个我用到的一种情况:props更新时重新请求
// old componentWillReceiveProps(nextProps) { if (nextProps.id !== this.props.id) { this.setState({externalData: null}); this._loadAsyncData(nextProps.id); } } // new static getDerivedStateFromProps(nextProps, prevState) { // Store prevId in state so we can compare when props change. if (nextProps.id !== prevState.prevId) { return { externalData: null, prevId: nextProps.id, }; } // No state update necessary return null; } componentDidUpdate(prevProps, prevState) { if (this.state.externalData === null) { this._loadAsyncData(this.props.id); } }
我的使用:
componentDidUpdate(prevProps: SearchProps, prevState: SearchState) { const { keyword, needExact } = this.state if (keyword && (keyword !== prevState.keyword)) { // 上一次的state和这一次的对比,如果需要,就进行fetch数据,并setstate。其中this.state就是getDerivedStateFromProps返回的 更新后的state if (needExact) { this._fetchExactData(this.state.keyword) this.setState({ needExact: false }) } else { Promise.all([this._fetchInitData('document'), this._fetchInitData('employee')]) .then(values => { let pageState = 0 const { state } = this.props.location if (state && state.type) { pageState = state.type } else if (!values[1] && values[0]) { pageState = 1 } this.setState({ pageState, }) }) } } }
最后,记录一个小知识点:
由于state变化,需要出发请求数据的,在componentDidUpdate中进行。
- IntelliJ IDEA 安装目录的核心文件讲解
- 详述 IntelliJ IDEA 的使用界面
- WCF系列教程之消息交换模式之请求与答复模式(Request/Reply)
- Koa-router源码解读
- WCF系列教程之初识WCF
- IntelliJ IDEA 缓存和索引的介绍及清理方法
- Node.js原理
- WCF系列教程之WCF消息交换模式之单项模式
- React Native调用Android相机图库
- IntelliJ IDEA 之 HelloWorld 项目创建及相关配置文件介绍
- 设置 IntelliJ IDEA 主题和字体的方法
- 修改 IntelliJ IDEA 模板注释中的 user 内容
- Android仿京东、天猫商品详情页
- C# checked和unchecked运算符
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python3异步爬虫 ——aiohttp模板使用
- [PHP] 抽象工厂设计模式-创建型设计模式
- [javascript] 支付宝小程序网络GET请求
- [PHP] 生成器模式-创建型设计模式
- [PHP] 工厂方法设计模式-创建型设计模式
- [PHP] 对象池模式-创建型设计模式
- [PHP] 原型模式-创建型设计模式
- [PHP] 简单工厂模式-创建型设计模式
- [PHP] 单例模式-创建型设计模式
- [PHP] 静态工厂模式-创建型设计模式
- [PHP] 适配器模式-结构型设计模式
- [PHP] 使用curl扩展POST或者PUT时数据不全和连接中断的排查
- [PHP] 桥接模式-结构型设计模式
- [PHP] 组合模式-结构型设计模式
- [GO-FLY] GO-FLY客服实现浏览器消息提示音