react 生命周期 之getDerivedStateFromProps

本文主要是介绍react 生命周期 之getDerivedStateFromProps,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

参考:https://www.jianshu.com/p/50fe3fb9f7c3

getDerivedStateFromProps

React生命周期的命名一直都是非常语义化的,这个生命周期的意思就是从props中获取state,可以说是太简单易懂了。

可以说,这个生命周期的功能实际上就是将传入的props映射到state上面。

由于16.4的修改,这个函数会在每次re-rendering之前被调用,这意味着什么呢?

意味着即使你的props没有任何变化,而是父state发生了变化,导致子组件发生了re-render,这个生命周期函数依然会被调用。看似一个非常小的修改,却可能会导致很多隐含的问题。

使用

这个生命周期函数是为了替代componentWillReceiveProps存在的,所以在你需要使用componentWillReceiveProps的时候,就可以考虑使用getDerivedStateFromProps来进行替代了。

两者的参数是不相同的,而getDerivedStateFromProps是一个静态函数,也就是这个函数不能通过this访问到class的属性,也并不推荐直接访问属性。而是应该通过参数提供的nextProps以及prevState来进行判断,根据新传入的props来映射到state。

需要注意的是,如果props传入的内容不需要影响到你的state,那么就需要返回一个null,这个返回值是必须的,所以尽量将其写到函数的末尾。

static getDerivedStateFromProps(nextProps, prevState) {const {type} = nextProps;// 当传入的type发生变化的时候,更新stateif (type !== prevState.type) {return {type,};}// 否则,对于state不进行任何操作return null;
}

作者:老鼠AI大米_Java全栈
链接:https://www.jianshu.com/p/50fe3fb9f7c3
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

组件实例化之后接收到一个新属性(props)时调用该函数,该函数返回一个对象来更新状态(state),修改state时一般不会触发该函数,父组件重新渲染该函数一定会被调用
getDerivedStateFromProps 是新的生命周期,暂时不怎么用,可能17以后会比较有用

这篇关于react 生命周期 之getDerivedStateFromProps的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/766851

相关文章

JavaScript与HTML交互

JavaScript与HTML交互 一、在页面中直接编写JS代码二、从外部引入JS代码 一、在页面中直接编写JS代码 首先创建一个html页面,并在页面中编写一段JS代码,注意,JS代码要放在标签中,然后实现html代码和JavaScript的交互。 <!DOCTYPE html><html lang="en">

spring cloud vue thymeleaf实现CRUD的简单案例

现在关于Vue的实例说明很少,最近由于给学生们讲课,自己亲自做了一个Demo,贴出来与大家共享,还望大家多多批评指点。 项目架构: 1:创建pom(student-vue)项目,并导入如下依赖: <?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xs

Promise模块化编程ES6新特性

文章目录 Promise&模块化编程1.Promise基本介绍2.快速入门1.需求分析2.原生ajax + jQuery3.Promise使用模板 3.课后练习1.原生ajax + jQuery2.promise 4.模块化编程基本介绍5.CommonJS基本介绍6.ES5模块化编程1.题目2.示意图3.代码实例—普通导入导出function.jsuse.js 4.代码实例—对象解构导入

vue.runtime.esm.js:1888 TypeError: Cannot read property ‘forEach‘ of undefined at VueComponent.<

出错原因: 调用 $table.toggleRowExpansion 函数报错。 vue.runtime.esm.js:1888 TypeError: Cannot read property 'forEach' of undefinedat VueComponent.<anonymous> (crud.js:957)at invokeWithErrorHandling (vue.runtime

vue el-table展开需要绑定row-key

<el-table ref=“table” v-loading=“crud.loading” :data=“crud.data” size=“small” style=“width: 100%;” :row-key=“getRowKey” @sort-change=“crud.changeTableSort” @selection-change=“crud.selectionChangeHandl

vue-selecttree rules规则失效问题

采用 <el-form-item style="margin-bottom: 0;" label="专题分类" prop="categoryId"><treeselectv-model="form.category.id":disabled="readonly||(form.enabled==1)":load-options="loadCats":props="defaultProps":op

vue-element-admin的权限管理与动态路由

动态路由: https://www.cnblogs.com/jj123/p/12784100.html 权限管理 https://www.cnblogs.com/shaozhu520/p/12792592.html

Vue - 项目报错整理(1):RangeError: Maximum call stack size exceeded

https://blog.csdn.net/qq_33270001/article/details/99677324

ant-vue-desgin + nginx(项目站点) +nginx(门户站点)

1、主站点方向代理test指向项目服务器 主站点反向代理配置 server {listen 80;server_name www.main.com;#charset koi8-r;#access_log logs/host.access.log main; index index.html;root ./html; #反向代理test指向项目服务器location /tes

vue + nginx 反向代理配置方法二

1、vue.config.js 设置publicPath路径为反向代理路径: publicPath: ‘/test/’, module.exports = {/*Vue-cli3:Crashed when using Webpack `import()` #2463https://github.com/vuejs/vue-cli/issues/2463*/// 如果你不需要生产环境的 sour