一、属性

　　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. [原]unity调Android(三)

    private UnityPlayer mUnityPlayer;    @Override    protected void onCreate(Bundle savedInstanceState) ...

  2. UINavigationController popToViewController用法

    popToViewController用法  [self.navigationController popToViewController:[self.navigationController.vie ...

  3. iOS App Transprot Security

    随着iOS 9和OS X EI Capitan 的发布,苹果官方引入了应用通讯安全模式的概念.简而言之,应用通讯安全模式强制性要求应用需要使用最佳的安全通讯协议,比如TLS 1.2版本和前向保密技术. ...

  4. Android实现图片缩放示例

    package com.example.demo; import android.os.Bundle; import android.app.Activity; import android.grap ...

  5. Linux 添用户报错：useradd：警告：此主目录已经存在

    建立mysql用户.组 groupadd mysql useradd -g mysql mysql 然后删除 userdel mysql 再添用户和组加时,提示: 解决方法:删除用户不用userdel ...

  6. Explaining Delegates in C# - Part 4 (Asynchronous Callback - Way 1)

    So far, I have discussed about Callback, Multicast delegates, Events using delegates, and yet anothe ...

  7. RAC的搭建（二）--创建ASM磁盘

     1. 规划 表决磁盘: 1Gx3(3节点以下,建议都采用这种配置,三个磁盘加起来要大于1.8G,否则会报错) 数据磁盘: 10Gx1 闪回磁盘: 5Gx1 2. 创建共享磁盘 virtualBox上 ...

  8. AddComponentRecursively

    class AddComponentRecursively extends ScriptableWizard { var componentName : String = ""; ...

  9. 第三篇：配置Hadoop的Eclipse开发环境

    前言 在先前的文章中,已经介绍了如何在Ubuntu Kylin操作系统下搭建Hadoop运行环境,而现在将在之前工作的基础上搭建Eclipse开发环境. 配置 开发环境:Eclipse 4.2,其他同 ...

  10. Netty《一》

    作者:郭无心链接:https://www.zhihu.com/question/24322387/answer/78947405来源:知乎著作权归作者所有,转载请联系作者获得授权. Netty是什么? ...