深刻解析React props和state属性

本文主要介绍了React props和state属性的具体使用方法，小编以为挺不错的，如今分享给你们，也给你们作个参考。一块儿跟随小编过来看看吧

props 不知道你们还记不记得xml标签中的属性，就像这样：

<class id="1">
 <student id="1">John Kindem</student>
 <student id="2">Alick Ice</student>
</class>
复制代码

这样一个xml文件表达的意思是1班有两个学生，学号为1的学生名字为John Kindem，学号为2的学生名字为Alick Ice，其中id就是属性，你能够把它看作一个常量，它是只读的。 html继承自xml，而JSX从莫种意义上又是html和js的扩展，属性的概念天然获得了传承。 在React中，咱们使用props这一律念向React组件传递只读的值，就像这样：

// 假设咱们已经自定义了一个叫Hello的组件
ReactDom.render(
  <Hello firstName={'John'} lastName={'Kindem'}/>,
  document.getElementById('root')
);
复制代码

在调用React组件的时候，咱们能够像上面同样向组件传递一些常量，以便组件在内部调用。而调用的方法，就像下面这样：

class Hello extends React.Component {
  constructor(props) {
    super(props);
  } 
  render() {
    return (
      <div>
        <h1>Hello, {this.props.firstName + ' ' + this.props.lastName}</h1>
      </div>
    );//欢迎加入全栈开发交流圈一块儿学习交流：864305860
  }//面向1-3年前端人员
}//帮助突破技术瓶颈，提高思惟能力
 ReactDom.render(
  <Hello firstName={'John'} lastName={'Kindem'}/>,
  document.getElementById('root')
);
复制代码

在组件内部获取传递过来的props，只须要使用this.props对象便可，可是在使用以前，记得复写组件的构造函数，而且接受props的值以调用父类构造。 固然，props也可以设置默认值，向下面这样：

class Hello extends React.Component {
  constructor(props) {
    super(props);
  } 
  static defaultProps = {
    firstName: 'John',
    lastName: 'Kindem'
  };
  render() {
    return (
      <div>
        <h1>Hello, {this.props.firstName + ' ' + this.props.lastName}</h1>
      </div>
    );//欢迎加入全栈开发交流圈一块儿学习交流：864305860
  }//面向1-3年前端人员
} //帮助突破技术瓶颈，提高思惟能力
ReactDom.render(
  <Hello/>,
  document.getElementById('root')
);
复制代码

只需在ES6类中声明一个static的props默认值便可，运行效果和上面同样。 props没有多复杂，稍微练习便可习得。 state、组件生命周期 你可能回想，若是我想在React组件中添加动态效果怎么办？目前学过的知识好像没法解决这一问题。 这一问题须要使用React组件的state来解决，state即状态的意思，在React中，全部会变化的控制变量都应该放入state，每当state中的内容变化时，页面的相应组件将会被从新渲染，另外，state彻底是组件内部的东西，外部没法向内部传递state，也没法直接改变state的值。 先来举一个例子：

import React from 'react';
import ReactDom from 'react-dom';
 
class Time extends React.Component {
  constructor(props) {
    super(props);
 
    // 初始化state
    this.state = {
      hour: 0,
      minute: 0,
      second: 0
    }
  } 
  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  } 
  componentWillUnmount() {
    clearInterval(this.interval);
  } 
  tick() {
    // 计算新时间
    let newSecond, newMinute, newHour;
    let carryMinute = 0, carryHour = 0;
    newSecond = this.state.second + 1;
    if (newSecond > 59) {
      carryMinute = 1;
      newSecond -= 60;
    }
    newMinute = this.state.minute + carryMinute;
    if (newMinute > 59) {
      carryHour = 1;
      newMinute -= 60;
    }
    newHour = this.state.hour + carryHour;
    if (newHour > 59) newHour -= 60; 
    // 设置新状态
    this.setState({
      hour: newHour,
      minute: newMinute,
      second: newSecond
    });
  } 
  render() {
    return (
      <div>
        <h1>current time: {this.state.hour + ':' + this.state.minute + ':' + this.state.second}</h1>
      </div>
    );//欢迎加入全栈开发交流圈一块儿学习交流：864305860
  }//面向1-3年前端人员
} //帮助突破技术瓶颈，提高思惟能力
ReactDom.render(
  <Time/>,
  document.getElementById('root')
);
复制代码

这样就完成了一个计数器，数值一秒钟变化一次，来说解一下代码：首先，state的初始化是在构造函数中，像这样：

constructor(props) {
  super(props);
 
  // 在这初始化state
  this.state = {
    ...//欢迎加入全栈开发交流圈一块儿学习交流：864305860
  }//面向1-3年前端人员
}//帮助突破技术瓶颈，提高思惟能力
复制代码

而改变state是使用React组件基类中的一个自带函数：

this.setState({
  ...
});
复制代码

使用这个函数以前必定要注意this的做用域，箭头函数中的this指向外部this，而普通函数中的this指向函数自己。 另外，这里使用到了两个React组件的生命周期回调：

componentDidMount() {
  // React组件被加载到dom中的时候被调用
  ...
}
componentWillUnmount() {
  // React组件从dom中卸载的时候被调用
  ...
}
复制代码

因此这样一下上面的计时器代码应该就不是什么难事了，在React组件被加载到dom中的时候设置一个计时器，每秒钟更新一次state，state更新的同时页面中的组件将会被从新渲染，而当组件被卸载的时候，则须要清除定时器，就那么简单。 不过React对于state的更新频率，有一个最大的限度，超过这个限度则会致使页面渲染的性能降低，你们须要注意不要在高频函数中使用setState。 结语

感谢您的观看，若有不足之处，欢迎批评指正。

本次给你们推荐一个免费的学习群，里面归纳移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。 对web开发技术感兴趣的同窗，欢迎加入Q群：864305860，无论你是小白仍是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时天天更新视频资料。 最后，祝你们早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。