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 相关文章推荐
JavaScript 原型继承
Dec 26 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
一些可能会用到的Node.js面试题
Jun 15 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 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
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
php强制运行广告的方法
2014/12/01 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
Python文件操作的面试题
2013/06/22 面试题
初中班主任评语大全
2014/04/24 职场文书
社团活动总结模板
2014/06/30 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
思品教学工作总结
2015/08/10 职场文书
2016年中秋祝酒词
2015/11/26 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
能让Python提速超40倍的神器Cython详解
2021/06/24 Python