一、属性

　　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. 服务端API安全解决方案

    由于server端和client端需要通信,所以api的安全性需要保证 1.完全开放的 一般只是查询,不能执行增.删.改的操作 裸奔的 <?php public function getGood ...

  2. Hibernate的Configuration和SessionFactiory

    Configuration: Configuration是hibernate的入口,负责管理Hibernate的配置信息,这些配置信息都是从配置文件hibernate.cfg.xml或者Hiberna ...

  3. SpringMVC -- 梗概--源码--壹--收参

    附:实体类 Class : User package com.c61.entity; import java.text.SimpleDateFormat; import java.util.Date; ...

  4. ios开发之--调整UISearchBar的输入框的背景颜色

    遍历UISearchBar的子视图,找到输入框坐在的view,添加背景颜色即可. 代码如下: UISearchBar *searchBar = [[UISearchBar alloc] initWit ...

  5. 递归的几个demo

    /** * Created by root * Description : 递归函数 */ object RecursionTest { def main(args: Array[String]): ...

  6. iOS开发--UILineBreakModeWordWrap deprecated

    在iOS6中UILineBreakModelWordWrap deprecated 现在推荐使用 [label setLineBreakMode:NSLineBreakByWordWrapping];

  7. U3D教程宝典之两步实现超实用的XML存档

    两步实现超实用的XML存档 本套存档的优点:易使用,跨平台,防作弊(内容加密 + 防拷贝) 脚本下载地址 使用方法非常简单:把GameDataManager和XmlSaver两个脚本添加至工程后(1) ...

  8. 【重要】攻击动作时间段判断~使用动画time比较动画length和使用一个变量数组做延迟

    using UnityEngine; using System.Linq; using System.Collections.Generic; [RequireComponent(typeof(Cha ...

  9. __declspec(dllimport)与__declspec(dllexport)作用总结

    参考自:http://bbs.csdn.net/topics/330169671 __declspec(dllexport):导出符号,也就是定义需要导出函数的dll中给导出函数的函数声明前面加上导出 ...

  10. C++程序中调用其他exe可执行文件方法

    在编程过程中有个需求,点击某个按钮需要弹出系统的声音控制面板.在网上查了下代码中调用其他exe程序或者打开其他文件的方法. 自己借鉴网上的文章稍微总结下,加深下印象,也给方便自己用. 在代码中调用其他 ...