对组件、Prop 和 State的研究-----------------引用
组件
第一步是将 UI 分解成多个组件。例如,我们可以这样来拆分房子:
现在来编码!
House:
<div>
<Roof /> // 房顶
<Wall /> // 墙
<Window /> // 窗
<Door /> // 门
</div>
等一下,怎么看起来这么像 HTML ?没错!React 的部分代码看上去就是非常像 HTML ,其实就是这样设计的,这是为了让 Web 设计师理解和编写 React 代码更容易一些。太贴心了!
因此,在上面的代码中,我们使用 <div> 作为容器,这基本和 HTML 中是一样的。而像 Roof 和 Wall 这样的标签是我们即将定义的自定义标签/组件。
温馨提示: 上面的代码并非实际的 React 代码,甚至连 JavaScript 都算不上。暂时,我们只使用这种宽松的语法来介绍概念。一旦你理解这些概念后,我们再来学习 JavaScript 的细节并将上述概念转换成真实代码。
为了让这个例子更容易理解一些,我再简化一下: 从现在开始,我们来写一个超级简单的 Web 应用,连图片都不用,只显示文字。
例如,Roof 其实就是一个里面有文字的 div :
Roof:
<div>roof</div>
其他组件也是如此,都是只有文字的 div 而已。首先,我们来看下房子的完整的 React 风格的代码:
House:
<div>
<Roof />
<Wall />
<Window />
<Door />
</div>
Roof:
<div>roof</div>
Wall:
<div>wall</div>
Window:
<div>window</div>
Door:
<div>door</div>
这没什么不好理解的,是吧?House 是由 Roof、Wall、Window 和 Door 组成的,这些都是纯文本构成的组件。
最后,React 生成的 HTML 如下所示:
<div>
<div>roof</div>
<div>wall</div>
<div>windows</div>
<div>door</div>
</div>
使用 Props 来配置屋顶的颜色
想象一下,我们将规格说明书发给一个工厂,这个工厂负责代工所有的零部件。在规格说明书中,我们可以告诉工厂每个部件的固有属性,比如屋顶的颜色、门的形状,等等。在按照我们的要求将屋顶和门生产出来后,它们的属性不会产生任何变化,屋顶还是蓝色的,门依旧是矩形的。这些属性压根不会改变。
在 React 里,我们将这些属性称之为 Prop ,即 property 的缩写。关于 Prop ,你需要记住两点: 首先,我们来决定 Prop 的值,并在组件构建之前将其作为组件设计的一部分。其次,Prop 的值永远不会改变。
那 prop 在代码中是怎样的呢?在 House 组件中,如果我们想要蓝色屋顶的话,只需在 Roof 组件上添加 “color” 属性。这就好比是在发给工厂的规格说明书中指定颜色。
这有点类似于给 HTML 标签添加属性:
House:
<div>
<Roof color="blue"/>
...
</div>
那Roof里面又是怎么样使用 prop 的呢?代码如下所示:
Roof:
<div>{props.color} roof</div>
就这样?没错!但是有几点需要注意:
定义组件的 HTML 风格代码是一个模板,而不是单纯的 HTML 标签。这意味着我们可以在其中放置占位符来改变 HTML 输出的内容,而不必重复编写不同的 HTML (还记得 Domo 的帽子吗?这就是占位符的概念!)。在这个示例中,<Roof color="blue" /> 生成的 HTML 是 <div>blue roof<div>,而 <Roof color="red" /> 生成的是 <div>red roof</div>,以此类推。
模板中使用的花括号告诉 React 我们要在此处使用占位符来替代纯文本。
props 可以看作是 Roof 组件所有属性值的集合。假设组件是这样使用的: <Roof color="blue" material="wood" /> ,那么在 Roof 组件的定义中就可以使用 props.color 和 props.material 。
使用 State 来开门
为组件添加 State
组件还可以拥有 state 。那么什么是 state ?state 是一种可以在组件创建后更改的数据。
举个例子,门既可以开,又可以关。我们可以说门的状态就是 state ,因为它的值是可以在门创建后更改的。在这点上,state 与 prop 是不同的,prop 是不会改变的,比如门的形状。
状态值的改变通常是由外部事件所引起的。在 Web 应用中,这些所谓的外部事件通常包括:用户输入了数据,或者从服务端获取了数据,又或者是定时器的触发。
下面,我们来为门添加 state :
Door:
State:
status // "open" 或 "closed"
<div>Door is {state.status}</div>
与 props 类似,state 也是组件内部所有状态值的集合。因此,我们可以在组件定义的模板中使用 state.[something] 。
接下来,我们来添加一些处理用户输入的“伪代码”来让门具有交互性。
Door:
State:
status // "open" 或 "closed"
<div>Door is {state.status}</div>
// 处理用户输入
当开门时
将 state.status 修改成 "open"
当关门时
将 state.status 修改成 "closed"
这里的关键点是组件的 state 是随时间而变化的。模板的输出,也就是生成的 HTML 会根据 state 的变化而自动改变。
不要忘了上面的只是“伪代码”,而不是 React 代码。
State 是私有的
组件的 state 是私有的。门无论是开还是关,这都仅仅是门的逻辑。与房子或其他组件没有任何关系。事实上,我们完全可以将门从房子中移出去,它仍然可以自己打开或关闭。
因此,门的状态只有在 Door 组件内部是可见的。在 Door 组件内,我们可以读取或改写它的 state 。
House:
<div>
<Door />
...
<!-- 下面这句是错的 -->
<div>The door is {Door.state.status}</div>
</div>
Window:
...
<!-- 下面这句是错的! -->
将 Door.state.status 修改成 'open'
Door:
...
<!-- 兄dei,这还是错的! -->
if House.state.正在出售
房产经纪人就可以开门
总结
好啦,这就是 prop 和 state 。prop 是组件的配置项,它的值是在组件创建之前就已经决定好了,比如门的形状和屋顶的颜色就可以定义为 prop。prop 的值永远不会改变。而 state 是组件的私有数据,当组件创建后才可以使用它。比如门的开关状态可以包括在 state 里面。state 会随着一些外部事件的发生而变化。这些所谓的外部事件通常包括:用户输入了数据,或者从服务端获取了数据,又或者是定时器的触发。
对组件、Prop 和 State的研究-----------------引用的更多相关文章
- [转] 深入理解React 组件状态(State)
React 的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据. 一. 如何定义State 定义一个合适 ...
- prop和state的区别
1.prop用于定义外部接口,state用于记录内部状态: 2.prop的赋值在外部世界使用组件时,state的赋值在组件内部: 3.组件不应该改变prop的值,但是state的存在目的就是让组件来改 ...
- 深入理解React 组件状态(State)
React 的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据. 一. 如何定义State 定义一个合适 ...
- 对React性能优化的研究-----------------引用
JSX的背后 这个过程一般在前端会称为“转译”,但其实“汇编”将是一个更精确的术语. React开发人员敦促你在编写组件时使用一种称为JSX的语法,混合了HTML和JavaScript.但浏览器对JS ...
- 从零开始开发一个vue组件打包并发布到npm (把vue组件打包成一个可以直接引用的js文件)
自己写的组件 有的也挺好的,为了方便以后用自己再用或者给别人用,把组件打包发布到npm是最好不过了,本次打包支持 支持正常的组件调用方式,也支持Vue.use, 也可以直接引用打包好的js文件, 配合 ...
- vuex的state在组件选项data和computed上引用的区别
引用在vue组件的data选项,不因数值被改变而更新引在在vue组件的computed选项,因数值变化而更组件 案例代码如下,调整下引用vue和vuex地址即可展示 <!DOCTYPE html ...
- vue深入了解组件——Prop
一.Prop的大小写(camelCase vs kebab-case) HTML中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用DOM中的模板时,cameCase ...
- vue组件 Prop传递数据
组件实例的作用域是孤立的.这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子组件的props选项. prop 是单向绑定的:当父组件的属性变化时, ...
- vue中子组件直接修改父组件prop属性bug
在有些时候,子组件直接修改父组件传来的 prop 对象的属性会出现不同步的问题. 比如,父组件传过来的一个对象 checkBoxObj: checkBoxObj:{ checked: false } ...
随机推荐
- 【VS开发】static、extern分析总结
引用请注明出处:http://blog.csdn.net/int64ago/article/details/7396325 对于写了很多小程序的人,可能static和extern都用的很少,因为sta ...
- sass安装:webpack sass编译失败,node-sass安装失败的终极解决方
文章来源:sass安装:webpack sass编译失败,node-sass安装失败的终极解决方 sass难言之隐-sass安装的坑 之前花了很多时间折腾node-sass,发现sass老是安装不上 ...
- Jenkins 启动不来的排查方法
1.通过 ps -ef | grep tomcat找到jenkins的路径,下有logs,可以查看日志 2.装插件报错时,报错信息里会提示依赖的插件版本号,到jenkins官网下载对应版本的插件即可, ...
- PostgreSQL编码格式:客户端服务器、客户端、服务器端相关影响
关于字符编码这块,官网链接: https://www.postgresql.org/docs/current/charset.html 刚刚写了几百字的东西因为断网,导致全没有了,重头再写,我就只想记 ...
- 使用javascript完成一个简单工厂设计模式。
在JS中创建对象会习惯的使用new关键字和类构造函数(也是可以用对象字面量). 工厂模式就是一种有助于消除两个类依赖性的模式. 工厂模式分为简单工厂模式和复杂工厂模式,这篇主要讲简单工厂模式. 简单工 ...
- Ubuntu-虚拟机-忘记登陆密码
前提 在我们使用Ubuntu虚拟机的过程中,偶尔会出现密码忘了的尴尬事情.里面又有重要资料,不能重新安装,这时我们要重置密码,接下来,让我们共同学习! 重启虚拟机-重启时按住 shift 会出现以下 ...
- 虚拟机上安装Linux系统之ubuntu
以前自己在虚拟机上安装过几回Linux系统,有centos.ubuntu,不过都没来得及写一个安装教程,今天正好需要重新安装一下,就分享一个安装ubuntu的详细教程 安装前准备: VMWare虚拟机 ...
- SVN简单流程总结
1 创建仓库 2 启动svn服务器 svnserve -d -r 仓库地址(如:D:\SVN\repoDemo1) 3 新的用户第一次与服务器交互时,需要使用checkout将仓库检出到本 ...
- 房地产大佬潘石屹推荐学Python编程,这本从0到1就够了
潘石屹推荐学Python编程,很多人都不相信,他的微博真真切切. 连房地产都开始学Python了,因为要听懂机器,让机器为我所用. 再不学习Python真的晚了!!!! 如何学? 怎么学? 还是推荐高 ...
- java 如何编写多线程的代码
线程是干活的所以线程一定是Thread,或者改线程实现Runnable接口多线程是竞争关系,所以多个线程竞争同一个资源,也就是同一个对象所以这个竞争对象发到Thread中即: // resources ...