zoukankan html css js c++ java

react 应用实例1 setState触发重绘

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title> React应用实例1 </title>
    <script src="https://static.runoob.com/assets/react/react-0.14.7/build/react.js"></script>
    <script src="https://static.runoob.com/assets/react/react-0.14.7/build/react-dom.js"></script>
    <script src="https://static.runoob.com/assets/react/browser.min.js"></script>
  </head>
 <body>
    <div id="message" align="center"></div>

    <script type="text/babel">
    {/*定义一个组件*/}
      var Counter = React.createClass({
      {/*设定初始状态，getInitialState是一个api，其名称不能改变*/}
        getInitialState: function () {
          return { clickCount: 0 };
        },
         {/*handleClick相当于一个函数名称，可以改变的*/}
        handleClick: function () {
        {/*setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。*/}
          this.setState(function(state) {
            return {clickCount: state.clickCount + 1};
          });
        },
        render: function () {
             {/*每点击一次，运行一次函数handleClick*/}
          return (<h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2>);
        }
      });
      ReactDOM.render(
        <Counter />,
        document.getElementById('message')
      );
    </script>
  </body>
</html>

查看全文

相关阅读:
Python基础之面向对象3（继承）
Python基础之面向对象2（封装）
python基础之面向对象1
Python基础之变量作用域
 Python基础之函数参数
 Python基础之函数
 Python基础之for循环嵌套实例
 Python基础之集合
 Python基础之元组和字典
 Python基础之列表深浅复制和列表推导式

原文地址：https://www.cnblogs.com/jiandanshishu/p/12953286.html