首页 >> js开发 >> jsreact 生命周期实例分析js大全
jsreact 生命周期实例分析js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
本文实例讲述了react 生命周期。分享给大家供大家参考，具体如下：组件挂载：组件挂载：componentWillMount(组件将要挂载到页面)->render(组件挂载中)->componentDidMount（组件挂载完成后）组件更新：组件更新：1、shouldComponentUpdate(render之前执行，参数为ture时执行render,为false时不执行render)componentWillUpdate(shouldComponentUpdate之后执行)componentDidUpdate(render之后执行)顺序：shouldComponentUpdate-》componentWillUpdate-》render-》componentDidUpdate
import React, { Component, Fragment } from 'react';
import List from './List.js';
class Test extends Component {
constructor(props) {
super(props);
this.state={
inputValue:'aaa',
list:['睡觉','打游戏'],
}
// this.add=this.add.bind(this);
}
addList() {
this.setState({
list:[...this.state.list,this.state.inputValue],
inputValue:''
})
}
change(e) {
this.setState({
// inputValue:e.target.value
inputValue:this.input.value
})
}
delete(i) {
// console.log(i);
const list = this.state.list;
list.splice(i,1);
this.setState({
list:list
})
}
//组件将要挂载到页面时
componentWillMount() {
console.log('componentWillMount');
}
//组件完成挂载后
componentDidMount() {
console.log('componentDidMount');
}
//组件被修改之前，参数为ture时执行render,为false时不往后执行
shouldComponentUpdate() {
console.log('1-shouldComponentUpdate');
return true;
}
//shouldComponentUpdate之后
componentWillUpdate() {
console.log('2-componentWillUpdate');
}
//render执行之后
componentDidUpdate() {
console.log('4-componentDidUpdate');
}
//组件挂载中
render() {
console.log('3-render');
return (
{this.input=input}} value={this.state.inputValue} onChange={this.change.bind(this)}/>
);
}
}
export default Test;
import React, { Component, Fragment } from 'react';
import List from './List.js';
class Test extends Component {
constructor(props) {
super(props);
this.state={
inputValue:'aaa',
list:['睡觉','打游戏'],
}
// this.add=this.add.bind(this);
}
addList() {
this.setState({
list:[...this.state.list,this.state.inputValue],
inputValue:''
})
}
change(e) {
this.setState({
// inputValue:e.target.value
inputValue:this.input.value
})
}
delete(i) {
// console.log(i);
const list = this.state.list;
list.splice(i,1);
this.setState({
list:list
})
}
//组件将要挂载到页面时
componentWillMount() {
console.log('componentWillMount');
}
//组件完成挂载后
componentDidMount() {
console.log('componentDidMount');
}
//组件被修改之前，参数为ture时执行render,为false时不往后执行
shouldComponentUpdate() {
console.log('1-shouldComponentUpdate');
return true;
}
//shouldComponentUpdate之后
componentWillUpdate() {
console.log('2-componentWillUpdate');
}
//render执行之后
componentDidUpdate() {
console.log('4-componentDidUpdate');
}
//组件挂载中
render() {
console.log('3-render');
return (
{this.input=input}} value={this.state.inputValue} onChange={this.change.bind(this)}/>
);
}
}
export default Test;
2、componentWillReceiveProps(子组件中执行。组件第一次存在于虚拟dom中，函数不会被执行，如果已经存在于dom中，函数才会执行)componentWillUnmount(子组件在被删除时执行)
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class List extends Component {
constructor(props) {
super(props);
this.delete = this.delete.bind(this);
}
//组件第一次存在于虚拟dom中，函数不会被执行
//如果已经存在于dom中，函数才会执行
componentWillReceiveProps() {
console.log('componentWillReceiveProps');
}
//子组件被删除时执行
componentWillUnmount() {
console.log('componentWillUnmount');
}
render() {
return (
onClick={this.delete}>{this.props.name}{this.props.content}
);
}
delete=() => {
this.props.delete(this.props.index);
}
}
List.propTypes={
name:PropTypes.string.isRequired,
content:PropTypes.string,
index:PropTypes.number,
delete:PropTypes.func
}
//设置默认值：
List.defaultProps={
name:'喜欢'
}
export default List;
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class List extends Component {
constructor(props) {
super(props);
this.delete = this.delete.bind(this);
}
//组件第一次存在于虚拟dom中，函数不会被执行
//如果已经存在于dom中，函数才会执行
componentWillReceiveProps() {
console.log('componentWillReceiveProps');
}
//子组件被删除时执行
componentWillUnmount() {
console.log('componentWillUnmount');
}
render() {
return (
onClick={this.delete}>{this.props.name}{this.props.content}
);
}
delete=() => {
this.props.delete(this.props.index);
}
}
List.propTypes={
name:PropTypes.string.isRequired,
content:PropTypes.string,
index:PropTypes.number,
delete:PropTypes.func
}
//设置默认值：
List.defaultProps={
name:'喜欢'
}
export default List;
组件性能优化：组件性能优化：
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class List extends Component {
constructor(props) {
super(props);
this.delete = this.delete.bind(this);
}
//组件第一次存在于虚拟dom中，函数不会被执行
//如果已经存在于dom中，函数才会执行
componentWillReceiveProps() {
console.log('componentWillReceiveProps');
}
//子组件被删除时执行
componentWillUnmount() {
console.log('componentWillUnmount');
}
shouldComponentUpdate(nextProps,nextState) {
if (nextProps.content !== this.props.content) {
return true;
} else {
return false;
}
}
render() {
return (
onClick={this.delete}>{this.props.name}{this.props.content}
);
}
delete=() => {
this.props.delete(this.props.index);
}
}
List.propTypes={
name:PropTypes.string.isRequired,
content:PropTypes.string,
index:PropTypes.number,
delete:PropTypes.func
}
//设置默认值：
List.defaultProps={
name:'喜欢'
}
export default List;
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class List extends Component {
constructor(props) {
super(props);
this.delete = this.delete.bind(this);
}
//组件第一次存在于虚拟dom中，函数不会被执行
//如果已经存在于dom中，函数才会执行
componentWillReceiveProps() {
console.log('componentWillReceiveProps');
}
//子组件被删除时执行
componentWillUnmount() {
console.log('componentWillUnmount');
}
shouldComponentUpdate(nextProps,nextState) {
if (nextProps.content !== this.props.content) {
return true;
} else {
return false;
}
}
render() {
return (
onClick={this.delete}>{this.props.name}{this.props.content}
);
}
delete=() => {
this.props.delete(this.props.index);
}
}
List.propTypes={
name:PropTypes.string.isRequired,
content:PropTypes.string,
index:PropTypes.number,
delete:PropTypes.func
}
//设置默认值：
List.defaultProps={
name:'喜欢'
}
export default List;
希望本文所述对大家react程序设计有所帮助。
import React, { Component, Fragment } from 'react';
import List from './List.js';
class Test extends Component {
constructor(props) {
super(props);
this.state={
inputValue:'aaa',
list:['睡觉','打游戏'],
}
// this.add=this.add.bind(this);
}
addList() {
this.setState({
list:[...this.state.list,this.state.inputValue],
inputValue:''
})
}
change(e) {
this.setState({
// inputValue:e.target.value
inputValue:this.input.value
})
}
delete(i) {
// console.log(i);
const list = this.state.list;
list.splice(i,1);
this.setState({
list:list
})
}
//组件将要挂载到页面时
componentWillMount() {
console.log('componentWillMount');
}
//组件完成挂载后
componentDidMount() {
console.log('componentDidMount');
}
//组件被修改之前，参数为ture时执行render,为false时不往后执行
shouldComponentUpdate() {
console.log('1-shouldComponentUpdate');
return true;
}
//shouldComponentUpdate之后
componentWillUpdate() {
console.log('2-componentWillUpdate');
}
//render执行之后
componentDidUpdate() {
console.log('4-componentDidUpdate');
}
//组件挂载中
render() {
console.log('3-render');
return (
{this.input=input}} value={this.state.inputValue} onChange={this.change.bind(this)}/>
{
this.state.list.map((v,i)=>{
return(
);
})
}
);
}
}
export default Test;
import React, { Component, Fragment } from 'react';
import List from './List.js';
class Test extends Component {
constructor(props) {
super(props);
this.state={
inputValue:'aaa',
list:['睡觉','打游戏'],
}
// this.add=this.add.bind(this);
}
addList() {
this.setState({
list:[...this.state.list,this.state.inputValue],
inputValue:''
})
}
change(e) {
this.setState({
// inputValue:e.target.value
inputValue:this.input.value
})
}
delete(i) {
// console.log(i);
const list = this.state.list;
list.splice(i,1);
this.setState({
list:list
})
}
//组件将要挂载到页面时
componentWillMount() {
console.log('componentWillMount');
}
//组件完成挂载后
componentDidMount() {
console.log('componentDidMount');
}
//组件被修改之前，参数为ture时执行render,为false时不往后执行
shouldComponentUpdate() {
console.log('1-shouldComponentUpdate');
return true;
}
//shouldComponentUpdate之后
componentWillUpdate() {
console.log('2-componentWillUpdate');
}
//render执行之后
componentDidUpdate() {
console.log('4-componentDidUpdate');
}
//组件挂载中
render() {
console.log('3-render');
return (
{this.input=input}} value={this.state.inputValue} onChange={this.change.bind(this)}/>
{
this.state.list.map((v,i)=>{
return(
);
})
}
);
}
}
export default Test;
2、componentWillReceiveProps(子组件中执行。组件第一次存在于虚拟dom中，函数不会被执行，如果已经存在于dom中，函数才会执行)componentWillUnmount(子组件在被删除时执行)
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class List extends Component {
constructor(props) {
super(props);
this.delete = this.delete.bind(this);
}
//组件第一次存在于虚拟dom中，函数不会被执行
//如果已经存在于dom中，函数才会执行
componentWillReceiveProps() {
console.log('componentWillReceiveProps');
}
//子组件被删除时执行
componentWillUnmount() {
console.log('componentWillUnmount');
}
render() {
return (
onClick={this.delete}>{this.props.name}{this.props.content}
);
}
delete=() => {
this.props.delete(this.props.index);
}
}
List.propTypes={
name:PropTypes.string.isRequired,
content:PropTypes.string,
index:PropTypes.number,
delete:PropTypes.func
}
//设置默认值：
List.defaultProps={
name:'喜欢'
}
export default List;
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class List extends Component {
constructor(props) {
super(props);
this.delete = this.delete.bind(this);
}
//组件第一次存在于虚拟dom中，函数不会被执行
//如果已经存在于dom中，函数才会执行
componentWillReceiveProps() {
console.log('componentWillReceiveProps');
}
//子组件被删除时执行
componentWillUnmount() {
console.log('componentWillUnmount');
}
render() {
return (
onClick={this.delete}>{this.props.name}{this.props.content}
);
}
delete=() => {
this.props.delete(this.props.index);
}
}
List.propTypes={
name:PropTypes.string.isRequired,
content:PropTypes.string,
index:PropTypes.number,
delete:PropTypes.func
}
//设置默认值：
List.defaultProps={
name:'喜欢'
}
export default List;
组件性能优化：组件性能优化：
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class List extends Component {
constructor(props) {
super(props);
this.delete = this.delete.bind(this);
}
//组件第一次存在于虚拟dom中，函数不会被执行
//如果已经存在于dom中，函数才会执行
componentWillReceiveProps() {
console.log('componentWillReceiveProps');
}
//子组件被删除时执行
componentWillUnmount() {
console.log('componentWillUnmount');
}
shouldComponentUpdate(nextProps,nextState) {
if (nextProps.content !== this.props.content) {
return true;
} else {
return false;
}
}
render() {
return (
onClick={this.delete}>{this.props.name}{this.props.content}
);
}
delete=() => {
this.props.delete(this.props.index);
}
}
List.propTypes={
name:PropTypes.string.isRequired,
content:PropTypes.string,
index:PropTypes.number,
delete:PropTypes.func
}
//设置默认值：
List.defaultProps={
name:'喜欢'
}
export default List;
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class List extends Component {
constructor(props) {
super(props);
this.delete = this.delete.bind(this);
}
//组件第一次存在于虚拟dom中，函数不会被执行
//如果已经存在于dom中，函数才会执行
componentWillReceiveProps() {
console.log('componentWillReceiveProps');
}
//子组件被删除时执行
componentWillUnmount() {
console.log('componentWillUnmount');
}
shouldComponentUpdate(nextProps,nextState) {
if (nextProps.content !== this.props.content) {
return true;
} else {
return false;
}
}
render() {
return (
onClick={this.delete}>{this.props.name}{this.props.content}
);
}
delete=() => {
this.props.delete(this.props.index);
}
}
List.propTypes={
name:PropTypes.string.isRequired,
content:PropTypes.string,
index:PropTypes.number,
delete:PropTypes.func
}
//设置默认值：
List.defaultProps={
name:'喜欢'
}
export default List;
希望本文所述对大家react程序设计有所帮助。
相关文章:
- jsvue 页面回退mounted函数不执行的解决方案js大全
- js解决vue页面渲染但dom没渲染的操作js大全
- jsVUE项目axios请求头更改Content-Type操作js大全
- jsVue-CLI 3 scp2自动部署项目至服务器的方法js大全
- js使用React-Router实现前端路由鉴权的示例代码js大全
- JavaScriptthree.js欧拉角和四元数的使用方法
- js关于angular浏览器兼容性问题的解决方案js大全
- jsvue+axios全局添加请求头和参数操作js大全
- jsvue项目使用$router.go(-1)返回时刷新原来的界面操作js大全
- jsvuex中store存储store.commit和store.dispatch的用法js大全
刚刚发布热门点击发布时间
- [05/19]前端外包开发:git 舍弃本地代码强制从远程库更新
- [05/19]git 提交 忽略husky git 提交 忽略eslint 检测
- [05/18]前端外包工具:如何npm清理缓冲yarn,pnpm 清理缓存
- [05/18]前端开发工具:npm和pnpm有什么区别?pnpm安装
- [05/18]前端开发:npm与yarn的区别
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
