浅谈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面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
JavaScript在IE和FF下的兼容性问题
May 19 Javascript
javascript中解析四则运算表达式的算法和示例
Aug 11 Javascript
jQuery实现拖拽效果插件的方法
Mar 23 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 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+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
javascript中的正则表达式使用指南
2015/03/01 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
Bootstrap插件全集
2016/07/18 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
Python编程实现正则删除命令功能
2017/08/30 Python
python八大排序算法速度实例对比
2017/12/06 Python
Python实现的双色球生成功能示例
2017/12/18 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
python sort、sort_index方法代码实例
2019/03/28 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
用 Python 制作地球仪的方法
2020/04/24 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
《小熊住山洞》教学反思
2014/02/21 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
工作犯错保证书
2015/05/11 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js