一、属性

　　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. pdf转换成word转换器免费版

    在平时的办公中,我们只需要有一款比较好用的pdf转换成word转换器,就能提高我们的工作效率,但是国内外的pdf转换成word转换器应该怎么选呢?小编因为是文职工作者,所以在日常的实践中选出了ABBY ...

  2. 如何更改webstrom的默认端口63342

  3. 用highcharts展现你的数据

    摘要: 前面已经分享过图表插件,今天在来将下如何使用highcharts来绘制图表.highcharts支持在线定制,你可以选择你所需要的模块,然后点击build就会生成一个js文件链接,右键保存到本 ...

  4. html+jquery制作网页地图

    http://jvectormap.com/ <!--StartFragment --> JVectorMap 是一个显示矢量地图的jQuery插件.它使用 SVG 在Firefox 3 ...

  5. my97date 时间范围限制

    需求:根据开始时间,动态限制结束时间 实现: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. 打破基于OpenResty的WEB安全防护（CVE-2018-9230）

    原文首发于安全客,原文链接:https://www.anquanke.com/post/id/103771 0x00 前言 ​ OpenResty® 是一个基于 Nginx 与 Lua 的高性能 We ...

  7. unity2017.4.0f1使用AS3.0的AndroidSDK遇到的问题

    原因: Unity 在编译时会调用 Android SDK tools 中的 android 命令,而在新版本的 Android SDK tools 中,android这个命令已经废弃了,导致 Uni ...

  8. MQTT-C-UDP_PUB

    /** ****************************************************************************** * @file    apdu.c ...

  9. Java访问数据库Mysql

    一.概述 本文主要介绍Java接连数据库的基本方法和步骤,并对其中的几个要点进行简要说明. 二.数据库访问步骤 在Java中连接数据库进行的访问主要有以下几个步骤: 加载数据库驱动 注册数据库驱动 建 ...

  10. 【转载】C#调用C++ DLL

    using System; using System.Collections.Generic; using System.Linq; using System.Text; //1. 打开项目“Tzb” ...