浅谈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 Title、alt提示(Tips)实现源码解读
Dec 12 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
vue+openlayers绘制省市边界线
Dec 24 Vue.js
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
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
php数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
JavaScript的document对象和window对象详解
2010/12/30 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
Python中的__SLOTS__属性使用示例
2015/02/18 Python
讲解Python中if语句的嵌套用法
2015/05/14 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
python机器学习之决策树分类详解
2017/12/20 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
年会搞笑主持词串词
2014/03/24 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
赔偿协议书范本
2014/09/12 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
雷锋之歌观后感
2015/06/10 职场文书