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，让我们看清来龙去脉！