浅谈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 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
vue数据双向绑定原理解析(get &amp; set)
Mar 08 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
详解Next.js页面渲染的优化方案
Jan 27 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
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
我常用的几个类
2006/10/09 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
PHP和MYSQL实现分页导航思路详解
2017/04/11 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
php新建文件的方法实例
2019/09/26 PHP
DHTML Slide Show script图片轮换
2008/03/03 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
Python操作列表的常用方法分享
2014/02/13 Python
python自动安装pip
2014/04/24 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
Python模拟登陆实现代码
2017/06/14 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
英国综合网上购物商城:The Hut
2018/07/03 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
雅虎笔试题(字符串操作)
2015/03/24 面试题
机械工程师的岗位职责
2013/11/17 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
胡桃夹子观后感
2015/06/11 职场文书
Redis集群的关闭与重启操作
2021/07/07 Redis
redis数据结构之压缩列表
2022/03/21 Redis
Go并发4种方法简明讲解
2022/04/06 Golang
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android