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，讓我們看清來龍去脈！