浅谈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 相关文章推荐
FireFox中textNode分片的问题
Apr 10 Javascript
轻量级 JS ToolTip提示效果
Jul 20 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
JS中call和apply函数用法实例分析
Jun 20 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
php输出1000以内质数(素数)示例
2014/02/16 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
Vue渲染函数详解
2017/09/15 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
python3音乐播放器简单实现代码
2020/04/20 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
银行会计业务的个人自我评价
2013/11/02 职场文书
养殖人员的创业计划书范文
2013/12/26 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
儿童生日会策划方案
2014/05/15 职场文书
公司应聘自荐书
2014/06/14 职场文书
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL