189 8069 5689

71react_props_组件的生命周期

 

10多年的新邱网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整新邱建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联公司从事“新邱网站设计”,“新邱网站推广”以来,每个客户项目都认真落实执行。

 

目录

React:...1

props:...1

constructor,构造器:...3

组件的生命周期:...4

 

 

 

 

React:

 

props:

props(properties)是公有public属性,组件外可以访问,但只读,修改会报错Uncaught TypeError: Cannot assign to read only property 'schoolName' of #

state是private私有属性,组件外无法直接访问,可修改state,但建议使用setState方法;

import React from "react";

import ReactDom from 'react-dom';

 

class Toggle extends React.Component {

 state = {

   flag: true

  };

 

 handleClick(event) {

   // console.log(event);

   // console.log(event.target);

   // console.log(event.target.id);

   // console.log(event.target === this);

   // console.log(this);

   // console.log(this.state);

   let x =event.target;

   alert("触发的元素的id是:" +x.id);

   this.setState({flag:!this.state.flag});

   // this.props.schoolName='www.magedu';   //不允许修改,Uncaught TypeError: Cannot assign to read only property 'schoolName' of #

  }

 

 render() {

   let text =this.state.flag?'true':'flase';

   return (

     {this.props.schoolName} 点击这句话,会触发一个事件,并弹出一个警示框

      flag ={text}

     {console.log(this.props.parent)}   //可操作parent里的所有属性和方法,即在Toggle内部可操作所有对象

     {/* {this.props.parent={}} */}   //不可修改,若为{this.props.setState(...)}这是可以的,schoolName、this不能改,类似const a=100;,类似py中元组中的引用类型,如const a=Obj;,Obj这个对象不能动,但对象内部的属性可随时改

     {this.props.children}

   

);

  }

}

 

class Root extends React.Component {

 render() {

   return (

      my first test


     {/* */}   //通过属性传入数据到props,由外向内传递,常用此种,parent={this},this即为Root

        //用这样定义,可定义子元素,很少用,使用时在Toggle类的render里this.pros.children

       


  {/*//通过子元素传递数据 */}   //注释表达式,表达式只能一行

       

我是Toggle的子元素
   //通过子元素传入数据到props的children

     

   

);

  }

}

 

ReactDom.render(,document.getElementById('root'));

 

 

constructor,构造器:

使用ES6的构造器,要提供一个参数props,并把这个参数使用super传递给父类;

class Toggle extends React.Component {

 constructor(props) {

   console.log(props);

   super(props);

   this.state = {

     flag:true

    }

  }

 // constructor(...props) {

 //   console.log(props);

 //   super(...props);

 //   this.state = {

 //     flag:true

 //   };

 // }

 

 

 

组件的生命周期:

分为三个状态:

mounting,已插入真实的dom;

updating,正在被重新渲染;

unmounting,已移出真实dom;

 

组件的生命周期状态,在不同时机访问组件,组件正处在生命周期的不同状态上,在不同的生命周期状态访问,就产生不同的方法;

 71react_props_组件的生命周期

注:

constructor是最早执行的函数;

 

 

生命周期的方法:

大多数时候,用不到这些函数,这些钩子函数是为了精确地控制;

装载组件触发:

componentWillMount,在渲染前调用,在客户端也在服务端,只会在装载之前调用一次;第1次装载,在首次render之前,如控制state、props;

componentDidMount,在第一次渲染后调用,只在客户端,之后组件已生成了对应的dom结构,可通过this.getDomNode()来进行访问,如果想和其它js框架一起使用,可在这个方法中调用setTimeout、setInterval或发送ajax请求等操作(防止异步操作阻塞ui),只在装载完成后调用一次,在render之后;第1次装载结束,在首次render之后,如控制state、props;

 

更新组件触发:

这些方法不会在首次render组件的周期调用;

componentWillReceiveProps(nextProps),在组件接收到一个新的props时被调用,此方法在初始化render时不会被调用;在组件内部,props是只读不变的,但是这个函数可接收到新的props,可对props作一些处理,this.props={name:'rooooot'},这就是偷梁换柱,componentWillReceiveProps触发,也会走shouldComponentUpdate;

shouldComponentUpdate(nextProps,nextState),返回一个布尔值,在组件接收到新的props或state时被调用,在初始化时或使用forceUpdate时不被调用;可在确认不需要更新组件时使用;若设置为false,就是不允许更新组件,那componentWillUpdate、componentDidUpdate不会执行;判断是否需要组件更新,就是是否render,精确地控制渲染,提高性能;

componentWillUpdate(nextPropx,nextState),在组件接收到新的props或state,但还没有render时被调用,在初始化时不会被调用;在除了首次render外,每次render前执行,componentDidUpdate在render之后调用;

componetDidUpdate(nextProps,nextState),在组件完成更新后立即调用,不初始化时不会被调用;

 

卸载组件触发:

componentWillUnmount,在组件从dom中移除时立刻被调用;

 

例:

构造2个组件,在子组件Sub中加入所有生命周期函数;

import React from 'react';

import Reactdom from 'react-dom';

 

class Sub extends React.Component {

