他们真的是对立的力量吗?
在某种意义上它们是,而在另一种意义上它们不是。人们肯定会在 Angular 指令中使用 React,但他们这样做主要是为了提高性能,而不是因为他们认为 React 很棒。而且,如果您只是为了获得更好的性能而研究 React,那么您真的错过了 React 的价值主张。
我会说他们是对立的力量,因为他们解决了同样的问题。尽管 React 只是 MVC 中的 V 并且 Angular 是一个“成熟的框架”的论点被广泛流传,但 Angular 和 React 非常具有可比性。
Angular 有控制器和指令(以及服务和工厂),而 React 只有组件。正因为如此,很容易将其解释为 Angular 是一个更完整的框架。但是让我们来剖析一下。
控制器
React 不包含任何称为控制器的东西,但在 React 世界中有一个概念称为“视图控制器”,它可以很好地映射到 Angular 控制器。 React “视图控制器”被定义为任何其他 React 组件,但它只进行最少的渲染。它关注的是数据/状态管理,然后将该状态向下传递给视图组件,然后再呈现该数据/状态。
一个简单的例子是:
var ViewComponent = React.createClass({
render() {
return (
<ul>
{this.props.items.map(item => <li>{item.text}</li>)}
</ul>
);
}
});
var ViewController = React.createClass({
getInitialState() {
return {
items: []
};
},
componentDidMount() {
SomeStore.getItems()
.then(items => this.setState({items: items}));
},
render() {
return <ViewComponent items={this.state.items} />;
}
});
所以这里的ViewComponent 关注渲染HTML 的细节,而ViewController 关注获取和管理它传递给ViewComponent 的数据。
指令
我认为没有人认为 Angular 指令的概念可以很好地映射到 React 视图组件。
服务和工厂
这是 Angular 中存在的东西,只是因为它具有依赖注入的概念,并且基本上唯一的论点是“Angular 是一个比 React 更完整的框架”。如果 Angulars 的 DI 方式非常适合 Javascript 之类的语言,并且 Javascript 真的需要类似的东西,因为它是如此动态,你可能会争论好几天,但我们不要这样做。
React 不像 Angular 那样创建自己的模块系统(我认为我们都同意 Angular 模块本身增加的价值很小),React 允许您使用任何您喜欢的模块系统。转译 ES6、CommonJS、AMD、普通旧全局变量等。社区对 ES6 和 CommonJS 达成了一致,这是一件好事(Angular 2 正朝着这个方向发展)。
因此,如果您喜欢 DI,那么与良好的模块系统一起实施是非常容易的。甚至还有一种非常有趣的方法,即 Pete Hunt 对 React 中的 DI 进行了全新的尝试:http://jsfiddle.net/cjL6h/
同时使用 react 和 angular 是个好主意吗?我可否?应该
我?
我只会在您打算转移到 React 的情况下才这样做。您的应用程序将更难理解和更复杂,因为您必须同时了解 Angular 和 React。也就是说,很多人似乎都在 Angular 中使用 React,所以这只是我的看法。
React 用于 UI,但 Angular 可以处理控制器和
视图...但是在处理视图时反应更好吗?我们能不能做得更好
通过仅将 Angular 降级给控制器的应用程序?
正如我之前所说,这是一种常见的误解。 Angular 和 React 解决了同样的问题,但方式不同。不将业务逻辑层绑定到 Angular 模块系统的一个好处是更容易迁移到其他东西。很多人将 Flux 架构与 React 一起使用,但 React 并没有特定于 Flux。您可以将 Flux 理念与任何框架一起使用。
我喜欢 angular 的一件事似乎不太真实
反应是角度真的让你有分离
担心,而 react 开始使这有点混乱。似乎
至少与角度方式相反。
我非常不同意这一点。我发现我的 React 应用程序比我的 Angular 应用程序具有更好的关注点分离(而且我经常使用 Angular)。您只需要了解 React 的思维方式,了解 Flux 的全部内容也是一个好主意。我并不是说你不能在 Angular 中编写出色的应用程序,只是我的经验是,使用 React 比使用 Angular 更容易“落入成功的深渊”。
Angular 有一个两步学习曲线。首先,您创建一个带有作用域的控制器,将一个数组添加到作用域并使用ng-repeat 将其打印出来,您会惊叹于它的简单性。您添加了一个指令,这有点难以掌握,但是您复制并粘贴它并且它可以工作。耶!然后随着你深入挖掘,你进入了学习曲线的第二步,你必须开始真正理解 Angular 的内部结构。您必须知道作用域通过原型继承相互继承以及由此产生的后果(在所有 ng-model 表达式中都需要一个点等)。指令控制器是怎么回事?它们是什么以及它们与常规控制器相比如何?什么是嵌入?有人告诉我,我需要在指令的编译步骤中执行这个和那个,那是什么?
使用 React,初始学习曲线有点陡峭。但是一旦你完成了它,就没有第二步了。学习 Flux 可以被认为是第二步,但学习 Flux 可以为您提供新知识,这些知识也可以延续到其他 Javascript 框架,而“Angular 指令中的编译步骤”却没有。
React 相对于 Angular 的另一大优势是它主要是 Javascript。 React 元素上的属性只是 Javascript 对象/函数,而不是像 Angular 属性中的魔法字符串。这也意味着您的常规 linter 可以告诉您回调属性表达式是否有错误。在 Angular 中,你必须运行代码来查看它是否有效。
而且由于 Javascript 已经具有块作用域,因此您无需担心在元素名称前加上使它们独一无二的东西。
我是说 Angular 毫无价值,你应该转向 React 吗?不,我不是。许多公司在 Angular 上投入了大量资金。但是如果你问我,如果你要构建一个可维护的应用程序,你真的必须知道 Angular 中有更多的怪癖和古怪之处。您还应该考虑 Angular 2 是一个完全重写的事实,它从 React 中获得了很多灵感(这很棒!)。