摘要：調(diào)用通過注冊表調(diào)用到實例，透過的，調(diào)用到中的，最后通過，調(diào)用，根據(jù)參數(shù)相應(yīng)模塊執(zhí)行。京東的，多端解決方案是一套遵循語法規(guī)范的多端開發(fā)解決方案。

對于一項技術(shù)，我們不能停留在五分鐘狀態(tài)，特別喜歡一句話，用什么方式繪制UI界面一點不重要，重要的是底層的思維，解決問題和優(yōu)化的思路。

為什么要把TypeScript放在第一位，因為TypeScript在構(gòu)建超大型應(yīng)用時，多人協(xié)作可以極大的加快工作效率，特別是前后端交互特別多，業(yè)務(wù)情況特別復(fù)雜的狀況下（比如IM），它的優(yōu)勢就凸顯出來了。但是在一些中小型項目中，優(yōu)勢并不是那么的明顯。（比如做完項目跑路后期不迭代這種）

TypeScript并不是一個新語言，可以簡單的認為 TS= js + Type.它只是一個javascript的超集，目前更新速度也是非常快，

個人建議，在Node.js開發(fā)和React native以及大型React中使用TypeScript

在下載官方的react腳手架中，包含了一個第三方的ts創(chuàng)建腳手架的命令

在 Create React App 中使用 TypeScript

