本文主要介绍了 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.
结语
感谢您的观看, 如有不足之处, 欢迎批评指正.
来源: http://www.qdfuns.com/article/51117/92effc6380232bbe4c1425cf79203f09.html