React props和state属性的具体使用方法


Posted in Javascript onApril 12, 2018

在上一节中,我们讲到了React组件,说了如何使用ES6类创建一个React组件并在其他的地方使用它。这一节我们将讲到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>
    );
  }
}

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>
    );
  }
}

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>
    );
  }
}

ReactDom.render(
  <Time/>,
  document.getElementById('root')
);

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

constructor(props) {
  super(props);

  // 在这初始化state
  this.state = {
    ...
  }
}

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

this.setState({
  ...
});

使用这个函数之前一定要注意this的作用域,箭头函数中的this指向外部this,而普通函数中的this指向函数本身。

另外,这里使用到了两个React组件的生命周期回调:

componentDidMount() {
  // React组件被加载到dom中的时候被调用
  ...
}

componentWillUnmount() {
  // React组件从dom中卸载的时候被调用
  ...
}

所以这样一下上面的计时器代码应该就不是什么难事了,在React组件被加载到dom中的时候设置一个计时器,每秒钟更新一次state,state更新的同时页面中的组件将会被重新渲染,而当组件被卸载的时候,则需要清除定时器,就那么简单。

不过React对于state的更新频率,有一个最大的限度,超过这个限度则会导致页面渲染的性能下降,大家需要注意不要在高频函数中使用setState。

这一节React轻松入门就到这了,下一节,我将会为大家介绍React组件的事件处理。如果觉得文章有帮助,请关注我,我会持续更新,为大家献上更好更优质的文章!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
jquery关于图形报表的运用实现代码
Jan 06 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 #Javascript
关于vue中 $emit的用法详解
Apr 12 #Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 #Javascript
JS中promise化微信小程序api
Apr 12 #Javascript
vue配置请求本地json数据的方法
Apr 11 #Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 #jQuery
JS实现的合并多个数组去重算法示例
Apr 11 #Javascript
You might like
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
python将ip地址转换成整数的方法
2015/03/17 Python
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
设计总监岗位职责
2013/12/07 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
国旗下的演讲稿
2014/05/08 职场文书
私人委托书格式
2014/09/10 职场文书
请病假条范文
2015/08/17 职场文书