云锦诚建站，专注安岳网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
安岳网站建设设计

将想法与焦点和您一起共享

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://scanyue.cn/article/igcjgh.html

其他资讯