CPU|Web前端:开始使用React.JS的10大理由

【CPU|Web前端:开始使用React.JS的10大理由】CPU|Web前端:开始使用React.JS的10大理由

React 是一个流行的框架 , 被大多数大型企业和小型独立开发人员用来以模块化方式创建具有复杂关系的视图 。 它提供了足够的结构以允许灵活性 , 同时也提供了足够的栏杆以避免在为Web创建应用程序时出现常见的陷阱 。为什么要使用这个框架?
1. React.JS 性能
React 如此受欢迎的原因之一是其受视频游戏启发的渲染系统 , 其系统的基础是通过批量更新、使用虚拟内存 DOM 计算差异和不可变状态来最小化 DOM 交互 。 需要注意的一点是 , 这种方法与当时其他 JavaScript 框架的其他趋势背道而驰 。然而 , 事实证明 , 脏检查双向数据绑定会产生指数级更多的计算 , 因为您将更多的元素添加到组合中而不是一种方式 。
2.React 易于采用
生命周期方法的简短列表使该框架成为最容易理解的框架之一 。事实上 , 在一天之内精通整个图书馆并非闻所未闻 , 这可以归因于每个视图的“总是重新渲染”性质以及它如何适应其视图的状态或属性更改 。
3.JSX
当React.JS最初被引入JavaScript世界时 , 将视图定义与控制逻辑紧密耦合的想法引起了争议 。 React 发布到一个范式中 , 传统MVC 框架的客户端副本(如在服务器端发现的那些)非常流行 。 MVC传统将HTML与控制器分开 , 控制器的职责是将多个视图组合起来并将数据编组到其中 。 从字面上看 , 这意味着这些“担忧”被分成了自己的文件 。
React的架构师采取了另一种方法 , 他们说HTML与JavaScript的分离是肤浅的 。 实际上 , 您的HTML和JS应用程序代码非常紧密耦合 , 将它们保存在各自的分离文件中更像是技术分离而不是关注点分离 。
想象一下 , 试图在一个大型jQuery 应用程序中更改HTML元素的类名或 id 标记 。 您必须验证没有任何DOM绑定被破坏 , 这表明两者之间存在密切关系 。
这就是JSX发挥作用的地方 。 通过将您的组件逻辑与它正在操作的视图放在同一个文件中 , 它使模块更容易推理 , 最好的部分是您可以利用vanilla JavaScript来表达您的视图 。

4. 对服务器端通信没有意见
React定义了你的视图 , 但为你提供了生命周期“钩子”来发出服务器端请求 , 这是一个优势 , 因为这意味着一旦您了解了XHR请求的生成方式 , 您就可以更轻松地更新用于生成这些请求的库 , 而不是BackBoneJS 。 这些钩子是 state、props、componentWillMount和componentDidMount 。
5.从一开始就构建同构
React有一个简洁的功能 , 它可以检测是否需要最初将DOM渲染到页面上 , 这意味着如果您在交付给客户端浏览器之前在服务器端代码中预编译视图 , React 将能够简单地引导其侦听器并从那里开始 。
React提供了从其语法轻松生成HTML的方法 , 这是为了获得SEO机器人的青睐 , 传统上它们不会在其爬虫中运行JavaScript(或至少将这些网站标记为比预生成的网站更糟糕) 。
6.跨平台支持
React的生态系统确实非常庞大 。 框架一直在移动的方式是将视图逻辑与“更纯”的业务规则分开 。 默认情况下 , 您采用此策略 。 这使您可以定位其他平台 , 例如移动、虚拟现实设备、电视体验 , 甚至生成电子邮件 。
7.React 为良好实践应用程序提供轻轨
选择React的原因是它的生命周期方法、状态和道具提供了足够的栏杆来创建可扩展的应用程序 , 需要XHR数据?使用组件WillMount 。 需要使用著名的jQuery库使特定组件看起来更漂亮吗?使用componentDidMount和 componentShouldUpdate或componentDidUpdate来停止DOM操作或在更改后轻松地重新设置元素的样式 。
关键是只有足够的栏杆对应于页面内的自然组件生命周期 , 对任何经验水平的开发人员都有很大的意义 , 但对于有“React”做事方式的地方来说还不够 , 它以这种方式非常通用 。