"Мышление в реактиве", если у меня есть фон AngularJS?

Ответ 1

директивы

Если вы знакомы с Angular, то способ думать о том, как работает React, заключается в том, что вы используете Angular, используя только директивы. Реакт не имеет понятия о контроллерах, услугах, фабриках или инъекциях зависимостей. Если фокусируется только на компонентах (директивы в терминах Angular).

Это также способ, которым Angular возглавляет с Angular 2. Angular 2 представляет концепцию, называемую компонентами, и удаляет понятие директив, контроллеров и сервисов/фабрик. Angular 2 все еще использует DI, но вы не связываете свои классы с миром Angular (который вы делаете в Angular 1).

Прицелы

Итак, Angular использует области привязки для привязки данных, и любой шаблон, связанный с областью (или родительской областью), может считывать и распечатывать данные из этой области и даже изменять эту область. В Реактике нет понятия области действия, главным образом потому, что 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. Вы можете передать объект, функцию, строку и т.д. И ваш linter может помочь вам, когда вы пытаетесь использовать переменную undefined в JSX, что не может сделать ваш linter при использовании атрибутов в Angular шаблоны.

Определив свои представления в JSX вместо строк HTML, вы в полной мере используете Javascript. Вам не нужно что-то вроде области Angular, потому что у вас уже есть область Javascript, которая определяет, что вы можете использовать в своем представлении. Именно по этой причине получение хорошего результата в Angular делает вас хорошими в Angular, тогда как получение хорошего результата в React также делает вас лучшим программистом Javascript.

Связывание данных/мутация/состояние

Angular использует области действия для определения состояния приложения. Эта область может быть изменена либо с точки зрения, либо с контроллера, либо с директивы. Scopes наследуют друг от друга, поэтому, если вы получаете доступ к области видимости, вы также можете изменить родительскую область. Это одна из причин, по которой большие приложения Angular имеют трудности с управлением, потому что состояние приложения может быть изменено со многих мест. И часы на тех изменениях, которые запускают другие изменения, еще труднее понять.

React использует две концепции, называемые реквизитами и состоянием. Думайте о них, как о регулярных функциях Javascript. Состояние - это переменные, определенные в функции, а реквизиты - это аргументы, передаваемые функциям.

Переменные, определенные в функции, могут быть изменены в этой функции, и они могут быть переданы другим функциям в качестве аргументов.

Но аргументы, переданные функции, никогда не должны изменяться в функции, которая их получила. Они могут создавать локальную переменную и присваивать ее значение аргументу и изменять эту локальную переменную. Но он никогда не должен изменять аргумент напрямую.

Таким образом, реквизиты - это значения, переданные компоненту из родительского компонента. Компонент, получающий реквизит, не владеет ими и не знает, откуда они пришли, подобно аргументам функции. С другой стороны, государство принадлежит компоненту, и компонент может изменить его так, как он хочет, как локальные переменные.

React знает, когда состояние и реквизит компонента изменяются, так как вы должны явно называть setState, когда хотите изменить состояние компонента. Он знает, когда реквизит изменяется, потому что вы передаете реквизиты компоненту при рендеринге родительского компонента.

Когда состояние изменено, React повторно отображает компонент (и все его дочерние компоненты). Обратите внимание, что он только повторно отображает их в виртуальном представлении компонентов. Затем он выполняет проверку того, что изменилось с момента последнего рендера, и только фактические изменения применяются к DOM. Это по сути секретный соус Реакта. Модель программирования состоит в том, чтобы каждый раз перерисовывать все, что-то происходит, но выполнялось только минимальное количество работы.

Где мои контроллеры!?

Как я уже сказал, 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.

Разделение проблем

Многие люди скептически относятся к Реакту, потому что они считают, что Реакт не создает особых проблем. И JSX часто является объектом этого аргумента. Они чувствуют, что добавление разметки в ваш Javascript вызывает обеспокоенность в отношении представления и поведения. Если вы использовали Angular, вы, вероятно, не согласны с тем, что описание поведения в вашей разметке - плохая идея (так как вы это делаете и в Angular). Часто аргументированный аргумент счетчика заключается в том, что React "разделяет проблемы, а не технологии" тем, что представление (разметка) и его поведение не являются отдельными проблемами, а просто традиционно отдельными технологиями (HTML и Javascript). Сопоставляя поведение и разметку, вы получаете немало преимуществ:

• Легко видеть, есть ли неиспользованные переменные или функции. С помощью Angular вам нужно посмотреть в шаблоне выражения и выследить все места, которые имеют доступ к этой области, чтобы увидеть, есть ли переменные или функции в области, которая не используется.
• Компонент становится изолированным от одного файла, и вам не нужно переключаться между файлом Javascript и файлом шаблона.
• Изменение поведения часто требует изменения разметки и наоборот. Поэтому его хранение внутри одного файла упрощает просмотр изменений.

Это оказалось стенкой текста, поэтому, пожалуйста, дайте мне знать, есть ли что-то, что я должен уточнить или расширить.

Ответ 2

ReactJS - это все (многоразовые) компоненты, которые лучше всего можно сравнить с Angular директивами.

Итак, я бы сказал, представьте себе создание приложения в AngularJS с только директивами:)

Я начал развиваться в ReactJS несколько недель назад, и сначала было странно (писать код шаблона в JS, wtf?), но теперь я к этому привык. Недавно я начал играть с React-Native, и это потрясающе!

Я мог бы перечислить множество различий между Angular и React здесь, но есть еще некоторые интересные статьи, написанные другими на этом, поэтому я рекомендую вам прочитать их, чтобы получить более четкую идею.

• React.js и как он вписывается во все остальное?

• AngularJS vs ReactJS для крупных веб-приложений

• Приступая к действию от Angular

• От Angular, чтобы отреагировать @Reddit

а затем есть awesome-react, компиляция реагирующих библиотек, ресурсов, учебников, статей (вы называете это, там)

В связи с вашим вопросом этот раздел, вероятно, наиболее интересен для вас:

Другие статьи о подходе ReactJS и сравнении с другими платформами