React之状态(State)


  
  

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

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

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

React之状态(State)

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        

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

由上面的示例可以发现,当你改变isShow的状态时,div也会发生相对应的变化!
……
今天先到这!哈,未完,待续!

React之状态(State)》来自互联网,仅为收藏学习,如侵权请联系删除。本文URL:http://www.hashtobe.com/3686.html