ReactJS使用心得之轮播图

今天帮人用React写了一个轮播图功能，之前只是听过，没有用过React，刚好了解下；大致上是知道怎么用了，这东西给我的感觉书写方式上倒是跟mobile有点类似，中途肯定有坑，但是自己的想法貌似都还正确，api上没有的方式只能自己尝试了，记录下问题防止再忘了

1.render方法下的，最外层的只能有一个元素包裹着，例如下面的render方法，return的地方最外层只有一个div，不能再有同级，不然会报错

render: function() {return (  <div className="slider-box" onMouseEnter={this.silderBoxEnter} onMouseLeave={this.silderBoxLeave}><SliderList data={this.state.data} nowZ={this.state.nowZ} nowIndex={this.state.nowIndex}/><div className="left" onClick={this.leftClick} style={{zIndex:this.state.nowZ+10}}></div>  <div className="right" onClick={this.rightClick} style={{zIndex:this.state.nowZ+10}}></div><SliderMenu dataLength={this.state.dataLength} nowZ={this.state.nowZ} nowIndex={this.state.nowIndex} navsOver={this.navsOver}/>  </div>);  }

2.像上面代码中，事件绑定都是首字母大写，这点我倒是挺意外，和html里不一样，不过更意外的是，我写错事件名字，控制台会给提示，告诉我，我可能要用的是哪个事件，在元素上添加样式的时候要用{{zIndex:1}}这样的方式，样式属性名称应该是和js都一样的，一个轮播图，我拆成了三个部件，一个主体，用来初始化数据和事件控制，一个轮播内容，一个轮播导航和左右的箭头；上班那部分代码中的navsOver我传过去的是个事件，api里并没有这种写法，但是我试了下可以，这样一来，我控制state更加方便；

//创建轮播内容var SliderList = React.createClass({  render: function() {var sliderNodes=[];var nowIndex=this.props.nowIndex;var nowZ=this.props.nowZ;$.each(this.props.data,function(i,e){sliderNodes.push(<li className={i==nowIndex?'select slider-'+i:'slider-'+i} style={{zIndex:i==nowIndex?nowZ:1}} key={i}><img src={e}/></li>);});return (  <ul className="slider-list">{sliderNodes}  </ul>);  }});

3，上面部分代码，手动拼接需要数组添加，我刚开始用+=的方式并不行，需要注意的是，自己组合className的方式，包括取值，这里遍历拼接需要方式key这个属性，作用目前我还没去仔细了解，事件触发的时候貌似对象也可以拿到这个key，作用应该和微信小程序中的wx:key是一样的，是个标识；

4.props和state，props的属性都是通过元素上传过去的属性，像第一段代码dataLength那样；因为没有了解源码，传过去的state的值应该是没有创建新对象的，像数据双向绑定那样对值有监测；如果state进行改变，子部件里render中的元素貌似也会更新，但是我通过控制台没有看到dom重新加载，像上面那样className里做的判断会判断；

api上也说有个方法可以设置是否重新render更新；应该我是没用；个人觉得不太习惯这种写法，把dom都写在js里，跟最早只使用jquery手动拼接json一样，不过这点我觉得，如果用来做PC端网站，比knockout和angular，还有vue好，逻辑不用写在页面上，让别人仿站也有点难度

，不过这点。。。。对于稍微厉害点的人都不算什么啦