选 React 还是其它?

好久不写 优快云 博客了。几年了。

曾记得,写 优快云 博客最耗神儿的,是排版……

现在我主要写公众号去了,还是一样的名字,如下图,欢迎关注。可以微信扫码或者搜索“光宇广贞”。嘿嘿。想预览的话,百度“光宇广贞”连好几页尽请观看。这并非技术类公众号……当然,本来我也从来没把 优快云 博客当成技术类文库……

光宇广贞


说,是选 React 还是其它?

其它比如,Angular 及其衍生者 Vue 等。

说给管理者

现在很少有招 Angular 的了,至少在国内,前端框架选型的时候,几乎默认在 React 和 Vue 里面取舍,我说的是几乎。我也见过有两年内的初创公司上手 Angular 1.x 的……Angular 国内的市场想来远不如 React 和 Vue 的大。国外的另说。身处国内,我默认 Angular 已经被你淘汰掉了。

那么 React 和 Vue 你将如何取舍呢?你并不是开发者,或者并不是主要开发者,而是作为管理者,这种管理可能不仅仅是技术上的,也会有项目上的。你要保证你的团队能快速响应需求,能控制进度,更重要的,保证质量。

保证质量是一件极为可怕的事儿,迭代的版本多了,线上问题暴发的时候你就知道其威力无穷了。比如不知你是否见过写 React 的人在 render 里写 setState 的,以及在老式的 React 版本的 componentWillUpdate 里写异步阻塞的……关键是审代码的人也没觉得有何不妥……

当然了,你会觉得这太低级了。我们说个高级的,状态内循环和外循环搞得乱七八糟的,这还仅仅是在前端渲染循环内的,还没上设计模式实践……硬编码在组件内的微服务,比如远程数据访问……

而核心问题是,你所招聘来的人,大多数是数学不怎么样的,更不用提计算机理论,我在招聘面试的时候,问计算机专业的什么是“有限状态自动机”百有九十九的反应是——“没听说过”!也碰到过许多前端开发者和管理者坦言他们的数学是不好的……

无论是版本容量掌握、进度控制、质量管理,核心是你及你的团队对技术型掌握的深度。深度是需要素质配合的。鉴于国内市场情况,如果人力提供给你的生源很一般 ,以及财务给开的价格很一般 ,那么你基本上要把 React 排除在选项之外了——事实上你只有 Vue 可选。

选 React 不是说选 React,搞搞那几个生命周期函数,这是最为初等的。选它意味着你选了整个技术栈,React、Redux、Saga、Reselect……连同 css-module 及其 webpack 构建手段……包括设计模式,HOC、AOP,啊,对了,新版 React  已经内嵌了 AOP 的实践。这是一整套思想体系和工程组织的各部件的有机结合。React 的思想决定了它是一个体系的代表,只是这个体系的一部分。如果你的工程不需要 React 之外的东西的话,我相信你换通过 jQuery 操作 Dom 的手段去实践是完全可以的……

选 Vue 就容易多了。首先,它比较全面,它看起来就相当全面,一个文件里面可以把 template/html、style、js 写全了,似乎也相当有利于工程组织管理,也更“组件化(React:看来你的确对‘组件’这个概念有什么偏见)”。关键是,它简单。

Vue 看起来就简单。Vue 作为 Angular 的派生,继承了 Angular 的优点(和缺点),它允许你作为一个前端,把思维模式停留在传统前端,就是“操作 DOM”上,这让那些习惯 jQuery 套路的很容易地迁移到 Vue 上,一样是操作 DOM 的玩法,而且更好玩儿了。在 Vue 里,你根本就不需要像 React 去管理渲染,当然你是想管也管不了渲染,你只用管怎么折腾 DOM 模板。这是纯粹彻底的前端式思维,是个人就会。

Vue 提供给开发者的选项是那么地少,也就意味着开发者不用考虑那么多,用就是了,反正你也只能这么写。比如聊胜于无的 computed,对,computed,只要你会用 computed 你就是 Vue 高级开发;以及作为最后手段的 watch,对,watch,别忘了你用 Vue 根本就控制不了渲染,因此一切无法通过操作 DOM 处理的都扔 watch 里就是了。如是,这很省心,大家都省心。

