• 热门专题

关于React里的State状态的一些简单介绍

作者:whl  发布日期:2018-12-29 08:58:00
  •   说到React可能很多朋友都不是很了解,甚至有些人都没有听说过这个名词。下面小编就给大家讲解一下React里的状态State的一些简单知识,对这方面感兴趣的朋友不妨赶紧跟着小编一起往下看吧。

      在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。

      主要区别:

      State是可变的,是一组用于反映组件UI变化的状态集合;

      而Props对于使用它的组件来说,是只读的,要想修改Props,只能通过该组件的父组件修改。

      在组件状态上移的场景中,父组件正是通过子组件的Props, 传递给子组件其所需要的状态

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

    显示与隐藏的操作

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

    页面进行初始化

      到目前为止,页面已经初始化完毕了。在上面的代码中为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进行显示与隐藏

      注意:

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

      最终版代码:

    最终版代码

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

      上面就是今天给大家分享的关于React里的State状态的一些简单介绍了,也给大家介绍了一些对外接口props和对内接口state的主要区别。如果大家还想了解更多关于React的内容也可以继续关注本站其他发文。

延伸阅读:

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规