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 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
jquery中的$(document).ready()使用小结
Feb 14 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 Javascript
jQuery实现本地存储
Dec 22 jQuery
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下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
页面使用密码保护代码
2013/04/10 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
js实现坦克移动小游戏
2019/10/28 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
python 生成图形验证码的方法示例
2018/11/11 Python
基于python3的socket聊天编程
2020/02/17 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
Python gevent协程切换实现详解
2020/09/14 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
python中Mako库实例用法
2020/12/31 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
元旦红领巾广播稿
2014/02/19 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
工程安全生产协议书
2014/11/21 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
python实现简单倒计时功能
2021/04/21 Python
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技