React+ANTD项目使用后的一些关于生命周期比较实用的心得
1. constructor()
constructor(props){
super(props)
this.state=({
})
}
一定先写super 可以接收从父组件传来的值
父组件往子组件传值的方法
<ChildComponent nextValue={xxx.xxx} nextValue2={xxx.xxx}/>
直接在组件中写属性名等于属性值就可以,有多少传多少
在子组件 ChildComponent 中获取父组件传来的值只需要用
this.props.nextValue
就可以得到父组件传来的值
由此衍生一个问题,子组件如何给父组件传值
首先,需要在父组件定义一个方法(agechange),然后将方法传给子组件,
class App extends Component {
agechange=(age)=>{
alert(age)
} render() { return (
<div className="App">
<Child agechange={this.agechange}/> //将方法传给子组件
</div>
)
}
}
在子组件中调用这个方法,将需要传给父组件的值,通过这个方法传给父组件,
class Child extends Component {
constructor(props){
super(props)
this.state=({
age:0
})
}
handleChange=()=>{
this.setState({
age:this.state.age+3
})
this.props.agechange(this.state.age) //将子组件的age值传给父组件
}
render(){
return(
<div>
<button onClick={this.handleChange.bind(this)}>点击增加age</button>
</div>
)
}
}
2.componentWillMount
关于componentWillMount方法只想说一点,它的调用在constructor之后,在render之前,在这方法里的代码调用setState方法不会触发重渲染
3.componentDidMount
一般的从后台(服务器)获取的数据,都会与组件上要用的数据加载有关,所以都在componentDidMount方法里面作
4.componentWillReceiveProps
当父组件传给子组件的props发生改变时,子组件可以通过componentWillReceiveProps 方法接收,可以setState 重新渲染组件
当父组件通过ajax异步获取的值需要传给子组件时,子组件可以用到componentWillReceiveProps(nextProps) 关于setState() 它不是同步的,也不能说是异步的,所以不要在setState之后,直接用state中的值,很容易出错。
React+ANTD项目使用后的一些关于生命周期比较实用的心得的更多相关文章
- 基于webpack+react+antd 项目构建
工欲善其事必先利其器,学习React也是如此. 下面分享一篇基于webpack+react+antd 项目构建的好文章, https://blog.hduzplus.xyz/articles/2017 ...
- React 入门学习笔记整理(七)—— 生命周期
(1)react 生命周期 只有类组件有生命周期,函数组件没有生命周期 1.挂载阶段:这些方法会在组件实例被创建和插入DOM中时被调用: 1)constructor(props) 初始化组件的状态.绑 ...
- react.js 从零开始(二)组件的生命周期
什么是生命周期? 组件本质上是一个状态机,输入确定,输出一定确定. 当状态改变的时候 会触发不同的钩子函数,可以让开发者做出响应.. 一个组件的生命周期可以概括为 初始化:状态下 可以自定义的函数 g ...
- React文档(六)state和生命周期
想一下之前的章节时钟的例子. 目前为止我们只学习了一直方式去更新UI. 我们调用ReactDOM.render()方法去改变渲染的输出: function tick() { const element ...
- React Native组件(一)组件的生命周期
相关文章 React Native探索系列 前言 React Native有很多组件比如Image.ListView等等,想要合理的使用组件,首先要先了解组件的生命周期. 1.概述 无论你是开发And ...
- 项目构建之maven篇:6.生命周期与插件
项目生命周期 清理 初始化 编译 測试 打包 部署 三套生命周期 1.clean pre-clean 运行一些须要在clean之前完毕的工作 clean 移除全部上一次构建生成的文件 post-cle ...
- Maven项目构建利器05——Maven的生命周期
Maven各个构建环节执行的顺序: 不能打乱顺序, 必须按照既定的正确顺序(编译,测试.打包.部署)来执行Maven的核心程序中定义了抽象的生命周期, 生命周期中各个阶段的具体任务是由插件来完成的,可 ...
- 从 0 到 1 实现 React 系列 —— 3.生命周期和 diff 算法
看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...
- react学习(6)——关于组件生命周期的问题
在项目开发的过程中,遇到了一个问题: 父组件请求后台数据,收到后将数据以props传给子组件,子组件根据收到数据的不同,显示不同的内容,同时,子组件自身可以根据click操作改变根据父组件的数据显示的 ...
随机推荐
- zookeeper学习总结
最近一两天,一直在看zookeeper,自己也感觉头昏脑涨的. 现记录一下,最近的所得: 安装与配置: http://blog.csdn.net/morning99/article/details/4 ...
- XML跨平台,你懂的
XML跨平台,你懂的 [引子] 90后小妹,问我,"都说XML跨平台,偶真的,不理解.XML语言的这大优势,倒是深深记在脑海里了." 当然,偶立马应声答到,& ...
- linux杀死进程的简单讲解
一. 终止进程的工具kill .killall.pkill.xkill 终止一个进程或终止一个正在运行的程序,一般是通过kill .killall.pkill.xkill 等进行.比如一个程序已经死掉 ...
- ACM竞赛:立方和问题
例如: 输入: n 代表多组数组 num1 , num 2 ep: 1 3 这时的算法结果应当为: 1 ^ 3 + 2 ^ 3 + 3 ^ 3 ep : 2 5 这时的算法结果应当为: ...
- 关于Eclipse创建Android项目时,会多出一个appcompat_v7的问题
问题描述: 使用eclipse创建一个Android项目时,发现project列表中会多创建出一个appcompat_v7项目,再创建一个Android项目时,又会再多出一个appcompat_ ...
- Intellij Idea配置提高速度
主要介绍一下Intellij Idea的关于速度和最大最大方法数目 提高速度 1.命令: 2.找到./Library/Preferences/IntelliJIdea2016.1/idea.vmopt ...
- AndroidBinder进程间通信系统-android学习之旅(86)
目录 前言及知识准备 Service组件结构 Clinet组件结构 与Binder驱动程序交互 总结 Binder进程间通信实例 问题 本次主要介绍Android平台下Binder进程间通信库.所谓通 ...
- 报表打印错误:Forcing NLS_NUMERIC_CHARACTERS to: '.,' for XDO processing
HDSP0004 module: HDSP: 凭证打印 +----------------------------------------------------------------------- ...
- AngularJS进阶(十三)JS利用正则表达式校验手机号
JS利用正则表达式校验手机号 注:请点击此处进行充电! 绪 由于项目需求,需要在前端实现手机号码的校验.当然了,对于基本的格式校验应该放在客户端进行,而不需要再将待校验的手机号发送至服务端,在服务端完 ...
- 销售订单-修改量-高级定价关联sql
修改量消耗明细 --修改量消耗明细 SELECT t.name, t.comments, t.version_no, cux_rebate_pub.get_hou_name(p_organizatio ...