react与框架整合

结合网络相关文档，记载react如何与线下框架整合，大神请绕道

gulp+require+backbone+react，借鉴github上demo梳理一下

大神github地址 https://github.com/phodal/backbone-react

1.页面结构

   与传统搭建无异,require加载入口文件

<script data-main="src/script/main" src="src/libs/require/require.2.1.11.js"></script>

2.js入口文件 main.js

配置项

paths: {   jquery: '../libs/jquery/dist/jquery',   underscore: '../libs/underscore/underscore',   backbone: '../libs/backbone/backbone',   text: '../libs/require/text',   react: '../libs/react/react',   models: 'models/all',   collections: 'collections/all',   views: 'views/all',   router: 'router',   components: '../components/all'},

backbone router启动

require(["backbone", "router"], function(Backbone, Router) {   new Router();   Backbone.history.start();});

3.router路由

define([   'backbone',   'views'   ],   function (Backbone, views) {      return Backbone.Router.extend({         routes: {            '': 'index'         },         index: function () {            var view = new views.index();         }      });   });

router主要对页面跳转进行控制，通过routes来调用view来渲染新的页面或者刷新局部view来更新数据

views:对所有view的封装，方便统一调用

4.views

define([   'src/script/views/index'   ],   function (index) {      return {         index: index      }   });

可以添加N个view,在上步，路由中通过views获取index，实质调用index.js,在index中有返回view对象

5.view

define([   'react',   'backbone',   'models',   'collections',   'components'   ],   function (React, Backbone, models, collections, components) {      var main = Backbone.View.extend({         tagName: 'div',         className: 'user-info',         render: function () {            this.$el.appendTo($(document.body));            React.render(new components.users({                  users: this.collection               }),               this.$el.get(0)            );            return this;         },         initialize: function () {            this.collection = new collections.users([               {id: 1, name: 'gaoyuan', avatar: 'src/images/elliot.jpg'},               {id: 2, name: 'wufang', avatar: 'src/images/stevie.jpg'}            ]);            this.render();         }      });      return main;   });

在这个view中，在创建视图的时候，构造器初始化函数 initialize中初始化数据，渲染view  =>  this.render()

之后才进入react正题，react也验证了其作为view层的用途

React.render()  //渲染dom,组件的挂载

看react是如何render的，render传参，第一个是组件的实例，第二个是dom节点

6.components

define([   'src/components/dest/users'   ],   function (users) {      return {         users: users      }   });

同理，组件库也是封装好的对象，我们可以创建任意的组件，然后封装在这个库里面，统一通过components调用

在上面的事例中，demo通过 compoents.users来获取users组件，并new了一个实例对象

7.component  => users

define([   'react'   ],   function (React) {      var UserItem = React.createFactory(         React.createClass({            clickHandler: function (event) {               alert(this.props.user.get('name'));            },            componentDidMount: function () {               var el = this.getDOMNode();               var $el = $(el);               this.setPopup(el);               $el.transition('fade in');               this.props.user.on('change', function() {                  this.forceUpdate();                  this.setPopup(el);               }.bind(this));            },            setPopup: function (el) {               $(el).popup({                  title: this.props.user.get('name'),                  content: '',                  position: 'top center'               });            },            render: function () {               return (                  React.createElement("img", {className: "ui small circular image", src: this.props.user.get('avatar')})               )            }         })      );      var ChangeDataButton = React.createFactory(         React.createClass({            clickHandler: function () {               this.props.users.add({                  id: 3,                  name: 'fantuan',                  avatar: '/img/jenny.jpg'               });            },            render: function () {               return (                  React.createElement("div", {className: "ui inverted orange button", onClick: this.clickHandler}, "Change User info")               )            }         })      );      var users = React.createFactory(         React.createClass({            componentDidMount: function () {               this.props.users.on('reset add remove', function () {                  this.forceUpdate();               }.bind(this));            },            render: function () {               var users = this.props.users.models.map(function (user) {                  return UserItem({                     user: user,                     key: user.get('id')                  });               });               var changeDataButton = ChangeDataButton({                  users: this.props.users               })               return (                  React.createElement("div", null,                      React.createElement("div", {className: "ui images"}, users),                      changeDataButton                  )               )            }         })      );      return users;   });

这里最主要的就是users工厂

在创建实例对象的时候，react调用render,通过传进来的参数props进行虚拟dom的创建，如事例中的React。createElement(),此方法返回一个虚拟的DOM节点（组件）

利用react的组件的生命周期方法可以处理各个时期的事件处理或监听

react的组件生命周期事件，参考react中文网

http://reactjs.cn/react/docs/component-specs.html

以上是根据demo梳理的一个react+require事例的讲解，感谢大神的DEMO，让我们看清来龙去脉！