如果面试的时候考查一下 VueX,会用的话就是 Vue 顶级开发了。毕竟 Vue 的作者对于 Flux 的态度是很矛盾的。他反对 Redux,因此把 Flux 给 Vue  化,从而改造成了 VueX。Vue 的作者认为 VueX 才是“前端最好”的 Flux 实践。

数学的好坏与对 Vue 的理解关系不大,这不像对 React 体系影响那么大,不是计算机专业出身,没学过计算机理论知识完全没关系。招聘市场变得极为广大。当然,人力价格也可以很“合理”。

省心、省事、省钱。对于管理者来说,Vue 是最佳选择。至少在绝大多数情况下是。

说给应聘者

首先,你得知道,Vue 和 Angular 的区别是什么。

Vue 和 Angular 最大的区别就是,Vue 没有 Service。不过,Vue 虽然没有 Service,但 Vue 可以配置 Service,因此有 Vue.use 这么一个接口。

Vue 本身就是 Directive/Component。因此,Vue 就是个“轻型 Angular”。

所以你学什么 Vue,你学 Angular 就是了。

如果你没有 OOP 经验,你要学 Angular。然后 Vue 就跟玩儿一样。

让你学 Angular 不是让你去应聘 Angular 的岗位。作为实践手段,Angular 已经过时了,但是作为工程思想,它很有深度。就好像 C++ 一样。你必须学,最好学会。

那 React 呢?未来是 React 的。

但不是现在,现在的你先用 Vue 吃饭就是了。

当然,不甘只吃口饭的仁人志士,需要搞 React 全家桶。

首先,你数学要好。起码,这种描述你一听就懂:给定初始值集合和演进算子,即是完备的生命周期。你编码要做的就是驱动整个生命周期演进。

你得知道些计算机理论知识,起码“有限状态自动机”的概念要有。然后 Flux/Redux 你就好理解了。

你得具备软件工程知识,明白解耦合的设计理念,要了解微服务、CQRS、DDD、AOP,然后理解并习惯 HOC。注意单继承关系。然后,要用。

等等……你这说的是 Javascript?怎么听起来像 Java……没 script 的样子……

Java 只是在这些地方做得比较好,之所以好也是得益于 Java 框架生态,其它语言框架生态都在迎头追赶,而 Javascipt 方面只有 React 生态有这种素质可以实践和前进。

Redux 是天然可 Saga 化的,Redux 可以是 EDA,因此有 redux-saga 这么个东西。而 Vue 作者直接打掉了 VueX Saga 化的素质。当然,Vue 的作者可以再搞一个 Vue 版的 Sage,比如 VueSaga。但这已经让 Vue 够呛了。你该怎么兼容 Event Sourcing 呢?你不透明。

或者说 Vue 不认为这是前端该考虑的东西。

但这是你该考虑的东西。

Angular、Vue 的出现代表了什么?代表了前端工程化方向的发展,而既然你已经开始往这个方向走了,这个方向的前景是不设限的。工程化的发展必然向着体系融合的方向走,前后端将会融合,从思想体系到工程体系。试想容器化前端的未来?到时候可能 React 和 Vue 都已经落后不适用了,但至少,现在的你需要清楚,怎么样的思想实践,是有利于你迁移到这个未来的。

可能那个未来并不在眼前。但眼前也有值得你考虑的地方——那个更有利于你从前端转向服务端,向体系结构走,向着更有钱途和地位的方向发展~

总结

Vue 最实惠,React 有前途。

结合自身。

请关注我公众号。

光宇广贞