 constructor(props) {

   console.log(props);

   super(props);

   this.state = {count:0};

  }

 

 handleClick(event) {

   this.setState({count: this.state.count +1});

  }

 

 render() {

   console.log('Sub render');

   return (

      Sub's count ={this.state.count}

   

);

  }

 

 componentWillMount() {   //constructor之后,第1次render之前

   console.log('Sub componentWillMount');

  }

 

 componentDidMount() {   //第1次render之后

   console.log('Sub componentDidMount');

  }

 

 componentWillUnmount() {   //清理工作

   console.log('Sub componentWillUnmount');

  }

}

 

class Root extends React.Component {

 constructor(props) {

   super(props);

   console.log('Root construtor');

   this.state = {};

  }

 

 render() {

   return (

     

   

);

  }

}

 

Reactdom.render(,document.getElementById('root'));

 

例,增加更新组件函数:

import React from 'react';

import Reactdom from 'react-dom';

 

class Sub extends React.Component {

 constructor(props) {

   console.log(props);

   super(props);

   this.state = {count:0};

  }

 

 handleClick(event) {

   this.setState({count: this.state.count +1});

  }

 

 render() {

   console.log('Sub render');

   return (

      Sub's count ={this.state.count}

   

);

  }

 

 componentWillMount() {   //第1次render之前

   console.log('Sub componentWillMount');

  }

 

 componentDidMount() {   //第1次render之后

   console.log('Sub componentDidMount');

  }

 

 componentWillReceiveProps(nextProps) {   //props变更时接到新props了,交给shouldComponentUpdate;props组件内只读,只能从外部改变

   console.log(this.props);

   console.log(nextProps);

   console.log('Sub componentWillReceiveProps',this.state.count);

  }

 

 shouldComponentUpdate(nextProps,nextState) {   //是否组件更新,props或state发生改变时,返回布尔值,true才会更新

   console.log('Sub shouldComponentUpdate',this.state.count,nextState);

   return true;   //return false将拦截更新

  }

 

 componentWillUpdate(nextProps,nextState) {   //同意更新后,真正更新值,之后调用render

   console.log('Sub componentWillUpdate',this.state.count,nextState);

  }

 

 componentDidUpdate(prevProps,prevState) {   //同意更新后,真正更新后,在render之后调用

   console.log('Sub componentDidUpdate',this.state.count,prevState);

  }

 

 componentWillUnmount() {   //清理工作

   console.log('Sub componentWillUnmount');

  }

}

 

class Root extends React.Component {

 constructor(props) {

   super(props);

   console.log('Root construtor');

   this.state = {

     flag:true,

     name:'root'

    };

  }

 

 handleClick(event) {

   this.setState({

     flag: !this.state.flag,

     name:this.state.flag?this.state.name.toLowerCase():this.state.name.toUpperCase()

    });

  }

 

 render() {

   return (

      my name is{this.state.name}


        //父组件的render,会引起下一级组件的更新,导致props重新发送,即使子组件props没有改变过

   

);

  }

}

 

Reactdom.render(,document.getElementById('root'));

调整浏览器窗口,会引起重绘;

 

 

无状态组件:

也叫函数式组件;

组件,默认是有状态组件;

React从15.0开始支持无状态组件;

开发中,很多情况下,组件不需要state状态,也不需要生命周期函数,无状态组件很好地满足了需要;

无状态组件函数应提供一个参数props,返回一个React元素;

无状态组件函数本身就是一个render函数;

 

例:

import React from 'react';

import ReactDom from 'react-dom';

 

// function Root(props) {

//   return (

//     my name is {props.name}

//  

)

// }

 

let Root =props =>

my name is{props.name}
;   //箭头函数形式

 

ReactDom.render(,document.getElementById('root'));

 

 


新闻名称:71react_props_组件的生命周期
网址分享:http://cdxtjz.cn/article/igcjgh.html