Ped*_*sto 18 javascript angularjs reactjs react-native
我熟悉在AngularJS中开发客户端应用程序,但现在我想开始使用ReactJS.
我也关注ReactNative,我认为这将彻底改变移动应用程序.
什么是思考方式以及React应用程序的结构与Angular的区别？最大的区别是什么？
And*_*ahl 24
指令
如果你熟悉Angular,那么思考React如何工作的方法是想象使用Angular只使用指令.React没有控制器,服务,工厂或依赖注入的任何概念.如果只关注组件(Angular术语中的指令).
这也是Angular与Angular 2合作的方式.Angular 2引入了一个名为components的概念,并删除了指令,控制器和服务/工厂的概念.Angular 2仍然使用DI,但是你没有将你的类绑定到Angular世界(你在Angular 1中做过).
领域
因此Angular使用范围进行数据绑定,并且绑定到范围(或父范围)的任何模板都可以读取和打印该范围内的数据,甚至可以修改该范围.React中没有范围的概念,主要是因为React不像Angular那样进行脏检查,而且因为React使用常规的Javascript范围来确定视图可用的变量/对象.稍后会详细介绍.
模板
这是一个重要的区别.在Angular中,您可以将模板定义在不同的文件中,也可以定义为Javascript字符串.在React中,您可以在Javascript或JSX中定义视图.JSX是一种类似于XML/HTML的Javascript语言扩展,它允许您描述HTML(或本机视图,如React Native).
在JSX中,您可以将元素的属性值设置为类似于<div className="myClass">或使用Javascript表达式的字符串,如下所示:<div className={myClassVariable}>where myClassVariable是常规Javascript变量.JSX 之间{和之间的任何东西}都只是简单的旧Javascript.你可以传递一个对象,一个函数,一个字符串等.当你尝试在JSX中使用一个未定义的变量时,你的linter可以帮助你,这是你在Angular模板中使用属性时你的linter不能做的事情.
通过在JSX中定义您的视图而不是HTML字符串,您可以随时使用Javascript的全部功能.您不需要类似Angular范围的内容,因为您已经拥有一个Javascript范围,用于确定您在视图中可以使用的内容.这就是为什么擅长Angular只会让你擅长Angular,而擅长React也会让你成为更好的Javascript程序员.
数据绑定/变异/状态
Angular使用范围来定义应用程序状态.该范围可以从视图,控制器或指令变异.范围相互继承,因此如果您可以访问范围,还可以修改父范围.这是大型Angular应用程序往往难以管理的原因之一,因为应用程序的状态可以从很多地方改变.并且观察那些引发其他变化的变化使得它更难以掌握.
React使用了两个名为props和state的概念.把它们想象成常规的Javascript函数.State是函数中定义的变量,props是传递给函数的参数.
函数中定义的变量可以在该函数中更改,并且可以作为参数传递给其他函数.
但是传递给函数的参数永远不应该在接收它们的函数中改变.它们可以创建局部变量并将其值赋给参数值并更改该局部变量.但它永远不应该直接改变论点.
所以props是从父组件传递给组件的值.接收道具的组件不拥有它们,并且不知道它们来自何处,就像函数的参数一样.另一方面,状态由组件拥有,组件可以以任何方式更改它,就像局部变量一样.
React知道组件的状态和道具何时发生变化,因为setState当您想要更改组件的状态时必须显式调用.它知道道具何时更改,因为在父组件呈现时将道具传递给组件.
当状态改变时,React重新渲染组件(及其所有子组件).请注意,它仅将它们重新呈现为组件的虚拟表示.然后它对自上次渲染以来发生的变化执行差异,并且仅将实际更改应用于DOM.这基本上是React的秘诀.编程模型是每次发生某些事情时重新渲染所有内容,但只做最少量的工作.
我的控制器在哪里!？
就像我说的,React没有任何控制器的概念,它只关注组件.也就是说,当您使用React时,您仍然经常使用控制器/视图分离.您有处理数据获取和状态管理的组件(有时称为视图控制器),但渲染非常少.相反,你有一个单独的组件,它几乎不了解数据提取和很多关于渲染的知识.因此视图控制器组件知道如何获取数据,然后它将该数据传递给知道如何呈现它的组件.一个简单的例子是这样的:
var TodoItemsComponent = React.createClass({
getInitialState: function () {
return {
todoItems: null
}
},
componentDidMount: function () {
var self = this;
TodoStore.getAll().then(function (todoItems) {
self.setState({todoItems: todoItems});
});
TodoStore.onChange(function (todoItems) {
self.setState({todoItems: todoItems});
});
},
render: function () {
if (this.state.todoItems) {
return <TodoListComponent todoItems={this.state.todoItems} />;
} else {
return <Spinner />;
}
}
});
var TodoListComponent = React.createClass({
render: function () {
return (
<ul>
{this.props.todoItems.map(function (todo) {
return <li>{todo.text}</li>;
})}
</ul>
);
}
});
在这个例子中,有两个组件.一个只关注数据提取,一个只关注渲染.它们都是React组件,但它们的职责却截然不同.这是控制器和指令在Angular中的分离,但React并没有强迫你进入它.
数据绑定
Angular使用数据绑定来使视图与视图模型保持同步.React根本不使用数据绑定.您可以说Angular监视视图模型以进行更改并相应地更新DOM,而React监视从组件返回的JSX以进行更改,并相应地更新DOM.
关注点分离
很多人对React持怀疑态度,因为他们认为React没有以良好的方式区分问题.而JSX通常是该论点的目标.他们觉得在你的Javascript中加入标记会混淆对视图和行为的担忧.如果您习惯使用Angular,您可能不同意在标记中描述行为是一个坏主意(因为您也在Angular中执行此操作).一个经常被吹捧的反驳论点是,React"分离关注点而不是技术",因为视图(标记)及其行为不是单独的关注点,而是传统上独立的技术(HTML和Javascript).通过共同定位行为和标记,您可以获得以下好处:
事实证明这是一个文本墙,所以如果有什么我应该澄清或扩展,请告诉我.
| 归档时间： |
|
| 查看次数： |
1960 次 |
| 最近记录： |