<think>好的,我现在需要帮助用户解决在React Native项目中设置和配置ESLint的问题。首先,我应该回忆一下ESLint在React Native中的基本配置步骤。 用户提到的引用中有一些关于React Native项目初始化和配置的内容,比如使用react-native init命令创建项目[^1][^4]。这可能和项目结构有关,配置ESLint通常是在项目根目录下进行的。 首先,安装ESLint和相关插件是必要的步骤。通常需要安装eslint、eslint-plugin-react、eslint-plugin-react-native以及可能用到的其他插件,比如TypeScript支持或者Prettier集成。需要检查用户是否需要特定的配置,比如使用Airbnb的规则还是其他风格指南。引用中的内容没有直接提到ESLint,但提到了添加polyfill和配置其他库的步骤[^2][^3],这可能与配置文件的设置类似。 接下来,生成ESLint配置文件。使用npx eslint --init命令可以引导用户完成配置过程。这里需要考虑React Native的环境,可能需要择正确的项,比如模块类型(可能CommonJS或ES模块)、框架React等。用户可能需要手动调整生成的.eslintrc文件,特别是React Native特有的规则,比如react-native/no-inline-styles,避免在样式中直接写对象。 然后,添加自定义规则。用户可能需要根据团队规范调整规则,比如关闭或开启某些特定的检查。比如,禁用no-unused-vars或者在测试文件中允许某些语法。引用中提到的配置其他库的步骤可能需要类似的配置文件调整,比如修改.eslintrc.json中的rules部分。 配置忽略文件.eslintignore也是重要的一步,需要排除node_modules、构建输出目录等。比如用户可能在引用[4]中的项目结构里生成了android和ios目录,这些可能需要忽略。 最后,集成到开发环境,比如IDE的ESLint插件,或者在package.json中添加lint脚本,方便运行检查。可能还需要配置Husky和lint-staged,在提交前自动运行lint,这可以提升代码质量。用户可能需要类似引用[2]中提到的工具链配置,比如使用polyfill时的额外步骤。 现在需要确保这些步骤覆盖了用户的需求,并且没有遗漏。比如,是否需要TypeScript支持?如果用户使用TypeScript,可能需要额外安装@typescript-eslint插件。另外,是否要集成Prettier来处理代码格式化?这可能涉及到eslint-config-prettier和eslint-plugin-prettier的安装和配置。 可能还需要注意React Native的特定规则,比如react-native/split-platform-components,或者处理特定于移动端的问题。用户可能在引用[3]提到的官方文档中有手动集成库的步骤,类似地,ESLint的配置可能需要一些手动调整。 总结步骤应该是:安装依赖、生成配置文件、调整规则、配置忽略文件、集成到工作流。需要将这些步骤详细说明,并确保语法正确,比如正确的npm命令和配置文件示例。同时,根据用户的引用,可能需要引用相关资源,比如官方文档或社区推荐的配置。</think>### 如何在React Native项目中设置和配置ESLint #### **1. 安装ESLint及相关依赖** 首先在项目根目录下通过npm或yarn安装ESLint核心包及React Native相关插件: ```bash npm install eslint eslint-plugin-react eslint-plugin-react-native --save-dev ``` 若使用TypeScript,还需安装: ```bash npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev ``` #### **2. 初始化ESLint配置** 运行以下命令生成配置文件(`.eslintrc.json`): ```bash npx eslint --init ``` 按提示择配置: - **检查语法和代码问题** - **模块类型**:JavaScript modules (import/export) - **框架**:React - **是否使用TypeScript**:根据项目择 - **代码运行环境**:Browser(React Native组件类似Web环境) - **配置文件格式**:JSON #### **3. 调整配置文件** 生成的`.eslintrc.json`需手动补充React Native规则: ```json { "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:react-native/all" ], "plugins": ["react", "react-native"], "parserOptions": { "ecmaVersion": 2021, "sourceType": "module", "ecmaFeatures": { "jsx": true } }, "env": { "browser": true, "es6": true }, "rules": { "react-native/no-inline-styles": "warn", // 避免行内样式 "react/prop-types": "off" // 若使用TypeScript可关闭 } } ``` #### **4. 配置忽略文件** 创建`.eslintignore`文件,排除无需检查的目录: ``` node_modules/ android/ ios/ dist/ ``` #### **5. 集成到开发环境** - **IDE插件**:VSCode安装ESLint插件,保存时自动修复。 - **脚本命令**:在`package.json`中添加: ```json "scripts": { "lint": "eslint .", "lint:fix": "eslint . --fix" } ``` #### **6. 扩展配置(可)** - **Prettier集成**:安装`eslint-config-prettier`并扩展配置以避免规则冲突: ```bash npm install prettier eslint-config-prettier --save-dev ``` 修改`.eslintrc.json`: ```json { "extends": [ ..., "prettier" ] } ``` --- ### **常见问题** - **错误“React未定义”**:在`env`中添加`"react-native/react-native": true`。 - **性能优化**:通过`.eslintcache`缓存检查结果加速执行。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值