javascript - 你如何使用 Facebook React 管理组件依赖顺序？

Question

假设我有两个 React 组件，A 和 B，其中 B 依赖于(利用)A。假设 A 在 a.js 中，B 在 b.js 中。

React 中有没有一种方法可以安全地解决从 B 到 A 的依赖关系？从而保证无论我实际包含 a.js 和 b.js 的顺序如何，事情仍然会正确解决？

我相信 Google Closure 编译器在开发和生产模式下都有效地为您伪造了一个依赖系统。这使得源代码中包含不同代码的顺序无关紧要； React 有这样的东西吗？

Answer 1

Note: the answer below is very outdated.

I stopped using RequireJS a long time ago due to the fact that it gets rather slow in development because doesn’t bundle JS in a single file in development.

These days I’m mostly using Webpack.
You may also consider other bundlers such as Browserify and Rollup.

I use ES modules as the module system, transpiled by Babel into CommonJS. Eventually I plan to swich to ES modules completely as more bundlers with its first-class support, such as Rollup and Webpack 2, become mainstream.

---

旧答案

据我所知，React 本身不提供任何依赖管理系统；如果您需要，则必须使用一些适合您工作流程的现有工具。

就个人而言，我很高兴使用 RequireJS与 AMD sugar syntax所以我的模块看起来像这样:

/** @jsx React.DOM */
/* jshint trailing:false, quotmark:false, newcap:false */
define(function (require) {

  'use strict';

  var React = require('react'),
      _ = require('underscore'),
      JoinWidget = require('common/views/join_widget');

  var LoginWidget = React.createClass({
    // ...
  });
});

与任何其他类一样，每个 React View 都有自己的文件。

这在开发环境中很好，但我不想在生产环境中动态加载脚本，所以我使用 grunt-requirejs 任务和 almond以正确的顺序连接文件，以便它们始终在单个文件中同步加载。