属性的含义和用法:

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. DateTime.Compare(t1,t2)比較两个日期大小

    DateTime.Compare(t1,t2)比較两个日期大小,排前面的小,排在后面的大,比方:2011-2-1就小于2012-3-2返回值小于零:  t1 小于 t2. 返回值等于零 : t1 等于 ...

  2. Xamarin.Android 入门实例(2)之实现WCF 寄宿于IIS 的Web服务提供

    1.WCF 契约 ICalculator.cs using System.ServiceModel; namespace Contracts { [ServiceContract] public in ...

  3. java多线程Future和Callable类的解释与使用

    一,描写叙述 ​在多线程下编程的时候.大家可能会遇到一种需求,就是我想在我开启的线程都结束时,同一时候获取每一个线程中返回的数据然后再做统一处理,在这种需求下,Future与Callable的组合就派 ...

  4. ViewRootImpl和WindowManagerService笔记

    1.每个窗体的ViewRootImpl都有一个mWindowAttributes窗体属性,该属性在WindowManagerGlobal.updateViewLayout()->ViewRoot ...

  5. c# 通过配置自动附加数据库

    using System; using System.Collections.Generic; using System.Windows.Forms; using System.Data.SqlCli ...

  6. 取缔Chrome装载电脑管家的广告过滤脚本代码

    今天Chrome调试脚本.加载在下面的脚本中找到的内容: /* 电脑管家chrome 广告过滤 */ var GJAD_CS = { elemhideElt : null, setElemhideCS ...

  7. TCP/IP具体解释--nagle算法和TCP_NODELAY

    在client一直给server发送小数据的时候,接受到一个回应会在非常长的时间以后,可是将多个小数据写操作合并成一个写操作,问题就没了. 这个事件的缘由可能是TCP_NODELAY的原因 如今大概明 ...

  8. Cocos2d-x场景功能描述的生命周期

    层(Layer)的生命周期函数有例如以下: init().初始化层调用. onEnter().进入层时候调用. onEnterTransitionDidFinish(). 进入层并且过渡动画结束时候调 ...

  9. GLEW_ERROR_NO_GL_VERSION的解决方法

    关于 GLenum err = glewInit(); if (GLEW_OK != err) fprintf(stderr, "error initializaing GLew %s\n& ...

  10. 【工具】JAVA 在单元读取文件并比较

    package test20140709; import java.io.BufferedReader; import java.io.File; import java.io.FileReader; ...