浅谈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 相关文章推荐
Javascript 汉字字节判断
Aug 01 Javascript
起点页面传值js,有空研究学习下
Jan 25 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
细说Vue组件的服务器端渲染的过程
May 30 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 Javascript
vue中watch的用法汇总
Dec 28 Vue.js
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/02/03 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
Python3基础之条件与循环控制实例解析
2014/08/13 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
python爬虫 正则表达式解析
2019/09/28 Python
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
毕业生自我鉴定
2013/12/04 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
2015年中个人总结范文
2015/03/10 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python