Question

facebook react教程包含以下代码和附注：

// tutorial3.js
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList />
        <CommentForm />
      </div>
    );
  }
});

注意我们如何混合HTML标签和我们构建的组件。 HTML 组件是常规的React组件，就像你的组件一样定义，但有一点不同。 JSX编译器将自动执行将HTML标记重写为React.createElement（tagName）表达式和别管其他一切。 这是为了防止污染全局命名空间。

我不确定我是否完全理解粗体部分，可能是因为我还不熟悉React的内部工作原理。我的理解是JSX编译器将用React.createElement（）替换HTML标签以及我自己的自定义组件标签，但我并没有完全看到使用React.createElement（）如何防止污染全局命名空间之间的联系。 “h1”否则会成为全局变量或什么？怎么不替换HTML标签甚至工作 - 我认为React有它自己的内部DOM它通过React.createElement（）跟踪？

教程here。

Answer 1

React.createClass使用CommentBox等自定义类污染全局命名空间。但是，对于HTML组件，没有类定义，只有React.createElement。

Facebook React教程：JSX编译器防止全局命名空间的污染？

1 个答案: