react基础---pros和state

最新推荐文章于 2024-04-14 16:15:00 发布

不吃饭会饿

最新推荐文章于 2024-04-14 16:15:00 发布

阅读量366

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/celi_echo/article/details/93185829

版权

前端专栏收录该内容

88 篇文章 1 订阅

订阅专栏

一、state

props是组件之间的交互
state是组件内部状态的改变

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="dist/browser.min.js"></script>
    <script src="dist/jquery.js"></script>
    <script src="dist/react.js"></script>
    <script src="dist/react-dom.js"></script>
  </head>
  <body>
    <div id="root">

    </div>
    <script type="text/babel">

      /*
        state：组件内部的状态
        props：组件之间的数据交互
      */

      var Hello = React.createClass({

        // 初始化state  getInitialState:固定的
        getInitialState:function(){
          return{
            value:"呵呵呵"
          }
        },

        changeInfo:function(event){
          this.setState({
            value:'嘿嘿嘿'
          })
        },

        render:function(){
          return(
            <div>
              <p>{ this.state.value }</p>
              <button onClick={ this.changeInfo }>按钮</button>
            </div>
          )
        }
      })

      ReactDOM.render(<Hello />,document.getElementById("root"))

    </script>

  </body>
</html>

二、setState

setSate会引起视图的重绘

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="dist/browser.min.js"></script>
    <script src="dist/jquery.js"></script>
    <script src="dist/react.js"></script>
    <script src="dist/react-dom.js"></script>
  </head>
  <body>
    <div id="root">

    </div>
    <script type="text/babel">

      /*
        state：组件内部的状态
        props：组件之间的数据交互

        setState：引起视图的重绘

        虚拟DOM
      */

      var Hello = React.createClass({
        getInitialState:function(){
          return{
            value:true
          }
        },

        changeInfo:function(event){
          // 改变state状态
          this.setState({
            value: !this.state.value
          })
        },

        render:function(){

          var value = this.state.value;
          // 在react中，三目运算符使用非常频繁
          var info = value ? '孙悟空' : "六耳猕猴"

          return(
            <div>
              <p>{ info }</p>
              <button onClick={ this.changeInfo }>改变</button>
            </div>
          )
        }
      })

      ReactDOM.render(<Hello />,document.getElementById("root"))

    </script>

  </body>
</html>