浅谈React之状态(State)


Posted in Javascript onSeptember 19, 2018

在React当中,当你更新组件的state,然后新的state就会重新渲染到页面中。在这个时候不需要你操作任何DOM。你也可以认为组件在React当中是一个状态机(State Machines)。当用户进行操作时会实现不同的状态,然后再渲染到你的页面中,让你的页面与数据始终保持一致。

如何定义State

定义一个合适的State,是正确创建组件的第一步。State必须能代表一个组件UI呈现的完整状态集,即组件的任何UI改变,都可以从State的变化中反映出来;同时,State还必须是代表一个组件UI呈现的最小状态集,即State中的所有状态都是用于反映组件UI的变化,没有任何多余的状态,也不需要通过其他状态计算而来的中间状态。

组件中用到的一个变量是不是应该作为组件State,可以通过下面的4条依据进行判断:

1.这个变量是否是通过Props从父组件中获取?如果是,那么它不是一个状态。

2.这个变量是否在组件的整个生命周期中都保持不变?如果是,那么它不是一个状态。

3.这个变量是否可以通过其他状态(State)或者属性(Props)计算得到?如果是,那么它不是一个状态。

4.这个变量是否在组件的render方法中使用?如果不是,那么它不是一个状态。这种情况下,这个变量更适合定义为组件的一个普通属性,例如组件中用到的定时器,就应该直接定义为this.timer,而不是this.state.timer。

如果对状态不好理解的朋友,你可以认为状态即是数据!

State 与 Props 区别

props 是组件对外的接口,state 是组件对内的接口。组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下层组件需要使用上层组件的数据或方法,上层组件就可以通过下层组件的props属性进行传递,因此props是组件对外的接口。组件除了使用上层组件传递的数据外,自身也可能需要维护管理数据,这就是组件对内的接口state。根据对外接口props 和对内接口state,组件计算出对应界面的UI。

主要区别:

  1. State是可变的,是一组用于反映组件UI变化的状态集合;
  2. 而Props对于使用它的组件来说,是只读的,要想修改Props,只能通过该组件的父组件修改。
    在组件状态上移的场景中,父组件正是通过子组件的Props, 传递给子组件其所需要的状态

现在我们先来通过ES6类React.Component完成一个通过点击按钮对DIV进行显示与隐藏的操作,效果如下:

浅谈React之状态(State)

咱们先将页面进行初始化:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #myDiv{
      width:200px;
      height:400px;
      background:red;
      color:yellow;
      border:1px solid green;
    }
  </style>
  <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react.development.js"></script>
  <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react-dom.development.js"></script>
  <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/babel.min_.js"></script>
</head>
<body>
  <div id="wrap"></div>
</body>
<script type="text/babel">
  class MyComponent extends React.Component{
    constructor(props){
      super(props);
      // 为当前状态添加isShow属性
      this.state={
        // 值为true显示,false为隐藏。默认值为true。
        isShow:true
      }
    }
    render(){
      //返回组件的初始内容
      return <div>
        <input type="button" value="显示与隐藏"/>
        <div id="myDiv">我在这里呀!</div>
      </div>
    }
  }
  ReactDOM.render(
    <MyComponent/>,
    document.querySelector("#wrap")
  )
</script>
</html>

到目前为止,页面已经初始化完毕了。在上面的代码中为state添加了一个默认值为true的属性isShow。isShow用来控制div的显示与隐藏!当isShow为true时显示,为false时隐藏

接下来要完成的二件事。

第一件事是要为按钮增加一个点击事件,事件与changeState方法进行绑定。当点击按钮时改变isShow的状态,也就是要为 isShow进行取反操作。

注意:

1、onClick中的c要大写。
2、onClick后跟的方法不要用引号包裹,而是用{}
3、在ES6的class中React是不会自动绑定this的,所以需要自己通过bind绑定。
4、changeState方法中,不能直接修改isShow的值,而是需要借助setState方法来进行设置。

第二件事是要为id为myDiv的DIV增加一个style属性,该属性要根据isShow的状态来对DIV进行显示与隐藏

注意:

1、style的值不要用双引号,而是用{},否则会报错

最终版代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #myDiv{
      width:200px;
      height:400px;
      background:red;
      color:yellow;
      border:1px solid green;
    }
  </style>
  <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react.development.js"></script>
  <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react-dom.development.js"></script>
  <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/babel.min_.js"></script>
</head>
<body>
<div id="wrap"></div>
</body>
<script type="text/babel">
  class MyComponent extends React.Component{
    constructor(props){
      super(props);
      // 为当前状态添加isShow属性
      this.state={
        // 值为true显示,false为隐藏。默认值为true。
        isShow:true
      }
    }
    changeState(){
      //此处不能直接修改isShow的值。而是需要借助setState方法!
      this.setState({
        //取反操作
        isShow:!this.state.isShow
      });
    }
    render(){
      //返回组件的初始内容
      return <div>
        {/*在ES6的class中React是不会自动绑定this的,所以需要自己绑定*/}
        <input type="button" value="显示与隐藏" onClick={this.changeState.bind(this)} />
        <div id="myDiv" style={{display:this.state.isShow?'block':'none'}}>
          我在这里呀!
        </div>
      </div>
    }
  }
  ReactDOM.render(
    <MyComponent/>,
    document.querySelector("#wrap")
  )
</script>
</html>

由上面的示例可以发现,当你改变isShow的状态时,div也会发生相对应的变化!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript for循环设法提高性能
Feb 24 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
Jun 02 Javascript
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 Javascript
JavaScript实现瀑布流布局的3种方式
Dec 27 Javascript
jQuery使用each遍历循环的方法
Sep 19 #jQuery
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 #Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
Sep 19 #Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 #Javascript
vue.extend与vue.component的区别和联系
Sep 19 #Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 #Javascript
自己动手封装一个React Native多级联动
Sep 19 #Javascript
You might like
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
js使用心得分享
2015/01/13 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
Python基础之函数用法实例详解
2014/09/10 Python
Python脚本实现网卡流量监控
2015/02/14 Python
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
Python脚本调试工具安装过程
2021/01/11 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
小学教师节活动方案
2014/01/31 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
中小企业员工手册范本
2015/05/14 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
投诉信回复范文
2015/07/03 职场文书