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项目使用后的一些关于生命周期比较实用的心得的更多相关文章

  1. 基于webpack+react+antd 项目构建

    工欲善其事必先利其器,学习React也是如此. 下面分享一篇基于webpack+react+antd 项目构建的好文章, https://blog.hduzplus.xyz/articles/2017 ...

  2. React 入门学习笔记整理(七)—— 生命周期

    (1)react 生命周期 只有类组件有生命周期,函数组件没有生命周期 1.挂载阶段:这些方法会在组件实例被创建和插入DOM中时被调用: 1)constructor(props) 初始化组件的状态.绑 ...

  3. react.js 从零开始(二)组件的生命周期

    什么是生命周期? 组件本质上是一个状态机,输入确定,输出一定确定. 当状态改变的时候 会触发不同的钩子函数,可以让开发者做出响应.. 一个组件的生命周期可以概括为 初始化:状态下 可以自定义的函数 g ...

  4. React文档(六)state和生命周期

    想一下之前的章节时钟的例子. 目前为止我们只学习了一直方式去更新UI. 我们调用ReactDOM.render()方法去改变渲染的输出: function tick() { const element ...

  5. React Native组件(一)组件的生命周期

    相关文章 React Native探索系列 前言 React Native有很多组件比如Image.ListView等等,想要合理的使用组件,首先要先了解组件的生命周期. 1.概述 无论你是开发And ...

  6. 项目构建之maven篇:6.生命周期与插件

    项目生命周期 清理 初始化 编译 測试 打包 部署 三套生命周期 1.clean pre-clean 运行一些须要在clean之前完毕的工作 clean 移除全部上一次构建生成的文件 post-cle ...

  7. Maven项目构建利器05——Maven的生命周期

    Maven各个构建环节执行的顺序: 不能打乱顺序, 必须按照既定的正确顺序(编译,测试.打包.部署)来执行Maven的核心程序中定义了抽象的生命周期, 生命周期中各个阶段的具体任务是由插件来完成的,可 ...

  8. 从 0 到 1 实现 React 系列 —— 3.生命周期和 diff 算法

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...

  9. react学习(6)——关于组件生命周期的问题

    在项目开发的过程中,遇到了一个问题: 父组件请求后台数据,收到后将数据以props传给子组件,子组件根据收到数据的不同,显示不同的内容,同时,子组件自身可以根据click操作改变根据父组件的数据显示的 ...

随机推荐

  1. 安卓手机与ROS通信遥控Gazebo中仿真机器人小车运动(ROS_indigo)

    首先,先列出需要用到的一些文件: Gazebo中机器人模型及说明: http://wiki.ros.org/grizzly_simulator https://github.com/g/grizzly ...

  2. Linux下修改主机名步骤

    Linux下修改主机名为gpdb 步骤一.运行vi /etc/sysconfig/network命令 NETWORKING=yesHOSTNAME=gpdb 步骤二.运行hostname gpdb命令 ...

  3. STL:deque用法详解

    deque函数: deque容器为一个给定类型的元素进行线性处理,像向量一样,它能够快速地随机访问任一个元素,并且能够高效地插入和删除容器的尾部元素.但它又与vector不同,deque支持高效插入和 ...

  4. pig运行方法:本地与云上

    pig脚本 放在本地当前目录(键入pig命令时,所处的目录),然后用进入grunt,用run或者exec调用 1云运行: 键入pig进入grunt,用run命令运行当前目录脚本.(或者外部用pig - ...

  5. 敏捷测试(5)--基于story的敏捷基础知识

    基于story的敏捷基础知识----需求管理(二) (1)定期发布 定期发布上线,把整个项目划分为一个个迭代,每个迭代时间大小固定(基本固定),迭代结束时上线交付一次. (2)迭代规划 迭代规划相当于 ...

  6. 算法学习笔记(一)C++排序函数、映射技巧与字典树

    1.头文件algorithm中有函数sort()用于排序,参数为:排序起始地址,排序结束地址,排序规则(返回bool型)例如,要将array[] = {5,7,1,2,9}升序排列,则使用: bool ...

  7. UML之对象图

    对象图对包含在类图中的事物的实例建模,对象图显示了在某一时间点上一组对象以及他们之间的关系.对象图用于对系统的静态设计视图或静态交互视图建模,这包括对某一时刻的系统快照建模,表示出对象集.对象的状态以 ...

  8. linux服务搭建---yum源服务搭建

    yum源服务 1.本地yum源 2.yum源不在本地          1>  ftp服务器     2>  nfs服务器 1.本地yum源 前提:    linux系统   找到一个相应 ...

  9. java时间操作

    这篇讲的也很专业:http://soft.zdnet.com.cn/software_zone/2007/1129/660028.shtml java中的时间操作不外乎这四种情况: 1.获取当前时间 ...

  10. 初探linux子系统集之led子系统(一)

    就像学编程第一个范例helloworld一样,学嵌入式,单片机.fpga之类的第一个范例就是点亮一盏灯.对于庞大的linux系统,当然可以编写一个字符设备驱动来实现我们需要的led灯,也可以直接利用g ...