什么是生命周期函数:在某一时刻组件会自动调用执行的函数。

import React,{ Component,Fragment } from 'react'
class Note extends Component{
//在组件创建的那一刻就会执行,不过是es6语法的,不能算生命周期函数
//Initialization初始化时在这里定义state,接收props
constructor(props){
super(props);
//当组件的state,props发生改变的时候render会重新执行
this.state={
inputValue:'',
list:[112]
}
} //组件第一次即将被挂载到页面的时候,自动执行
componentWillMount(){
console.log('componentWillMount');
} //组件组件第一次挂载到页面之后,自动被执行
componentDidMount(){
console.log('componentDidMount');
//在这里获取ajax数据,componentDidMount只执行一次
this.init(this.props);
}
init = (props)=>{
//存放ajax接口
} //一个组件要从父组件接受参数
////只要父组件的render函数被重新执行了,子组件的这个生命周期函数就会被执行
//////只要父组件的render函数被执行了,子组件的这个componentWillReceiveProps函数就会被执行
//如果这个组件第一次存在于父组件中,不会执行
//如果这个组件之前已经存在于父组件中,才会执行
//对于顶层组件不会执行这个生命周期函数
componentWillReceiveProps(){
console.log('child componentWillReceiveProps');
} //组件需要更新吗,返回的是一个Boolean值,如果返回true,componentWillUpdate、 render、componentDidUpdate 会执行,如果返回false不会执行componentWillUpdate、 render、componentDidUpdate函数
//组件跟新之前,他会被自动执行
//接下来props变化成什么样,接下来state会变化成什么样
shouldComponentUpdate(nextProps,nextState){
console.log('shoundComponentUpdate');
//接收的props不等于当前的props时会重新渲染,否则不会,提升了性能
if(nextProps.content !==this.props.content){
return true;
}
else{
return false;
}
} //当shouldComponentUpdate返回true时,在重新渲染之前(render)之前会被执行
//组件跟新之前,他会自动执行,但是他会在shouldComponentUpdate之后被执行
//如果shouldComponentUpdate返回true它才执行
//如果shouldComponentUpdate返回false就不会执行了
componentWillUpdate(){
console.log('componentWillUpdate');
} //当shouldComponentUpdate返回true时,在重新渲染之后(render)之后会被执行
componentDidUpdate(){
console.log('componentDidUpdate')
} //当这个组件即将被从页面中剔除的时候,会被执行
componentWillUnmount(){
console.log('componentWillUnmount');
} handelInput = (e)=>{
console.log(e.target.value);
//调用setState改变state的值就是更新组建的内容,render重新执行,用最新的数据渲染出模板
this.setState({inputValue:e.target.value});
}
addItem =()=>{
const {list,inputValue} = this.state;
this.setState({list:[...list,inputValue],inputValue:''})
}
removeItem = (index)=>{
console.log(index);
const {list,inputValue} = this.state;
let newList = list;
newList.splice(index,1);
this.setState({list:newList});
}
//数据(props 或者state)发生改变的时候,会被执行
//父组件的render执行后,子组件的render函数也会被执行
//render函数是组件中必须有的生命周期函数,因为这个组件是继承Copmonent组件,react这个组件内置默认了所有的生命周期函数,除了render没有内置。
render(){
console.log('render');
const {list} = this.state;
return (
<Fragment>
<input onChange={this.handelInput} value={this.state.inputValue}/>
<button onClick={this.addItem}>提交</button>
<ul>
{
list.map((item,index)=>{
return <li key={index} onClick={()=>this.removeItem(index)}>{item}</li>
})
}
</ul>
</Fragment>
)
} }
export default Note;
//在同一个方法中多次使用setState,setState会被合并执行,对于相同属性的设置会保留最后一次设置

