摘要:調用通過注冊表調用到實例,透過的,調用到中的,最后通過,調用,根據參數相應模塊執行。京東的,多端解決方案是一套遵循語法規范的多端開發解決方案。
對于一項技術,我們不能停留在五分鐘狀態,特別喜歡一句話,用什么方式繪制UI界面一點不重要,重要的是底層的思維,解決問題和優化的思路。由于React的生態極為龐大,本文內容部分來自一些別人的匯總,至于原文只要還是能找到的,我都會貼上地址,謝謝前期貢獻的作者,如果有沒有被匯總到的,歡迎在下面補充。 生態圈: React官方推薦超大型項目使用的TypeScript
為什么要把TypeScript放在第一位,因為TypeScript在構建超大型應用時,多人協作可以極大的加快工作效率,特別是前后端交互特別多,業務情況特別復雜的狀況下(比如IM),它的優勢就凸顯出來了。但是在一些中小型項目中,優勢并不是那么的明顯。(比如做完項目跑路后期不迭代這種)
TypeScript并不是一個新語言,可以簡單的認為 TS= js + Type.它只是一個javascript的超集,目前更新速度也是非常快,
個人建議,在Node.js開發和React native以及大型React中使用TypeScript
在下載官方的react腳手架中,包含了一個第三方的ts創建腳手架的命令
在 Create React App 中使用 TypeScript
Create React App 內置了對 ·TypeScript` 的支持。
需要創建一個使用 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寫起來代碼量會多一些,但是對于參數類型,返回類型,一眼明了,擁有靜態類型檢查,如果有問題,在編寫代碼時候就可以知道。
補充一點,現在TS的生態已經足夠適應開發,像一般的webpack插件都有了typescript的文件支持,當然,并不是所有的第三包都支持ts.在技術選型的時候就要考慮清楚這點,否則就會多做很多事情。狀態統一集中管理,redux,mbox,redux-sage,dva等開源庫
先看看原始的react數據管理
組件間數據的傳遞,依靠props,狀態數據提升等完成,但是對于跨層級的組件間數據傳遞,就不那么友好了,尤其是大型項目后期的迭代維護
再說說被人吐槽,但是它的單向數據流思想不得不肯定的redux.
Redux
狀態及頁面邏輯從
使用 dispatch 往 store 發送 action 的這個過程是可以被攔截的, 自然而然地就可以在這里增加各種 Middleware, 實現各種自定義功能, eg: logging
這樣一來, 各個部分各司其職, 耦合度更低, 復用度更高, 擴展性更好
在面試的時候,我覺得如果可以手寫一個redux庫,并且說清楚單向數據流的思維,是一個加分項。
最終推薦使用dva,感謝前輩的開源,解放了我們
dva
正如 Dva 官網所言, 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,業務組件文件 import {connect} from "dva" class App extends Component { componentDidMount(){ //省掉了mapActionsToPops這一步 this.props.dispatch({ type:"user/open" }) } } export default connect( //相當于mapStateToState,可以通過this.props.user拿到數據 (({user} )=>{ user } ) )(App)
狀態管理的最佳實踐,應該說推薦dva,再次感謝前輩的開源。UI組件庫,由于本人平時都不使用UI庫了,所以可能會遺漏。
Ant-Design,pc版 ,制作后臺管理系統的神器,同樣要感謝前輩們的開源。
關鍵字,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
關鍵字,按需加載,默認樣式修改
使用 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";Ant Design Mobile RN of React
在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 (Electron,PC端跨平臺技術方案,集成Node,可以開發極為復雜的應用); } }
渲染進程和主進程采用remote模塊或者ipc通信方式進行通信,進而可以呼叫原生接口
完美解決mac os , windows,linux上的三端統一開發沒有兼容性問題的框架
Electron 結合了 Chromium、Node.js 和用于調用操作系統本地功能的 API(如打開文件窗口、通知、圖標等)
基于 Electron的開發就像在開發網頁,而且能夠無縫地 使用 Node。或者說:在構建一個 Node 應用的同時,通過 HTML 和 CSS 構建界面。另外,你只需為一個瀏覽器(最新的 Chrome)進行設計(即無需考慮兼容性等)
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 }); });
這是一個非常不錯,而且考驗一位前端工程師底層技術的框架,可能會寫到大量底層Node.js和原生javascript,目前開發IM項目很多使用這個框架。github上的star量也快80K了。react-native,移動端跨平臺框架
跨平臺開發首選Mac,沒有為什么
官方推薦的搭建原生完整環境方式
搭建完成后,執行react-native run-ios
command+d開啟熱更新
從react遷移到react-native成本并不高,難的是適配和踩坑,遇到問題要多百度,rn的生態也很強大,而且給我們封裝了很多內容,也可以使用一些原生的接口.
React-native的層次架構:
Java層:該層主要提供了Android的UI渲染器UIManager(將JavaScript映射成Android Widget)以及一些其他的功能組件(例如:Fresco、Okhttp)等,在java層均封裝為Module,java層核心jar包是react-native.jar,封裝了眾多上層的interface,如Module,Registry,bridge等。
C++層:主要處理Java與JavaScript的通信以及執行JavaScript代碼工作,該層封裝了JavaScriptCore,執行對js的解析。基于JavaScriptCore,Web開發者可以盡情使用ES6的新特性,如class、箭頭操作符等,而且 React Native運行在JavaScriptCore中的,完全不存在瀏覽器兼容的情況。Bridge橋接了java , js 通信的核心接口。JSLoader主要是將來自assets目錄的或本地file加載javascriptCore,再通過JSCExectutor解析js文件。
Js層:該層提供了各種供開發者使用的組件以及一些工具庫。
Component:Js層通js/jsx編寫的Virtual Dom來構建Component或Module,Virtual DOM是DOM在內存中的一種輕量級表達方式,可以通過不同的渲染引擎生成不同平臺下的UI。component的使用在 React 里極為重要, 因為component的存在讓計算 DOM diff 更高效。
ReactReconciler : 用于管理頂層組件或子組件的掛載、卸載、重繪。
注:JSCore,即JavaScriptCore,JS解析的核心部分,IOS使用的是內置的JavaScriptCore,Androis上使用的是 https://webkit.org 家的jsc.so。啟動過程的解析:
1.ReactInstanceManager創建時會配置應用所需的java模塊與js模塊,通過ReactRootView的startReactApplication啟動APP。
2.在創建ReactInstanceManager同時會創建用于加載JsBundle的JSBundlerLoader,并傳遞給CatalystInstance。
3.CatalystInstance會創建Java模塊注冊表及Javascript模塊注冊表,并遍歷實例化模塊。
4.CatalystInstance通過JSBundlerLoader向Node Server請求Js
Bundle,并傳遞給JSCJavaScriptExectutor,最后傳遞給javascriptCore,再通過ReactBridge通知ReactRootView完成渲染。
Js與Java通信機制
Java與Js之間的調用,是以兩邊存在兩邊存在同一份模塊配置表,最終均是將調用轉化為{moduleID,methodID,callbackID,args},處理端在模塊配置表里查找注冊的模塊與方法并調用。
Java 調用Js
Java通過注冊表調用到CatalystInstance實例,透過ReactBridge的jni,調用到Onload.cpp中的callFunction,最后通過javascriptCore,調用BatchedBridge.js,根據參數{moduleID,methodID}require相應Js模塊執行。流程如下圖:
Js 調用Java
如果消息隊列中有等待Java 處理的邏輯,而且 Java 超過 5ms 都沒有來取走,那么 JavaScript 就會主動調用 Java 的方法,在需要調用調Java模塊方法時,會把參數{moduleID,methodID}等數據存在MessageQueue中,等待Java的事件觸發,把MessageQueue中的{moduleID,methodID}返回給Java,再根據模塊注冊表找到相應模塊處理。流程如下圖:
參考文章,react-native原理解析,看在react-native跨平臺開發的無縫對接js和react份上,我決定堅定使用它。希望在1.0版本到來的時候,給我們一個驚喜。京東的Taro,多端解決方案
Taro 是一套遵循 React 語法規范的 多端開發 解決方案。現如今市面上端的形態多種多樣,Web、React-Native、微信小程序等各種端大行其道,當業務要求同時在不同的端都要求有所表現的時候,針對不同的端去編寫多套代碼的成本顯然非常高,這時候只編寫一套代碼就能夠適配到多端的能力就顯得極為需要。
使用 Taro,我們可以只書寫一套代碼,再通過 Taro 的編譯工具,將源代碼分別編譯出可以在不同端(微信/百度/支付寶/字節跳動小程序、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} ) })}
關鍵字,編譯成不同的平臺應用輸出
Taro擁有自己的腳手架 腳手架配置
為什么會加入Taro,因為它是國產,基于react,應該支持。而且相信未來它應該有不錯的前景。
環境搭建:
首先,你需要使用 npm 或者 yarn 全局安裝@tarojs/cli,或者直接使用npx:
$ yarn global add @tarojs/cli
使用命令創建模板項目 $ taro init myApp
選擇微信小程序模式,需要自行下載并打開微信開發者工具,然后選擇項目根目錄進行預覽。
微信小程序編譯預覽及打包(去掉 --watch 將不會監聽文件修改,并會對代碼進行壓縮打包)
# 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 模式,無需特定的開發者工具,在執行完下述命令之后即可通過瀏覽器進行預覽
# 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也擁有自己的生態圈,非常龐大,非常感謝京東的開源,希望它的功能越來越強大。最終總結:
React本身很強大,生態圈非常強大,可以說任何平臺的大型應用都可以讓它來做,加上hook的出現,未來可期。
用什么框架,什么技術繪制UI并不重要,但是本人覺得js和react的無縫對接下更偏向rn,taro,electron這類型的框架開發跨平臺應用。
后期會再出關于react的優化匯總,覺得寫得不錯的可以點個贊~謝謝
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54151.html
摘要:調用通過注冊表調用到實例,透過的,調用到中的,最后通過,調用,根據參數相應模塊執行。京東的,多端解決方案是一套遵循語法規范的多端開發解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對于一項技術,我們不能停留在五分鐘狀態,特別喜歡一句話,用什么方式繪制UI界面一點不重要,重要的是底層的思維,解決問題和優化...
摘要:調用通過注冊表調用到實例,透過的,調用到中的,最后通過,調用,根據參數相應模塊執行。京東的,多端解決方案是一套遵循語法規范的多端開發解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對于一項技術,我們不能停留在五分鐘狀態,特別喜歡一句話,用什么方式繪制UI界面一點不重要,重要的是底層的思維,解決問題和優化...
摘要:頁面調試騰訊開發維護的代碼調試發布,錯誤監控上報,用戶問題定位。同樣是由騰訊開發維護的代碼調試工具,是針對移動端的調試工具。前端業務代碼工具庫。動畫庫動畫庫,也是目前通用的動畫庫。 本人微信公眾號:前端修煉之路,歡迎關注 本篇文章整理自己使用過的和看到過的一些插件和工具,方便日后自己查找和使用。 另外,感謝白小明,文中很多的工具來源于此。 彈出框 layer:http://layer....
摘要:主要兼容的微信的瀏覽器,因為要在朋友圈來營銷,總體來說,會偏設計以及動畫些。 有一天,我們組內的一個小伙伴突然問我,你知道有一個叫重構工程師的崗位?這是干什么的?重構工程師 這個問題引發了我對前端領域發展的思考,所以我來梳理下前端領域的發展過程,順便小小的預測下2017年的趨勢。不想看回憶的,可以直接跳到后面看展望。 神說,要有光,就有了光 自1991年蒂姆·伯納斯-李公開提及HTML...
閱讀 3043·2021-11-25 09:43
閱讀 1624·2021-11-24 11:15
閱讀 2358·2021-11-22 15:25
閱讀 3500·2021-11-11 16:55
閱讀 3239·2021-11-04 16:10
閱讀 2772·2021-09-14 18:02
閱讀 1684·2021-09-10 10:50
閱讀 1070·2019-08-29 15:39