一、属性

　　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. Window 10 ：如何彻底关闭：Windows Defender Service（2015-12-20日更新）

    Window 10 :如何彻底关闭:Windows Defender Service? 网上流传的什么组策略gpeidt.msc方法,什么安装其他的杀软之类的方法都很麻烦,且有弊病! 其实很简单: 利 ...

  2. 关于移位运算符>>和<<

    首先,移位运算符有三种,其操作类型只支持:byte / short / char / int和long五种. << 左移运算符,表示将左边的操作数的二进制数据向左移动*位,移动后空缺位以0 ...

  3. 2018-10-29 A股主要指数的市盈率(PE)估值高度

    全指材料(SH000987) - 2018-10-29日,当前值:11.9289,平均值:30.66,中位数:26.1407,当前 接近历史新低.全指材料(SH000987)的历史市盈率PE详情 全指 ...

  4. Docker容器的生命周期管理

    https://blog.csdn.net/u010278923/article/details/78751306

  5. Java从控制台接受输入字符

    创建一个类,在该类的主方法中创建Scanner扫描起来封装System类的in输入流,然后提示用户输入身份证号码,并输入身份证号码的位数. 代码如下: import java.util.Scanner ...

  6. SpringMVC由浅入深day02_5数据回显_6异常处理器

    5 数据回显 5.1 什么数据回显 表单提交失败需要再回到表单页面重新填写,原来提交的数据需要重新在页面上显示. 5.2 pojo数据回显方法 1.springmvc默认对pojo数据进行回显. po ...

  7. POJ 3273 Monthly Expense(二分搜索)

    Description Farmer John is an astounding accounting wizard and has realized he might run out of mone ...

  8. JavaScript之 for...in

    for-in 可以用来枚举对象的属性,还有数组的索引,用法: 枚举对象属性 var o={name:'a',age:25,sex:'male'} for(var each in o){ console ...

  9. [Windows] Windows 8.x 取消触摸板切换界面

    在鼠标中选中UltraNav,找到Application Gestures - Edge Swipes,取消Enable Edge Swipes.

  10. 据库分库分表(sharding)系列(一) 拆分实施策略和示例演示

    本文原文连接: http://blog.csdn.net/bluishglc/article/details/7696085 ,转载请注明出处!本文着重介绍sharding切分策略,如果你对数据库sh ...