永利皇宫官网网址 > js教程 > 正文

React中props和state属性的用法详解(代码示例)

转载 2018-12-06 15:52:58 0 1120
赞助会员专享特权
本篇文章给大家带来的内容是关于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 (
      <p>
        <h1>Hello, {this.props.firstName + ' ' + this.props.lastName}</h1>
      </p>
    );//欢迎加入前端全栈开发交流圈一起学习交流: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>
    );
  }
}
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中props和state属性的用法详解(代码示例)的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:前端优化 react.js
  • 本文转载于:segmentfault,如有侵犯,请联系删除
  • 相关文章


  • JavaScript的React框架中的JSX语法学习入门教程_基础知识
  • 深入浅析react native es6语法_javascript技巧
  • 深入探讨前端框架react_javascript技巧
  • 深入理解JavaScript的React框架的原理_基础知识
  • 由ReactJS的Hello world说开来_基础知识
  • React中props和state属性的用法详解(代码示例)
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(5)_ThinkPHP5永利娱乐pt88.vip

    独孤九贱(5)_ThinkPHP5永利娱乐pt88.vip

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5永利娱乐pt88.vip》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(4)_PHP永利娱乐pt88.vip

    独孤九贱(4)_PHP永利娱乐pt88.vip

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 永利集团网址导航出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(1)_HTML5永利娱乐pt88.vip

    独孤九贱(1)_HTML5永利娱乐pt88.vip

    《php.cn原创html5永利娱乐pt88.vip》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php永利娱乐pt88.vip!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门永利娱乐pt88.vip之一周学会PHP

    PHP入门永利娱乐pt88.vip之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门永利娱乐pt88.vip之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关永利娱乐pt88.vip

  • 极客学院ReactJS永利娱乐pt88.vip 极客学院ReactJS永利娱乐pt88.vip
  • React从入门到精通永利娱乐pt88.vip React从入门到精通永利娱乐pt88.vip
  • React 路由精讲永利娱乐pt88.vip React 路由精讲永利娱乐pt88.vip
  • React Native进阶精讲永利娱乐pt88.vip React Native进阶精讲永利娱乐pt88.vip
  • 相关视频章节