浅谈React 属性和状态的一些总结


Posted in Javascript onNovember 21, 2016

一、属性

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>
2 <html>
3  <head>
4   <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
5   <title>daomul's example</title>
6   <link rel="stylesheet" href="../shared/css/base.css" />
7  </head>
8  <body>
9   <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 属性和状态的一些总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
详解JavaScript中的every()方法
Jun 08 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 #Javascript
jQuery用FormData实现文件上传的方法
Nov 21 #Javascript
遍历js中对象的属性和值的实例
Nov 21 #Javascript
JavaScript数据结构链表知识详解
Nov 21 #Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 #Javascript
Node.js测试中的Mock文件系统详解
Nov 21 #Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 #Javascript
You might like
PHP数据类型之布尔型的介绍
2013/04/28 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
python flask实现分页效果
2017/06/27 Python
python flask安装和命令详解
2019/04/02 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
Python实现元素等待代码实例
2019/11/11 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
如何定义一个可复用的服务
2014/09/30 面试题
工商企业管理实习自我鉴定
2013/12/04 职场文书
运动会广播稿300字
2014/01/10 职场文书
组织关系转移介绍信
2014/01/16 职场文书
音乐器材管理制度
2014/01/31 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
党校学习心得体会范文
2014/09/09 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js