基於react + redux的Bone框架

coro發表於2019-03-03
ReactRedux框架

Bone的使用很簡單，上手也很快。如果你想用react搭建一個專案，不妨跟著我試試使用Bone。

Bone特性概述

  • 整合了路由（基於 history.js + react-router），並支援前進、後退狀態快取
  • 使 Component 支援繫結 Model，實現了邏輯與元件分離
  • 提供了靈活的擴充套件機制（ store 可動態修改 reducer 和 middleware ）
  • 針對常見開發場景的功能抽象（如 Layout、SSR 等)

安裝

  1. 首先需要安裝node.js,並且版本要在8.9 LTS 以上

  2. 安裝bnpm包管理工具

    bnpm 是Bone應用開發方案的包管理工具，用來安裝工具和模組，執行：



        npm install -g bnpm --registry=https://npm.aliplus.com/api
複製程式碼


    

  1. 登入bnpm，執行
    2. 





        bnpm login
複製程式碼


訪問 https://bone.aliyun.com/profile ，使用頁面上的使用者名稱密碼在命令列上登入


    

  1. 

    最後安裝bone-cli 工具
    

    bone-cli 是 Bone 提供的本地命令列工具，用來完成專案建立、本地開發和專案打包等功能。執行
    

         bnpm install -g @bone/bone-cli
複製程式碼
    

    2. 



OK，這樣Bone就安裝成功了。


建立一個專案


現在我們可以用Bone建立一個專案了，輸入


        mkdir 專案名
        cd 專案名
        bone init
複製程式碼


我們可以快速建立一個專案，bone start啟動這個專案。專案建立成功後，你會看到3個主要的檔案分別是app.js，index.html，index.js。app.js可以認為是一個配置路由的地方，index.html就是頁面了，而index.js是提供頁面元件的檔案。通過index.js匯出一個元件，然後由app.js引入，通過路由顯示出來。


Bone擴充套件了React.Component 的功能,你可以在Component中的生命週期函式和方法中通過this訪問以下屬性。


    

  • 

    navigation
    

    提供路由導航功能。通過this.navigation.push(path,[state])可以跳轉到新的路徑並且傳遞引數。
    

    • 

  • 

    location
    

    當前的路由資訊，通過this.location.pathname可以得到當前路徑名。this.location.state可以獲取navigation傳遞過來的引數。
    

    • 

  • 

    layout
    

    指向當前頁的 Layout 例項。通過layout，我們可以實現一些公共元件例如header,footer的重複使用。只需要在app.js中配置layout，這樣每個頁面都能使用它了。舉個例子我們有一個導航欄元件叫 MyLayout，你只需在app.js中配置
    

      export default createApp({
      appName: "test",
      layout: MyLayout,
      router: {
          routes: [{
          }],
          notFound: NotFound
      }
  })
複製程式碼
    

    • 



這樣你所有的頁面都會有這個導航欄了。


    

  • 

    Model
    

    在這裡著重介紹的是Component 的Model屬性，前面Bone的特性中也提到了Model的作用：實現了邏輯與元件的分離。每個元件都可以繫結一個Model，元件可以通過 this.props.xxx 訪問 Model 的 state，通過this.actions.xxx 呼叫 Model 的 action。在下面的例子中，你可以看到Model是如何讓邏輯與元件分離的。
    

    首先我們先看一個未分離的例子
    

          class Demo extends Component {
          constructor(props) {
              super(props);
              this.state = {
                  number : 0
              };
          }
          add= ()=> {
              this.setState({ number: this.state.number+ 1});
          }
          render(){
              return <div className={ style.container }>
                  <h1 className={ style.title }>{this.state.number}</h1>
                  <Button type="normal" onClick={ this.add }>新增</Button>
              </div>
          }
      }
複製程式碼
    

    • 



很好理解，就是每次點選一次新增按鈕，頁面上的數字就加1。這個元件邏輯和元件是未分離的。下面再看分離後是什麼樣子


        //元件 demo.js
        //引入Model
        import DemoModel from "./demoModel"
        
        class Demo extends Component {
            static Model = DemoModel;
            render(){
                return <div className={ style.container }>
                    <h1 className={ style.title }>{this.props.number}</h1>
                    <Button type="normal" onClick={ this.actions.add }>新增</Button>
                </div>
            }
        }
        
        //Model demoModel.js
        
        export default class DemoModel extends Model {
            // 初始狀態
            static initialState = {
                number : 0
            }
            add() {
                return { number: this.state.number+ 1 }
            }
        }
複製程式碼


分離後元件和邏輯分別寫在2個檔案中，元件通過 this.props.number 訪問 Model 的state，通過this.actions.add 呼叫 Model 的 add方法。因為這個例子非常簡單，還看不出分離邏輯和元件的好處，但是當你的專案非常複雜的時候，分離的好處就可以提現出來了。


其實Bone框架的好處還有很多，它提供了一套很方便全面的UI庫。我用Bone寫了一個很簡單的demo，上面的程式碼demo中也有，有興趣的同學可以下載執行一下看看。附上下載地址 github.com/leslie233/B…






相關文章