文档章节

React.js 组件的 props vs state

曾建凯
 曾建凯
发布于 2016/12/05 12:19
字数 1657
阅读 185
收藏 5

看到一篇无比蛋疼的文章:https://www.oschina.net/translate/exploring-reacts-state-propagation。我不针对翻译,只是针对这篇文章想提出的概念,说了跟没说一样,傻傻的。

要搞清楚React.js的props和state,必须要结合组件(组件类)从初始化到装载(mount)的过程来说。

组件类

假定我们通过以下的代码,创建了一个组件:

var SimpleComponent = React.createClass({
	getDefaultProps: function() {
		return {
			name: ''
		};
	},
	getInitialState: function() {
		return {
		};
	},
	render: function() {
		return <div>A simple component named {this.props.name}</div>;
	}
});

这里SimpleComponent是一个组件类。

组件虚拟对象

当我们要使用这个组件类的时候,可以写这样的代码:

<SimpleComponent name="abc"/>

实际上上述代码会转移成下面的js代码:

React.createElement(SimpleComponent, null)

通过React.createElement函数创建的,并不是SimpleComponent的组件类实例(即不是new SimpleComponent),而是一个不可写入的静态对象(Object),并且这个静态对象,具有props,没错,就是SimpleComponent组件类定义的getDefaultProps所返回的值。

我将这个静态对象称为组件虚拟对象,他持有了SimpleComponent的初始化所需的props,并且我有理由怀疑他是全局唯一的(当然我没精力去验证了)。

所以,要知道,当我们在jsx文件中,写了大量看似html标签的结构,他实际上并没有逐个创建对应的组件实例,取而代之的,仅仅是构造一大堆组件虚拟对象(静态Object)和传入参数而已。

注意,这个时候组件虚拟对象是没有state的。

组件实体(实例)

当一个组件虚拟对象被装载(mount)后——这里所谓装载,就是将一个或一大段组件虚拟对象插入到实际的DOM节点中时,才会创建出真实的组件实体(实例)。

创建组件的实体的时候,才会真正将调用参数传入(比如上面的name=abc),并且混入组件虚拟对象上的props。

当组件被实体化后,才真正的拥有state。

而我们实际在编写SimpleComponent这个组件类的方法时,都是假定针对的是组件实体的状态下进行的。

最后,总结为一个流程图来说明的话:

props只读、不可变?

我只能说,这是一个误区。首先,假定你拥有React Development tools的话,通过修改React.js的组件props,也能促使组件发生变化。就好像这样:

这个问题,仔细想想就能明白是别人给你挖了个坑(不是React.js,而是这些所谓的教程)。假定我们设计两个组件:

var AComponent = React.createClass({
	getDefaultProps: function() {
		return {
			name: ''
		};
	},
	getInitialState: function() {
		return {
			name: this.props.name
		};
	},
	render: function() {
		return <div>I'm {this.props.name}</div>;
	}
});

var BComponent = React.createClass({
	getDefaultProps: function() {
		return {
			name: ''
		};
	},
	getInitialState: function() {
		return {
			name: this.props.name
		};
	},
	render: function() {
		return <div>
			<AComponent name={this.state.name} />
			<button type="button" onClick={e => this.setState({name: 'Jack'})}>change name</button>
		</div>;
	}
});

在B组件内,是使用state.name作为A组件的props.name传入的,如果是只读、不可变的话,那么B组件的按钮被点击后,B组件的state.name改变了,永远也不可能触发到A组件state更新了。

所以,严格来说,props不可变,只在组件虚拟对象这个阶段,因为那是一个不可写入的静态对象。

更进一步,从组件类到组件实例,实际上是完成了从props将数据传递给state。这是一个必然性的数据流向,无论多少次组件嵌套,这种数据流向都不会改变。所以一般而言,很少会去动(注意这里只是说动,但没有说不去读)一个组件实例的props,而直接操作state。

传统的OOP编程,并没有严格的数据流向,到底是属性到方法,还是方法到属性,还是属性到属性,完全由开发者自己掌控,你爱怎么写,就怎么写。这在前端组件的源码中,形成了很大的伪装性,当发生错误的时候,你完全不知道该从哪里开始着手,需要花一定的时间去解读、调试,然后才能定位问题(当然有好的规范可以相对的缓解类似的问题)。

而React.js则提供一种简单明确的机制(而且他只提供了这个机制而已),这也是React.js开发过程中会形成的一个思维定式。每当你开始编写一个组件,你就需要设计,这个组件应该具有哪些动态(交互性)特征需要放入state,而这些state又是怎么从props传递过去的。仅此而已,剩下的就是组件的界面逻辑开发而已。

state - 状态

这个应该不用多介绍了吧,React.js的卖点,组件实例的界面和自身的state动态结合,而且性能还相当的好。

