摘要:调用通过注册表调用到实例,透过的,调用到中的,最后通过,调用,根据参数相应模块执行。京东的,多端解决方案是一套遵循语法规范的多端开发解决方案。
对于一项技术,我们不能停留在五分钟状态,特别喜欢一句话,用什么方式绘制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的优化汇总,觉得写得不错的可以点个赞~谢谢
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/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...
阅读 2983·2021-11-25 09:43
阅读 1574·2021-11-24 11:15
阅读 2312·2021-11-22 15:25
阅读 3466·2021-11-11 16:55
阅读 3190·2021-11-04 16:10
阅读 2725·2021-09-14 18:02
阅读 1650·2021-09-10 10:50
阅读 1037·2019-08-29 15:39