属性的含义和用法:

1、属性的含义。

  props=properties

  属性:一个事物的性质和关系。

  属性往往与生俱来,不可以修改。

2. 属性的用法。

<Helloworld name=??? />

 这个name 可以是 变量 ,对象,数组,函数表达式的值。 

var props={
a:1,
b:2
}
<Helloworld {...props} />

这样react就会自动遍历props对象并添加到属性中去。

状态的含义和用法:

1.状态的含义。

  state

  状态:事物所处的环境。

  状态是由事物自行处理,不断的发生变化。

  getInitialState:初始化实例是特有的状态。

  setState:改变组件的状态。

2,状态的用法

  

var MessageBox = React.createClass({
getInitialState: function() {
return {nameWithQualifier: 'Mr.bbb'};
}, render: function() {
return <div>{this.state.nameWithQualifier}</div>;
}
}); var dom=React.render(<MessageBox />, mountNode);
dom.setState({
nameWithQualifier:"223"
});
 

首先可以在初始化的时候给状态赋值。

接着可以通过:

setState来改变状态。
状态改变以后就会触发render函数。重新渲染视图。。

  

属性和状态对比:

1.相似点:

  都是js对象。

  都会触发render 更新。

  都具备确定性。

2. 不同点:

  

总结:总之,学习到现在挺顺利的。下一节继续加油吧。。大家下节见。

react.js 从零开始(四)React 属性和状态详解的更多相关文章

  1. VB6.0中WinSock控件属性和方法详解

    原文链接:http://liweibird.blog.51cto.com/631764/653134 WinSock控件能够通过UDP协议(用户数据报协议)或TCP协议(数据传输协议)连接到远程的机器 ...

  2. Android基础夯实--重温动画(五)之属性动画 ObjectAnimator详解

    只有一种真正的英雄主义 一.摘要 ObjectAnimator是ValueAnimator的子类,它和ValueAnimator一样,同样具有计算属性值的功能,但对比ValueAnimator,它会更 ...

  3. moviepy音视频剪辑:视频剪辑基类VideoClip的属性及方法详解

    ☞ ░ 前往老猿Python博文目录 ░ 一.概述 在<moviepy音视频剪辑:moviepy中的剪辑基类Clip详解>和<moviepy音视频剪辑:moviepy中的剪辑基类Cl ...

  4. (转)iOS应用程序生命周期(前后台切换,应用的各种状态)详解

    原文:http://blog.csdn.net/totogo2010/article/details/8048652 iOS应用程序生命周期(前后台切换,应用的各种状态)详解         分类:  ...

  5. 用netstat查看网络状态详解

    --用netstat查看网络状态详解 -----------------------------2014/06/11 一.Linux服务器上11种网络连接状态:                     ...

  6. 转:iOS应用程序生命周期(前后台切换,应用的各种状态)详解

    iOS应用程序生命周期(前后台切换,应用的各种状态)详解 分类: iOS开发进阶2012-10-08 15:35 42691人阅读 评论(30) 收藏 举报 iosapplication任务anima ...

  7. vue.js选择if(条件渲染)详解

    vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...

  8. vue.js循环for(列表渲染)详解

    vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

  9. css3浏览器私有属性前缀使用详解

    什么是浏览器私有属性前缀 CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式.它暗示该CSS属性或规则尚未成为W3C标准的一部分. 以下是几种常用前缀 -webkit- -moz- -m ...

随机推荐

  1. Autofac 入门

    Autofac 入门文档 原文链接:http://docs.autofac.org/en/latest/getting-started/index.html 在程序中使用Autofac的基本模式是: ...

  2. 修改字符串中特定的内容,用于OpenRecovery Script

    下面的是实例内容 目标是把OpenRecovery Script输入的内容进行修改 当有下面的输入:(作用是安装/emmc目录下面的update-signed.zip 刷机包) install /em ...

  3. hdu2377Bus Pass(构建更复杂的图+spfa)

    主题链接: 啊哈哈,点我点我 思路: 题目是给了非常多个车站.然后要你找到一个社区距离这些车站的最大值最小..所以对每一个车站做一次spfa.那么就得到了到每一个社区的最大值,最后对每一个社区扫描一次 ...

  4. Directx11学习笔记【十四】 使用最新的Effect框架和SDK

    由于之前一直在看directx11龙书学习,因此sdk一直用的Microsoft DirectX SDK (June 2010) 版本,最近在stackoverflow上问dx11相关问题时,一直被大 ...

  5. memset功能的具体说明

    1.void *memset(void *s,int c,size_t n)总的效果:内存空间开辟了 s 第一 n 字节的值设置为一个值 c. 2.样本#include void main(){cha ...

  6. NAT( 网络地址转换) 实现

    NAT基本介绍: 网络地址转换(NAT,Network Address Translation)属接入广域网(WAN)技术.是一种将私有(保留)地址转化为合法IP地址的转换技术,它被广泛应用于各种类型 ...

  7. [LeetCode283]Move Zeros将一个数组中为0的元素移至数组末尾

    题目: Given an array nums, write a function to move all 0's to the end of it while maintaining the rel ...

  8. Fuel 5.1安装openstack I版本号环境

    声明:本博客欢迎转载,但请保留原作者信息! 作者:傅斌杰 团队:华为杭州OpenStack团队 Fuel 简单介绍 Fuel是Mirantis公司开发的部署openstack集群工具,主要功能为裸机P ...

  9. 3、采用Gradle创Libgdx工程

    (原文链接:http://www.libgdx.cn/topic/20/3-%E4%BD%BF%E7%94%A8gradle%E5%88%9B%E5%BB%BAlibgdx%E9%A1%B9%E7%9 ...

  10. 90社交网络的行为报告后:不拒绝陌生人,TFBOYS作为一个喜爱

    依据腾讯QQ与易观合作的<2014中国90后青年调查报告>,盘点了90后使用社交网络的行为习惯. 相比于70.80后.90后更愿意在社交媒体上公布自己照片.状态,且更愿意在即时通讯中加陌生 ...