react 应用实例1 setState触发重绘

来源：互联网发布：mac .git文件夹编辑：程序博客网时间：2024/05/28 16:19
<!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>
0 0