前端框架react研究

摘要：

     最近公司要作一个嵌套在app中的应用，考虑着用Facebook的react来开发view，因此就研究了下。下面是我在开发中遇到的坑，但愿能给你帮助。

项目地址：https://github.com/baixuexiyang/react

Issue：https://github.com/baixuexiyang/react/issues

欢迎star和fork！

react优点：

• 仅仅只要表达出你的应用程序在任一个时间点应该长的样子，而后当底层的数据变了，React 会自动处理全部用户界面的更新。
• 数据变化后，React 概念上与点击“刷新”按钮相似，但仅会更新变化的部分。
• React 都是关于构建可复用的组件，使代码复用、测试和关注分离（separation of concerns）更加简单。

注意点：

1. 加载组件的首字母大写，好比：<HeaderComponent />
   
2. 每个组件的render最外层都要有一个包裹元素
   
   
3. this.props不能修改，this.state能够修改
   
   
4. 页面oclick事件在ios中的Safari不起效果，onClick={this.detail.bind(this, item)} 须要使用其余方式，好比jQuery的绑定事件
   
   
5. string转换成html，dangerouslySetInnerHTML={{__html: ''}}
   
   
6. getInitialState：在组件挂载以前调用一次。返回值将会做为 this.state 的初始值。
   getDefaultProps：在组件类建立的时候调用一次，而后返回值被缓存下来。若是父组件没有指定 props 中的某个键，则此处返回的对象中的相应属性将会合并到 this.props （使用 in 检测属性）。

   该方法在任何实例建立以前调用，所以不能依赖于 this.props。另外，getDefaultProps() 返回的任何复杂对象将会在实例间共享，而不是每一个实例拥有一份拷贝。

组件的生命周期：

　　componentWillMount：

　　　　服务器端和客户端都只调用一次，在初始化渲染执行以前马上调用。
　　componentDidMount：

　　　　在初始化渲染执行以后马上调用一次，仅客户端有效（服务器端不会调用）。
　　componentWillReceiveProps：

　　　　在组件接收到新的 props 的时候调用。在初始化渲染的时候，该方法不会调用。
　　shouldComponentUpdate：

　　　　在接收到新的 props 或者 state，将要渲染以前调用。该方法在初始化渲染的时候不会调用，在使用 forceUpdate 方法的时候也不会。

若是肯定新的 props 和 state 不会致使组件更新，则此处应该 返回 false。
　　componentWillUpdate：

　　　　在接收到新的 props 或者 state 以前马上调用。在初始化渲染的时候该方法不会被调用。
　　componentDidUpdate：

　　　　在组件的更新已经同步到 DOM 中以后马上被调用。该方法不会在初始化渲染的时候调用。

　　componentWillUnmount：

　　　　在组件从 DOM 中移除的时候马上被调用。

 

 

小结：

　　使用react开发，全部html都写在js文件里，因此开发起来不是很顺畅。推荐一个chrome插件：React Developer Tools