6

[译] JSX的一年

jsx 的一年

原文地址 here

Nicholas, 我看了你关于jsx的推特。似乎讨论很快就沉默下去了,但是我还是像分享一下我们去

年的一些经历。我理解了你的关注点。我做了一个说明similar remarks about JSX.

当我们开始使用时,我决定写React不使用JSX。我无法想象我有太多想说的而你又没有考虑过的东西,

但是这里有一个模式改变了我的观点:

这个观点是:ReactMVC中的V是不准确的。这是一个很好的观点,但是对于我们大多数人来说,

它的感觉好像是邀请我们重复了耦合view这种观点。从实践上来说,React是V 和 C。 Dan Abramov

描述了这种区别作为Smart and Dumb Components

在我们的办公室中,我们称之为无状态组件和容器组件(view-controllers 如果我们使用Flux)。

这种观点是相当简单的:组件不应该关心数据的呈现和获取。我觉得一个例子更能说明问题。

一个类似于这样的组件将会被拒绝在code review中,因为同时有了呈现和数据获取:

class CommentList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { comments: [] };
  }

  componentDidMount() {
    $.ajax({
      url: "/my-comments.json",
      dataType: "json",
      success: function(comments) {
        this.setState({ comments: comments });
      }.bind(this);
    });
  }

  render() {
    return <ul> {this.state.comments.map(renderComment)} </ul>
  }

  renderComment({body, author}) {
    return <li>{body}-{author}</li>;
  }
}

接下来,它将会被分成两个组件。第一个组件有点像传统的模板,仅仅关心呈现层。第二个组件的任务

是获取数据并渲染相关的view组件。

// CommentList.js
class CommentList extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <ul> {this.props.comments.map(renderComment)} </ul>;
  }

  renderComment({body, author}) {
    return <li>{body}---{author}</li>
  }
}


// CommentListContainer.js

class CommmentListContainer extends React.Component {
  constructor() {
    super();
    this.state = {comments: []};
  }

  componentDidMount() {
    $.ajax({
      url: "/my-comments.json",
      dataType"json",
      success: function(comments) {
        this.setState({ comments: comments });
      }.bind(this)
    });
  }

  render() {
    return <CommentList comments={this.state.comments} />;
  }
}

在更新的例子中,CommentListContainer 可以更加简单。

render() {
  return React.createElement(CommentList, { });
}

不喜欢JSX的话,需要做些什么东西

当我们开始做这个东西的时候,将会关心JSX的消失。写“dumb Component”感觉就好像handleBars或者

ERB模板但是却拥有JavaScript的力量。我们意识到不是JSX让我们感觉有唠唠叨叨的困扰的感觉。

这种感觉就好像很多小球的融合。一会,我们的组件仅仅是更小的球的混合,但是这种模式却打破了

循环。

我希望这篇文章是对话交谈的延续。我已经写了一些细节性的东西,here

你可以看看这个视频Jason Bota's talk about how they do this at Facebook

[译] 可呈现组件和容器组件