2017-1-5 天气雨 React 学习笔记

官方example 中basic-click-counter

 <script type="text/babel">
       var Counter = React.createClass({
         getInitialState: function () {
           return { count: 0 };
         },
         handleClick1: function () {
           this.setState({
             count: this.state.count + 1,
           });
         },
         handleClick2: function () {
           hand();
         },
         render: function () {
           return (
             <div>
               <button onClick={this.handleClick1}>
               {this.state.count}
               </button>
               <button onClick={this.handleClick2}>
               {this.state.count}
               </button>
             </div>
           );
         }
       });
       var hand = function(){
         alert("sd");
       }
       ReactDOM.render(
         <Counter />,
         document.getElementById('container')
       );
     </script>

其中：

getInitialState 设置初始状态

设置点击事件并非一定用handleClick这个函数名，同样的你可以在创建组件时添加多个点击执行函数，例如handleClick1，handleClick2

利用不同的方式绑定并触发，指的一提的是在这个组件里所有的数据都是双向绑定的，如果你在响应事件中利用setState去改变组件中值，那么

真个组件都会触发相应值的刷新

这里就体现了数据和页面刷新的绑定效果，跟传统需要手动刷新形成对比。

发现问题：且看Counter组件的render函数，我们发现这里使用的是JSX语法，那么对于render函数而言，我们不能动态的创建dom节点，打个比方

倘若一个data数组中存在数据，我们需要根据数组的长度创建一个列表，每一行显示data[i]中的数据。如果在js中很容易利用字符串拼接然后添加到innerHtml

中即可，但是在JSX中目前来看，我是没有看到(但是不排除存在)。

这里需要提及下这种情况的必要性，基本上利用ajax和后台交互，然后将结果显示在前端，这种情况是必然出现的，所以如果你认为没必要了解这种情况，要么就是你还没有工作，

要么就是，你是前端还停留在静态网页的层次

提出猜想方案：

这里的动态创建在实际情况下无非就是实际操作DOM，然而React设计初衷之一就是降低DOM操作带来的性能损耗，所以如果需要动态创建，那么很明显需要的是动态创建虚拟节点，

然后再让react框架本身去实际进行渲染。问题就到如何动态创建虚拟节点上来了，这同样是个非常有意思的思考题，倘若react可以提供一个函数动态创建虚拟节点的函数，那么你动

态创建虚拟节点后，这个虚拟节点同样需要注册到组件中，等到组件状态刷新的时候，也要刷新你新增的这个节点，也就意味着创建虚拟节点的同时还需要绑定。在我看来这条路走下去

确实有些困难。

那么如果我们换个方向思考呢？

对于很多情况下来说，倘若我们把所有的状态都写出来呢？还是上面的问题把数组数据写成表格，首先我们是需要分页的，那么我们不妨写出一页全部行，如果有数据相应的数据填充，

没有就为空，这样子我们很容易实现某一页上的数据显示，然后我们只需要控制不同页面上的数据载入即可，react并没有新增任何dom节点(特指元素节点)，只需要切换不同的状态即可

但是，

实际上上面所说的问题还是没有解决，那么问题到底是什么限制了无法动态创建dom节点呢？是react吗，貌似这里是jsx阻止了我们，因为jsx本身是在编译成js之后再去使用，

那么意味着我们很难在编译之前的代码中嵌入相应的部分从而在实际运行中动态编译之后的render函数达到符合预期的结果。js本身是可以达到这个效果的，但是jsx无法达到。

那么问题暂时挂起，待找到答案继续，如果有朋友可以解答这个问题，感激不尽