Create React App 內(nèi)置了對 ·TypeScript` 的支持。

需要創(chuàng)建一個使用 TypeScript 的新項目，在終端運行：

npx create-react-app my-app --typescript

    interface IState {
        collapsed?: boolean,
    }
    
    interface IProps {
        props?: string | Function
    }
    constructor(props: IState) {
        super(props)
    }
    flag :number = 123
    componentDidMount() {
        const result = this.FunctionTest()
    }
    FunctionTest():Promise{
        return Promise.resolve(false)
    }

    

TypeScript寫起來代碼量會多一些，但是對于參數(shù)類型，返回類型，一眼明了，擁有靜態(tài)類型檢查，如果有問題，在編寫代碼時候就可以知道。

補充一點，現(xiàn)在TS的生態(tài)已經(jīng)足夠適應(yīng)開發(fā)，像一般的webpack插件都有了typescript的文件支持，當(dāng)然，并不是所有的第三包都支持ts.在技術(shù)選型的時候就要考慮清楚這點，否則就會多做很多事情。

先看看原始的react數(shù)據(jù)管理

組件間數(shù)據(jù)的傳遞，依靠props，狀態(tài)數(shù)據(jù)提升等完成，但是對于跨層級的組件間數(shù)據(jù)傳遞，就不那么友好了，尤其是大型項目后期的迭代維護

再說說被人吐槽，但是它的單向數(shù)據(jù)流思想不得不肯定的redux.

Redux

狀態(tài)及頁面邏輯從 里面抽取出來, 成為獨立的 store, 頁面邏輯就是 reducer

及都是 Pure Component, 通過 connect 方法可以很方便地給它倆加一層 wrapper 從而建立起與 store 的聯(lián)系: 可以通過 dispatch 向 store 注入 action, 促使 store 的狀態(tài)進行變化, 同時又訂閱了 store 的狀態(tài)變化, 一旦狀態(tài)有變, 被 connect 的組件也隨之刷新

使用 dispatch 往 store 發(fā)送 action 的這個過程是可以被攔截的, 自然而然地就可以在這里增加各種 Middleware, 實現(xiàn)各種自定義功能, eg: logging

這樣一來, 各個部分各司其職, 耦合度更低, 復(fù)用度更高, 擴展性更好

在面試的時候，我覺得如果可以手寫一個redux庫，并且說清楚單向數(shù)據(jù)流的思維，是一個加分項。

最終推薦使用dva，感謝前輩的開源，解放了我們

dva

正如 Dva 官網(wǎng)所言, Dva 是基于 React + Redux + Saga 的最佳實踐沉淀, 做了 3 件很重要的事情, 大大提升了編碼體驗

// 一個dva的模塊文件  user.js
export default {
  namespace: "userinfo",
  state: {
    width: "-100%",
    hasUserInfoActive: false,
    info: undefined,
  },
  reducers: {
    // 打開個人資料
    open(state) {
      return {
        ...state,
        width: "0%",
        hasUserInfoActive: true,
      };
    },
     
  },
  effects: {
    * init(res, { put, select }) {
      const { userinfo } = yield select();
      if (userinfo.info === undefined) {
        try {
          const list = yield DATABASE.Friend().getSelfInfo();
          // console.log(list);

          yield put({ type: "saveUserInfo", payload: list });
        } catch (e) {
          console.error(e);
        }
      }
    },
  },
};

// user.jsx，業(yè)務(wù)組件文件
import {connect} from "dva"

class App extends Component {
     componentDidMount(){
    //省掉了mapActionsToPops這一步
    this.props.dispatch({
        type:"user/open"
    })
    } 

}

export default  connect(
    //相當(dāng)于mapStateToState,可以通過this.props.user拿到數(shù)據(jù)
（（{user} ）=>{
    user
} ）
)(App)

狀態(tài)管理的最佳實踐，應(yīng)該說推薦dva，再次感謝前輩的開源。

Ant-Design,pc版 ，制作后臺管理系統(tǒng)的神器，同樣要感謝前輩們的開源。

關(guān)鍵字，webpack按需加載，配置默認樣式，

使用 babel-plugin-import（推薦）。

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css" // `style: true` 會加載 less 文件
    }]
  ]
}

然后只需從 antd 引入模塊即可，無需多帶帶引入樣式。等同于下面手動引入的方式。

// babel-plugin-import 會幫助你加載 JS 和 CSS
import { DatePicker } from "antd";

Ant-Degsin-mobile

關(guān)鍵字，按需加載，默認樣式修改

    使用 babel-plugin-import（推薦）。
// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { libraryName: "antd-mobile", style: "css" }]
     // `style: true` 會加載 less 文件
  ]
}
然后只需從 antd-mobile 引入模塊即可，無需多帶帶引入樣式。
// babel-plugin-import 會幫助你加載 JS 和 CSS
import { DatePicker } from "antd-mobile";

在react-native中使用Ant-Design

yarn add @ant-design/react-native

在babel配置中:

 "plugins": [
["import", { libraryName: "@ant-design/react-native" }]
]

在React-native組件中使用：

import React from "react";
import { View, Text, FlatList, SectionList, Alert } from "react-native";
import { Button, Flex } from "@ant-design/react-native";
export default class Apps extends React.Component {
  render() {
    return (
      
         {
            Alert.alert(12312312);
          }}
        >
          12345561
        
      
    );
  }
}

渲染進程和主進程采用remote模塊或者ipc通信方式進行通信，進而可以呼叫原生接口

完美解決mac os , windows,linux上的三端統(tǒng)一開發(fā)沒有兼容性問題的框架

Electron 結(jié)合了 Chromium、Node.js 和用于調(diào)用操作系統(tǒng)本地功能的 API（如打開文件窗口、通知、圖標(biāo)等）

基于 Electron的開發(fā)就像在開發(fā)網(wǎng)頁，而且能夠無縫地 使用 Node。或者說：在構(gòu)建一個 Node 應(yīng)用的同時，通過 HTML 和 CSS 構(gòu)建界面。另外，你只需為一個瀏覽器（最新的 Chrome）進行設(shè)計（即無需考慮兼容性等）

import React from "react";
import { HashRouter, Route, Switch } from "dva/router";
import { ipcRenderer, remote } from "electron";
ipcRenderer.removeAllListeners();
  ipcRenderer.on("loginSuccess", () => {
    ipcRenderer.send("reply", "loginSuccess");
    props.history.push("/login/loading");
    props.dispatch({ type: "globalstate/saveStatus", payload: 1 });
  });

這是一個非常不錯，而且考驗一位前端工程師底層技術(shù)的框架，可能會寫到大量底層Node.js和原生javascript,目前開發(fā)IM項目很多使用這個框架。github上的star量也快80K了。

跨平臺開發(fā)首選Mac，沒有為什么

官方推薦的搭建原生完整環(huán)境方式

搭建完成后，執(zhí)行react-native run-ios

command+d開啟熱更新

從react遷移到react-native成本并不高，難的是適配和踩坑，遇到問題要多百度，rn的生態(tài)也很強大，而且給我們封裝了很多內(nèi)容，也可以使用一些原生的接口.

React-native的層次架構(gòu)：

Java層：該層主要提供了Android的UI渲染器UIManager（將JavaScript映射成Android Widget）以及一些其他的功能組件（例如：Fresco、Okhttp）等，在java層均封裝為Module，java層核心jar包是react-native.jar，封裝了眾多上層的interface，如Module，Registry，bridge等。

C++層：主要處理Java與JavaScript的通信以及執(zhí)行JavaScript代碼工作，該層封裝了JavaScriptCore，執(zhí)行對js的解析。基于JavaScriptCore，Web開發(fā)者可以盡情使用ES6的新特性，如class、箭頭操作符等，而且 React Native運行在JavaScriptCore中的，完全不存在瀏覽器兼容的情況。Bridge橋接了java ， js 通信的核心接口。JSLoader主要是將來自assets目錄的或本地file加載javascriptCore，再通過JSCExectutor解析js文件。

Js層：該層提供了各種供開發(fā)者使用的組件以及一些工具庫。

Component：Js層通js/jsx編寫的Virtual Dom來構(gòu)建Component或Module，Virtual DOM是DOM在內(nèi)存中的一種輕量級表達方式，可以通過不同的渲染引擎生成不同平臺下的UI。component的使用在 React 里極為重要, 因為component的存在讓計算 DOM diff 更高效。

ReactReconciler : 用于管理頂層組件或子組件的掛載、卸載、重繪。

注：JSCore，即JavaScriptCore，JS解析的核心部分，IOS使用的是內(nèi)置的JavaScriptCore，Androis上使用的是 https://webkit.org 家的jsc.so。
啟動過程的解析：

1.ReactInstanceManager創(chuàng)建時會配置應(yīng)用所需的java模塊與js模塊，通過ReactRootView的startReactApplication啟動APP。

2.在創(chuàng)建ReactInstanceManager同時會創(chuàng)建用于加載JsBundle的JSBundlerLoader，并傳遞給CatalystInstance。

3.CatalystInstance會創(chuàng)建Java模塊注冊表及Javascript模塊注冊表，并遍歷實例化模塊。

4.CatalystInstance通過JSBundlerLoader向Node Server請求Js

Bundle，并傳遞給JSCJavaScriptExectutor，最后傳遞給javascriptCore，再通過ReactBridge通知ReactRootView完成渲染。

Js與Java通信機制

Java與Js之間的調(diào)用，是以兩邊存在兩邊存在同一份模塊配置表，最終均是將調(diào)用轉(zhuǎn)化為{moduleID,methodID，callbackID，args}，處理端在模塊配置表里查找注冊的模塊與方法并調(diào)用。

Java 調(diào)用Js

Java通過注冊表調(diào)用到CatalystInstance實例，透過ReactBridge的jni，調(diào)用到Onload.cpp中的callFunction，最后通過javascriptCore，調(diào)用BatchedBridge.js，根據(jù)參數(shù)｛moduleID,methodID｝require相應(yīng)Js模塊執(zhí)行。流程如下圖：

Js 調(diào)用Java

如果消息隊列中有等待Java 處理的邏輯，而且 Java 超過 5ms 都沒有來取走，那么 JavaScript 就會主動調(diào)用 Java 的方法,在需要調(diào)用調(diào)Java模塊方法時，會把參數(shù)｛moduleID,methodID｝等數(shù)據(jù)存在MessageQueue中，等待Java的事件觸發(fā)，把MessageQueue中的｛moduleID,methodID｝返回給Java，再根據(jù)模塊注冊表找到相應(yīng)模塊處理。流程如下圖：

參考文章，react-native原理解析,看在react-native跨平臺開發(fā)的無縫對接js和react份上，我決定堅定使用它。希望在1.0版本到來的時候，給我們一個驚喜。

Taro 是一套遵循 React 語法規(guī)范的 多端開發(fā) 解決方案。現(xiàn)如今市面上端的形態(tài)多種多樣，Web、React-Native、微信小程序等各種端大行其道，當(dāng)業(yè)務(wù)要求同時在不同的端都要求有所表現(xiàn)的時候，針對不同的端去編寫多套代碼的成本顯然非常高，這時候只編寫一套代碼就能夠適配到多端的能力就顯得極為需要。

使用 Taro，我們可以只書寫一套代碼，再通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信/百度/支付寶/字節(jié)跳動小程序、H5、React-Native 等）運行的代碼。

代碼示例:

import Taro, { Component } from "@tarojs/taro"
import { View, Button } from "@tarojs/components"

export default class Index extends Component {
  constructor () {
    super(...arguments)
    this.state = {
      title: "首頁",
      list: [1, 2, 3]
    }
  }

  componentWillMount () {}

  componentDidMount () {}

  componentWillUpdate (nextProps, nextState) {}

  componentDidUpdate (prevProps, prevState) {}

  shouldComponentUpdate (nextProps, nextState) {
    return true
  }

  add = (e) => {
    // dosth
  }

  render () {
    return (
      
        {this.state.title}
        
          {this.state.list.map(item => {
            return (
              {item}
            )
          })}
          添加
        
      
    )
  }
}

關(guān)鍵字，編譯成不同的平臺應(yīng)用輸出

Taro擁有自己的腳手架 腳手架配置

為什么會加入Taro,因為它是國產(chǎn)，基于react,應(yīng)該支持。而且相信未來它應(yīng)該有不錯的前景。

環(huán)境搭建：

首先，你需要使用 npm 或者 yarn 全局安裝@tarojs/cli，或者直接使用npx:

$ yarn global add @tarojs/cli

使用命令創(chuàng)建模板項目 $ taro init myApp

選擇微信小程序模式，需要自行下載并打開微信開發(fā)者工具，然后選擇項目根目錄進行預(yù)覽。

微信小程序編譯預(yù)覽及打包（去掉 --watch 將不會監(jiān)聽文件修改，并會對代碼進行壓縮打包）

    # yarn
    $ yarn dev:weapp
    $ yarn build:weapp
    # npm script
    $ npm run dev:weapp
    $ npm run build:weapp
    # 僅限全局安裝
    $ taro build --type weapp --watch
    $ taro build --type weapp
    # npx 用戶也可以使用
    $ npx taro build --type weapp --watch
    $ npx taro build --type weapp

H5 模式，無需特定的開發(fā)者工具，在執(zhí)行完下述命令之后即可通過瀏覽器進行預(yù)覽

    # yarn
    $ yarn dev:h5
    # npm script
    $ npm run dev:h5
    # 僅限全局安裝
    $ taro build --type h5 --watch
    # npx 用戶也可以使用
    $ npx taro build --type h5 --watch

React Native

    # yarn
    $ yarn dev:rn
    # npm script
    $ npm run dev:rn
    # 僅限全局安裝
    $ taro build --type rn --watch
    # npx 用戶也可以使用
    $ npx taro build --type rn --watch

Taro也擁有自己的生態(tài)圈，非常龐大，非常感謝京東的開源，希望它的功能越來越強大。

React本身很強大，生態(tài)圈非常強大，可以說任何平臺的大型應(yīng)用都可以讓它來做，加上hook的出現(xiàn)，未來可期。

用什么框架，什么技術(shù)繪制UI并不重要，但是本人覺得js和react的無縫對接下更偏向rn,taro，electron這類型的框架開發(fā)跨平臺應(yīng)用。

后期會再出關(guān)于react的優(yōu)化匯總，覺得寫得不錯的可以點個贊～謝謝