2.React 生命周期函数的更多相关文章

  1. React生命周期函数详解

    React生命周期函数 生命周期函数是指在某一个周期自动执行的函数. React中的生命周期执行过程 以下是React中的常用的生命周期函数,按个部分中按照自动执行顺序列出,这几个过程可能存在同时进行 ...

  2. 十二、React 生命周期函数

    React生命周期函数: [官方文档]:https://reactjs.org/docs/react-component.html [定义]组件加载之前,组件加载完成,以及组件更新数据,组件销毁. 触 ...

  3. react生命周期函数使用箭头函数,导致mobx-react问题

    最近新人加入了项目,遇到了一个很奇怪的问题.mobx observable 属性,onChange的时候就是页面不会刷新. 试来试去,就是不知道什么原因,后来其他同事查到是因为componentWil ...

  4. react生命周期函数的应用-----1性能优化 2发ajax请求

    知识点1:每次render其实就会将jax的模板生成一个虚拟dom,跟上一个虚拟dom进行比对,通过diff算法找出不同,再更新到真实dom上去. 1性能优化 每次父组件render一次(除了第一次初 ...

  5. react 生命周期函数介绍

    constructor():构造函数 执行:组件加载钱最先调用一次,仅调用一次. 作用:定义状态机变量. 注意:第一个语句必须为super(), 否则会报错:'this' is not allowed ...

  6. react生命周期函数

      如图,可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组 ...

  7. react 生命周期函数的一些心得体会

    一.理论 组件本质上是状态机,输入确定,输出一定确定 生命周期的三个阶段,三者时间是不固定的,只是在逻辑上的分类: 二.初始化阶段: getDefaultProps:获取实例的默认属性(即使没有生成实 ...

  8. 说一说我了解的react生命周期函数

    我了解的几个阶段 Mounting 挂载 Updating 更新 Unmounting 卸载 我说几个我常用的钩子函数 1.挂载阶段Mounting 1)constructor():函数构造器 执行次 ...

  9. react 生命周期函数

    (1)初始化阶段:getDefaultProps:获取实例的默认属性static propTypes 设置属性的类型componentWillMount:组件即将首次被装载.渲染到页面上render: ...

随机推荐

  1. 19-SQLServer定期自动导入数据的dtsx部署

    一.注意点 1.登录Integration Service必须使用windows用户,并且只能在本地服务器登录. 2.SQLServer2000以前,叫dts,全程Data Transformatio ...

  2. dockerfile-maven plugin自动镜像制作并发布

    环境准备:win10+docker 1.打开hyper-v 2.下载最新版本docker:https://store.docker.com/editions/community/docker-ce-d ...

  3. 从json到python解析python,从bson到monogdb

    1.JSON JSON是JavaScript Object Notation的缩写,中文译为JavaScript对象表示法.用来作为数据交换的文本格式,作用类似于XML,而2001年Douglas C ...

  4. C# ado.net 操作存储过程(二)

    调用存储过程 sql IF OBJECT_ID('RegionInsert') IS NULL EXEC (' -- -- Procedure which inserts a region recor ...

  5. centos7部署mysql5.7一主多从

    /usr/share/mysql/charsets/ 服务器 ip 操作系统 mysql Mysql_master 192.168.188.11 centos7 5.7 Mysql_slave1 19 ...

  6. Log4j,Log4j2,logback,slf4j日志学习(转)

    日志学习笔记Log4jLog4j是Apache的一个开放源代码项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.数据库等:我们也可以控制每一条日志的输出格式:通过定义每一条日志 ...

  7. springboot2.0入门(二)-- 基础项目构建+插件的使用

    一.idea中新建第一个HelloWorld项目 点击next: 下一步 在这里可以选择我们需要依赖的第三方软件类库,包括spring-boot-web,mysql驱动,mybatis等.我们这里暂时 ...

  8. 【Android-关闭所有Activity】关闭activity之前的所有activity,重启actibity

    Android关闭activity之前的所有activity,重启actibity 直接关闭一个activity之前的所有Activity页面 解决方法:清理activity堆栈 Intent ine ...

  9. useradd/usermod/userdel/passwd/groupadd/groupmod/groupdel/gpasswd

    用户 用户系统也是通过一个文件来管理的,默认的root用户id是0, shadow文件说明 加密算法类别 $后面的数字6指定了加密算法使用的是第六种,sha512加密 增加用户,修改成同样的密码,查看 ...

  10. 【luoguP2158】 [SDOI2008]仪仗队

    题目描述 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来判断队伍是否整齐(如下图 ...