React是一个用于构建用户界面(ui)的JavaScript库,于2013年3月由Facebook推出. 对于寻求低风险的开发者和高管来说,它正逐渐成为首选, interoperable, 和可重用的基础来构建他们的网络和移动应用程序.
除了Facebook本身, 使用React的知名公司数量庞大,而且每天都在增长, including Airbnb, Walmart, Zillow, Wolfram Alpha, WeWork, and many others .
也许你已经在考虑React了. 也许你正在计划一个新项目,想知道所有的宣传都是关于什么的. 或者你可能想要重新构建一个现有的应用程序,或者在一个大型应用程序中实现一些新功能.
不管用例是什么, 我们相信React和它周围的生态系统会很好地支持这个用例,并允许你在没有传统应用架构限制的情况下成长.
React编程概述
React允许开发人员以可组合的方式实现接口, 通过JSX语法的声明性方式. 例如,一个应用程序的结构可以这样实现:
AppHeader
, 称为“组件”,可能代表一个品牌的标志, 主要导航链接的列表, 认证状态, and a login widget. 你可以把每个组件想象成自己的“小程序”.”
In fact, React应用程序可以以这样一种方式构建,即大量特性可以作为模块在代码库之间共享, 或者作为独立应用程序实现的单个功能,然后可以包含在任何JavaScript应用程序或HTML页面中.
这种可组合性允许开发人员构建易于推理和维护的应用程序, 甚至允许非技术用户更多地了解应用程序的结构.
React在渲染应用程序方面也很快.e., 将React代码转换为HTML, CSS, 以及DOM中的JavaScript),并弄清楚哪些更新应该触发DOM更改 其独特的“差分”算法 . Essentially, 根据传递给各个组件的参数的变化,React知道应该呈现应用程序的哪些部分. In addition, 存在各种方便的生活方式方法,这些方法允许开发人员方便地连接到这个呈现序列的各个部分, 给开发者控制权(必要时),告诉React什么应该触发渲染,什么不应该触发渲染.
因为React占用空间小,并且不强制应用程序架构, 它可以(并且已经)与现有的框架和库一起使用. 由于各种原因,项目在相互竞争的框架中实现不同的部分是很常见的, 包括可用的开发人才的技能集和遗留技术的互操作性.
因为React简单的设计和简单的实现, 可以利用各种各样的体系结构, 以及一个令人难以置信的库生态系统,通过引入干净的数据管理模式来增强React的功能, network calls, internal event flow, and data structures.
事实上,Facebook定义了模式,例如 Flux ,但简单地描述了体系结构,并允许像 Redux and Alt 接管执行.
Facebook也维护着库,比如 Jest (for testing), Immutable (为了获得更好的JavaScript数据结构),以及 React Native (用于在移动环境中使用React代码). In choosing React, 您的组织将利用由世界上最成熟的软件开发组织之一维护的代码来满足自己的需求.
可以很好地协同工作的小型库更容易让人想起Linux方法,而不是单一的体系结构. React编程本身非常简单,它的基本用法可以在几天内学会.
即使开发人员没有立即使用最理想的体系结构和生态系统库, React工作几乎可以立即投入生产, 同时将遗留代码(如jQuery网络调用或现有的Angular或Backbone应用程序)与新的React组件结合起来.
这意味着随着时间的推移, 基于react的UI可以转变为一种架构,非常适合手头的独特业务需求, 而不是接受“方钉”, 许多单体框架提供的“圆孔”方法.
React也可以在原生移动代码库中使用React native, 添加了其他JavaScript库和框架无法触及的维度, 并且允许在不影响用户体验质量的情况下,在应用程序的web和移动版本之间重用代码.
现在您对React编程有了更多的了解,下面是 你准备好雇佣React开发人员的8个明显迹象 .
你正在开始一个新项目,并希望采用“最前沿”的最佳实践
当一个组织开始一个新项目时, 第一个问题通常是围绕哪些工具, frameworks, 和图书馆. 对于新的web应用程序,React是基础代码的明显选择.
Its flexibility, composability, and small footprint, 以及许多强大的库,例如 共享状态管理 , form handling 、网络通信; Bootstrap support, etc. 确保代码干净、可重用,同时保持组织的灵活性.
此外,经常与React配对的开发工具在各个方面都在挑战极限. React生态系统支持一些高级概念,比如 hot reloading and data store interaction 更多的交互式开发. It also features 交互式React开发工具 可以作为浏览器插件一起使用.
您有一个现有的项目,其中的内容更改(如更新报价)是通过手动DOM操作发生的
Just a few years ago, 许多开发人员正在构建直接与DOM交互的应用程序, i.e.,它们将直接使用浏览器API用新值更新UI元素.
想象一下股票报价机列表或其他实时数据提要, 想象一下需要控制添加元素, removing elements, 并从数百个数据源中更改单个元素. 这是一种很难维护的方法.
通过它的单向数据流, React极大地简化了这个过程,它允许UI更新基于组件链中的数据更改,通过自顶向下的数据流自动发生. JSX模板从其他数据结构(如普通JavaScript对象)接收值, an AJAX response, a Flux data store, etc.), 当这些值改变时, 组件知道它正在接收新属性,并适当地重新呈现. For example:
/*显示组件是如何声明的*/
/* StockTicker的示例实现*/
function (props) {
return
{props.symbol} {props.price}
}
这使得实现具有许多数据源的应用程序更加简单. 您只需要担心维护应用程序的内部内存, 而不是管理UI的呈现, 哪些被React方便地抽象掉了.
你想要将你的Web和移动应用程序整合到一个代码库中
我们越来越频繁地听到的一个用例是,公司希望在平台之间重用其UI结构和逻辑的大部分.
React Native提供了一种非常优雅的方式来实现这一点, 利用iOS和Android上包含的JavaScript运行时,允许在本地代码中实现组件.
,例如,可以直接在iOS代码库中使用.
开发人员仍然需要编写一些本地代码, but data management, UI structure, 以及许多其他东西在JavaScript运行时内执行, 允许跨平台的高度代码重用. 这意味着开发预算要走得更远,技能组合要更具杠杆性.
许多遗留的JavaScript框架, 特别是那些通过DOM插值实现双向数据绑定的, 对于包含许多频繁呈现元素的复杂接口来说,性能不够.
即使是jQuery和普通的JavaScript实现,如果过于频繁地改变DOM,也会经常遇到React不会遇到的性能障碍.
React can also be 从服务器呈现 , 这意味着艰苦的工作可以发生在您的服务器上,并交付给您的客户端,以便快速绘制到DOM.
您希望将遗留代码封装在更现代的体系结构中
对于许多组织来说,一个巨大的挑战是,当他们看到React和伴随的生态系统所呈现的清晰价值时, 他们不能证明抛弃运行良好的现有代码是合理的. 好消息是,React应用程序可以在使用另一个UI框架实现的应用程序中包装或呈现.
这样做的原因是React应用程序实例绑定到单个DOM元素. 这个DOM元素可以在另一个应用程序框架中,也可以包裹在另一个应用程序框架中. 我们经常看到React项目会封装Angular代码,反之亦然. 甚至还编写了一些库来简化这种特殊的互操作性.
当然,如果应用程序的开发具有概念上的一致性,这是理想的.e.,不要混合使用框架. 但是,迫切的业务需求和重写“可工作的代码”所需的时间使得这种情况成为一种太常见的需求.
你想让你的应用程序更容易自动测试
前面我们讨论了React的可组合性,以及它如何使React应用程序更容易结构化和推理. 这种可组合性提供的另一个优点是能够将系统组件隔离为可以单独测试的离散块.
大多数React组件只是基于自顶向下提供的属性列表进行呈现, 所以测试修改的效果 props
组件接收非常简单.
一些React组件还管理内部状态,这可以通过一个非常简单的API来控制. 这也很容易测试.
一个杰出的React测试套件库, such as Jest, 以及与现有测试工具的互操作性, such as Karma, Mocha, etc.,让React成为一个简单的选择.
React也可以在没有浏览器的情况下呈现——从服务器或在没有浏览器的情况下呈现React应用程序是很常见的——这进一步简化了测试.
你想跟上当前的趋势
事实是,React正在迅速获得进一步的牵引力,并巩固其作为领先JavaScript框架的地位.
因为它在开发人员中获得了更多的关注,并在组织中获得了更多的立足点, 每个组织至少涉足React将变得越来越重要, 熟练使用React开发应用程序并吸引React人才.
前端开发社区中一些最聪明的人正在构建通常用于构建的工具, support, 并在React架构中实现模式, 说你的组织应该考虑接触它们是轻描淡写的.
React和在最佳应用程序中常见的架构模式代表了web开发实践的发展,这是不容忽视的.
你非常关心长期的可维护性
如果你参与过很多软件开发项目, 您知道,确保您的应用程序在未来几年都能得到支持,这是保证您的工作具有前瞻性的最重要的部分之一.
虽然JavaScript的生态系统变化很快,但React仍然非常稳定. In fact, 尽管在2017年完全重写了React, Facebook设法保持了向后兼容性.
这种稳定性意味着当你的团队学习React时, 你可以放心,这些知识是可以转移的,并且会在未来的几年里一直存在. 事实上,Facebook自身的工程诚信就依赖于此. 甚至IBM也在博客中提到过 React的长期可维护性 .
除了向后兼容性和非常稳定的API, React比其他UI库更易于维护的主要原因之一是其令人难以置信的可组合性. 如前所述, React组件可以相互嵌入, 在原始HTML页面中呈现, 或者捆绑成独立的应用程序,有自己的引导过程. 这种灵活性可以确保随着项目的发展, 你将能够轻松地调整应用程序的React部分来满足你的需求.
React极端的可组合性会让你的代码库中完全重写之类的事情成为过去式, 因为保存好的部分和隔离坏的部分是非常容易的.
因为React组件经常是独立工作的, 雇人维护另一个开发人员的工作通常是很容易的, 在不造成系统问题的情况下做出改变. 可以安全地将React及其附带的生态系统称为应用程序开发中最容易维护的方法之一.
令人兴奋的选择和安全的选择
React社区在不断挑战现代软件工程的极限的同时,也在继续蓬勃发展. 发展仍在快速进行, and search volumes, job postings, 其他感兴趣的指标也没有显示出减少的迹象.
然而,它却保持着罕见的稳定性. 在软件行业刚刚起步的时候,企业软件界曾经有这样一种说法:“没有人会因为选择IBM而被解雇。.这就是React现在在软件世界中所享有的地位.
后记:你如何评价React开发者?
假设你已经看到了这些迹象,并决定雇佣一些人来进行React开发, 你应该如何为你的项目找到最好的呢?
虽然招聘React开发人员在很多方面与招聘其他职位的JavaScript开发人员相似这些JavaScript面试问题 在这种情况下,我们找到了一些可以帮助你找到最佳候选人的特征.
一个优秀的高级React开发人员应该拥有 扎实的javascript知识基础. 他们应该了解JavaScript语言本身的来龙去脉和怪癖. 他们应该有使用通用生态系统工具的经验, 比如构建工具和测试工具, 并且有使用多个JavaScript框架和将JavaScript应用程序部署到生产环境的经验.
但是除了普通的JavaScript工作所需要的,候选人还应该具备 有一些常见的React架构模式的经验. 他们应该能够讨论像Immutable这样的库的优点.js, 描述基于flux的架构中的数据流, 并了解一些基于事件的编程模型.
此外,你可能希望应聘者拥有 一些工作后端知识 , 因为许多应用程序开发项目通常需要API设计人员之间的紧密通信循环, 开发自动化团队, 前端团队.
最后,候选人当然应该有一个 扎实的React工作知识. 比如JSX语法, 组件生命周期方法, 高阶组件, 控制组件都应该成为第二天性. 这张面试问题清单 应该帮助你开始面试React开发人员的技术部分. Enjoy!