如果您熟悉Angular,那么思考React的工作原理就是通过使用Angular仅使用指令来设想. React没有控制器,服务,工厂或依赖注入的任何概念.如果仅关注组件(Angular术语中的指令).

这也是Angular以Angular 2为首的方式.Angular 2引入了一个称为组件的概念,并删除了指令,控制器和服务/工厂的概念.角度2仍然使用DI,但是你并没有把你的课程与角色世界(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}>其中myClassVariable是一个常规的Javascript变量. JSX中的{和}之间的任何东西都是简单的旧的Javascript.您可以传递对象,函数,字符串等.当您尝试在JSX中使用未定义的变量时,您的linter可以帮助您,这是在角度模板中使用属性时,您的linter不能执行的操作.

通过在JSX中定义您的视图而不是HTML字符串,您可以充分利用Javascript.你不需要像Angular的范围,因为你已经有一个Javascript范围,它决定了你可以在你的视图中使用什么.这就是为什么擅长角色只会使你擅长于角色,而善于反应也使您成为更好的JavaScript程序员.

数据绑定/突变/状态

Angular使用范围来定义应用程序状态.该范围可以从视图,控制器或指令进行突变.范围相互继承,所以如果您访问范围,您还可以修改父范围.这是大型Angular应用程序倾向于难以管理的原因之一,因为应用程序的状态可以从很多地方改变.而观察那些触发其他变化的变化使得更难掌握.

React使用两个称为道具和状态的概念.想像他们像常规Javascript功能.状态是在函数中定义的变量,道具是传递给函数的参数.

函数中定义的变量可以在该函数中进行更改,它们可以作为参数传递给其他函数.

但传递给函数的参数在接收它们的函数中不应该被更改.他们可以创建一个局部变量并将其值分配给参数值并更改该局部变量.但是绝对不应该直接改变观点.

所以道具是从父组件传递给组件的值.接收道具的组件不拥有它们,并且不知道他们来自哪里,很像参数的功能.另一方面,状态由组件拥有,组件可以以任何方式改变它想要的局部变量.

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).通过协调行为和标记,您将获得很多好处：

>很容易看到你是否有未使用的变量或函数.使用Angular,您必须在模板中查找表达式,并搜索可访问该作用域的所有地方,以查看范围上是否存在未使用的变量或函数.
>一个组件被隔离到一个文件,你不必在Javascript文件和模板文件之间来回切换.
>行为的改变往往需要改变标记,反之亦然.所以将它保存在一个文件中可以更容易地看到需要哪些更改.

原来是一个文字墙,所以请让我知道,如果有什么我应该澄清或扩大.