一、属性

　　1、第一种使用方法：键值对

　　　　<ClaaNameA name = “Tom” />

　　　　<ClaaNameA name = {Tom} />

　　　　<ClaaNameA name = {“Tom”} />

　　　　<ClaaNameA name = {[1,2,3]} />//数组

　　　　<ClaaNameA name = {FunctionNAme} /> //定义一个函数

　　2、第二种方法：三个点的展开对象形式

　　　　var props = {

　　　　　　one :”123”,

　　　　　　tow :321

　　　　}

　　　　<ClassNameB {…props} />

　　　　增加三个引号相当于这里面拿到两个属性了（one和two）

　　3、setProps形式：通过组件更新属性，不能在组件内部中修改属性的，因为会违背组件设计原则（尽量避免）

　　　　var instance =React.render(<ClassNameC ><ClaasNameC/>,document.body);

　　　　instance.setProps({name:”Tom" });

二、状态：事物所处的状况，由事物自行处理不断变化／事物的私有属性

　　getInitialState：初始化每个实例特有的状态

　　setState:更新组件状态

　　setState会触发diff算法：判断state和页面结果的区别，是否需要更新

三、状态和属性对比

　　状态和属性都会触发render更新，都是纯JS对象

　　状态：是和自己相关的，既不受父组件也不受子组件影响

　　属性：本身是不能自己去修改的，只能从父组件获取属性，父组件也能修改它的属性

　　根本的区别：组件在运行时需要去修改维护的就是状态

四、简单的demo熟悉一下：

 <!DOCTYPE html>

 <html>

   <head>

     <meta http-equiv='Content-type' content='text/html; charset=utf-8'>

     <title>daomul's example</title>

     <link rel="stylesheet" href="../shared/css/base.css" />

   </head>

   <body>

     <h1>Text demo</h1>

     <div id="container">

     </div>

     <script src="../shared/thirdparty/es5-shim.min.js"></script>

     <script src="../shared/thirdparty/es5-sham.min.js"></script>

     <script src="../shared/thirdparty/console-polyfill.js"></script>

     <script src="../../build/react.js"></script>

     <script src="../../build/JSXTransformer.js"></script>

     <script type="text/jsx">

         //内容组件

         var Content = React.createClass({

           getInitialState:function(){

             return {

               inputText:'',

             };

           },

           handleChange:function(event){

             this.setState({inputText:event.target.value});

           },

           handleClick:function(){

             console.log("props name is " + this.props.selectName + " \n and inputText is "  + this.state.inputText);

           },

           render:function(){

             return <div>

               <textarea onChange = {this.handleChange} placeholder = "please input something!"></textarea>

               <button onClick = {this.handleClick}>sumbit</button>

             </div>;

           },

         });

         //评论组件

         var Comment = React.createClass({

           getInitialState:function(){

             return {

               names:["Tom","Axiba","daomul"],

               selectName:'',

             };

           },

           handleSelect:function(){

             this.setState(

                 {selectName : event.target.value}

               );

           },

           render:function(){

             var options = [];

             //往options中添加子option

             for (var option in this.state.names) {

               options.push(<option value={this.state.names[option]}> {this.state.names[option]}  </option>)

             };

             return <div>

               <Content selectName = {this.state.selectName}>

               </Content>

               <select onChange = {this.handleSelect}>

                 {options}

               </select>

             </div>;

           },

         });

         //start render

         React.render(<Comment></Comment>,document.body);

     </script>

   </body>

 </html>

React 属性和状态的一些总结的更多相关文章

  1. react 属性与状态 学习笔记

    知识点:1.react 属性的调用 this.props.被调用的属性名 设置属性的常用方法:var props = { one: '123', two: 321}调用这个属性:<HelloWo ...

  2. react.js 从零开始（四）React 属性和状态详解

    属性的含义和用法: 1.属性的含义. props=properties 属性:一个事物的性质和关系. 属性往往与生俱来,不可以修改. 2. 属性的用法. <Helloworld name=??? ...

  3. 4. React 属性和状态介绍

            React 中的属性和状态初看之下可以互相替代,但是在 React 的设计哲学中两者有着截然不同的使用方式和使用场景. 属性的含义和用法         props = propert ...

  4. React 属性和状态具体解释

    属性的含义和使用方法 props=properties 属性:一个事物的性质与关系 属性往往是与生俱来的.无法自己改变的. 属性的使用方法: 第一种方法:键值对 1.传入一个字符串:"Hi& ...

  5. React属性和状态对比

    一.相似点 二.区别 三.如何区分 PS:所有的数据都可以变成属性

  6. React基础（Diff算法，属性和状态）

    1.React的背景原理 (1)React Diff算法流程 (2)React虚拟DOM机制 React引入了虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DO ...

  7. 【React】377- 实现 React 中的状态自动保存

    点击上方"前端自习课"关注,学习起来~ 作者:陈俊宇 https://github.com/CJY0208 什么是状态保存? 假设有下述场景: 移动端中,用户访问了一个列表页,上拉 ...

  8. React: React的组件状态机制

    一.简介 在React中,有两个核心的默认属性,分别是state和props.state会记录组件的状态,React根据状态的变化,会对界面做相应的调整或渲染.props则是数据流向属性,React通 ...

  9. React学习：状态(State) 和 属性(Props)

    State 与 Props 区别props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下层组件需要使用上层组件的数据或方法 ...

随机推荐

  1. Git使用教程，从入门到上瘾

    Git 是什么? Git 是一个分布式的代码管理容器,本地和远端都保有一份相同的代码. Git 仓库主要是由是三部分组成:本地代码,缓存区,提交历史,这几乎是所有操作的本质,但是为了文章更加简单易懂, ...

  2. php解析mpp文件中的资源

    获取层级的project任务  参考 启动javabridge java -jar JavaBridge.jar SERVLET_LOCAL: 1.读取mpp文件 $file_path = " ...

  3. eclipse 生成webservice 客户端

    一.eclipse 自动生成的web客户端代码 调用客户端

  4. [Converge] Backpropagation Algorithm

    Ref: CS231n Winter 2016: Lecture 4: Backpropagation Ref: How to implement a NN:中文翻译版本 Ref: Jacobian矩 ...

  5. [Module] 08 - MVP by Mosby

    From: Mosby MVP使用教程[作者用心] View是消极视图(Passive View), 它尽量不去主动做事, 让Presenter通过抽象方式控制View 例子: 例如Presenter ...

  6. DB索引、索引覆盖、索引优化

    ###########索引########### @see   http://mp.weixin.qq.com/s/4W4iVOZHdMglk0F_Ikao7A 聚集索引(clustered inde ...

  7. scala try monad

    当输入的数据格式不正确时,ActivityData 中会出现 OutofIndex 错误,但更多的时候我们只关心想要的结果而不想了解出现了怎样的错误,然后会写出这样的代码   def parseCSV ...

  8. Spring整合quartz2.2.3总结，quartz动态定时任务，Quartz定时任务集群配置

    Spring整合quartz2.2.3总结,quartz动态定时任务,Quartz定时任务集群配置 >>>>>>>>>>>>&g ...

  9. sqlite3常用指令

    一.建立数据库 sqlite3.exe test.db 二.双击sqlite-3_6_16目录下的程序sqlite3.exe,即可运行 三.退出 .exit 或者 .quit 四.SQLite支持如下 ...

  10. ssh面密码登录配置-hadoop安装准备

    1. 用ssh-keygen创建公钥,一直回车即可 root@kali:~# ssh-keygen -t rsa Generating public/private rsa key pair. Ent ...