不过其实这里也有一个小坑,就是当你在设计一个组件的时候,应该认真的思考哪些特征属于动态的。如果你在state里装载了大量的数据,要监控这些state的更新,还是相当的时间(其实真正很大的数据,大概会有3-5ms的延迟,但这个数据真的很大了)。所以,特别注意:

setState方法是异步的!!!

setState方法是异步的!!!

setState方法是异步的!!!

重要的事情说三次,是的,所以如果你这样写,可能会导致你的界面发生不可预料的后果:

this.setState(bigData);
// ...干点别的事情

正确的写法应该这样:

this.setState(bigData, function() {
	// ...干点别的事情
});

当你使用React.js开发的时间长了的话,慢慢的也会调整自己的思维方式,更加集中的设计state。这个下面还会提到。

es6 or typescript

如果可能的话,如果改用es6或者ts,上面的代码,将会简单很多很多:

class SimpleComponentES6 extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			name: this.props.name || ''
		}
	}
	
	render() {
		return <div>A simple component named {this.props.name}</div>;
	}
}

代码是不是顿时清晰了很多?

ts现在已经迈进2.0时代了,各方面都比过去完善了很多。假如你的项目,超过1000行JS,最好能换成ts,因为ts的语言特性,会让你的代码的自动提示得更加明确,而不像js或者es6,有的没的相似的不是的方法、属性提示你一大堆。

 

© 著作权归作者所有

共有 人打赏支持
曾建凯

曾建凯

粉丝 333
博文 65
码字总数 104492
作品 0
广州
技术主管
私信 提问
React.js 实战之深入理解组件

sublime 插件安装 用Package Control安装 按下调出命令面板 输入 调出 选项并回车,然后在列表中选中要安装的插件 function形式 state属性 props属性介绍:...

紫霞等了至尊宝五百年
06/02
0
0
React.js 模式

前言 我想找一个好的前端前端框架,找了很久。这个框架将能够帮助我写出具有可扩展性、可维护性 UI 的代码。通过对 React.js 优势的理解,我认为“我找到了它”。在我大量的使用过程中,我发...

卢林
2016/09/25
203
0
通俗理解react中的高阶组件(Higher-Order Components)

有时候人们很喜欢造一些名字很吓人的名词,让人一听这个名词就觉得自己不可能学会,从而让人望而却步。但是其实这些名词背后所代表的东西其实很简单。 我不能说高阶组件就是这么一个东西。但...

东方既白233
08/13
0
0
探索 React 的状态传播

先前有一篇文章探索了 React 组件里的数据。数据由两个结构组成——属性与状态。前者用来代表不可变的数据,而后者代表通过与 UI 交互或通过其他外部手段而改变的数据。 当使用状态数据时,U...

oschina
2016/11/28
2.3K
2
React.js 2016 最佳实践 徬梓阅读 1584收藏 71

译者按:近几个月React相关话题依旧火热,相信越来越多的开发者在尝试这样一项技术,我们团队也在PC和移动端不断总结经验。2016来了,这应该是 React走向成熟的一年,不管你是新手,还是已经...

我家有宝
2016/01/27
58
0

没有更多内容

加载失败,请刷新页面

加载更多

源码分析 Mybatis 的 foreach 为什么会出现性能问题

背景 最近在做一个类似于综合报表之类的东西,需要查询所有的记录(数据库记录有限制),大概有1W条记录,该报表需要三个表的数据,也就是根据这 1W 个 ID 去执行查询三次数据库,其中,有一...

TSMYK
12分钟前
0
0
IC-CAD Methodology企业实战之openlava

在云计算解决安全问题并成为IC界主流运算平台之前,私有的服务器集群系统仍然是各大IC公司的计算资源平台首选。 现在主流的服务器集群管理系统包括lsf,openlava,SkyForm,三者都属于lsf一系...

李艳青1987
28分钟前
2
0
http response stream 字节流 接收与解码

在接收图片、音频、视频的时候,需要用到二进制流。 浏览器会发给客户端 字节Byte流,一串串的发过来_int8格式 -128~127(十进制),也就是8bit(位)。 客户端接收的时候,对接收到的字节收集,...

大灰狼wow
28分钟前
2
0
配置Tomcat监听80端口...

12月13日任务 16.4 配置Tomcat监听80端口 16.5/16.6/16.7 配置Tomcat虚拟主机 16.8 Tomcat日志 1.配置Tomcat监听80端口 示例一:自定义监听端口 vim /usr/local/tomcat/conf/server.xml 编辑...

hhpuppy
28分钟前
3
0
在ubuntu中配置java环境

先在官网下载一个jdk 进入root权限,避免之后出现创建文件失败或者修改文本失败的问题 sudo i 创建一个文件夹来放置jdk解压后的文件 mkdir 文件夹mv jdk1.9(你下载的jdk文件) 你创建 的文...

无极之岚
29分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部