嵌套组件

ReactJS 的许多功能是它允许嵌套组件的能力。采取以下两个组成部分：

var React = require('react');
var createReactClass = require('create-react-class');

var CommentList = reactCreateClass({
  render: function() {
    return (
      <div className="commentList">
        Hello, world! I am a CommentList.
      </div>
    );
  }
});

var CommentForm = reactCreateClass({
  render: function() {
    return (
      <div className="commentForm">
        Hello, world! I am a CommentForm.
      </div>
    );
  }
});

你可以在不同组件的定义中嵌套并引用这些组件：

var React = require('react');
var createReactClass = require('create-react-class');

var CommentBox = reactCreateClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList /> // Which was defined above and can be reused
        <CommentForm /> // Same here
      </div>
    );
  }
});

进一步的嵌套可以通过三种方式完成，它们都有自己的使用位置。

1.不使用儿童进行嵌套

（从上面继续）

var CommentList = reactCreateClass({
  render: function() {
    return (
      <div className="commentList">
        <ListTitle/>
        Hello, world! I am a CommentList.
      </div>
    );
  }
});

这是 A 组成 B 和 B 组成 C 的风格。

优点

• 轻松快速地分离 UI 元素
• 根据父组件的状态，可以轻松地向子项注入道具

缺点

• 对组合体系结构的可见性较低
• 可重用性较低

好的，如果

• B 和 C 只是表示组件
• B 应该负责 C 的生命周期

2.使用儿童筑巢

（从上面继续）

var CommentBox = reactCreateClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList>
            <ListTitle/> // child
        </CommentList>
        <CommentForm />
      </div>
    );
  }
});

这是 A 组成 B 和 A 告诉 B 组成 C 的样式。对父组件的更多权力。

优点

• 更好的组件生命周期管理
• 更好地了解构图架构
• 更好的可重用性

缺点

• 注入道具可能会变得有点贵
• 儿童组件的灵活性和功能较小

好的，如果

• B 应该接受在将来或其他地方撰写与 C 不同的东西
• A 应该控制 C 的生命周期

B 会使用 this.props.children 渲染 C，并且 B 没有结构化的方式来知道这些孩子的用途。因此，B 可以通过提供额外的道具来丰富子组件，但如果 B 需要确切知道它们是什么，#3 可能是更好的选择。

3.使用道具嵌套

（从上面继续）

var CommentBox = reactCreateClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList title={ListTitle}/> //prop
        <CommentForm />
      </div>
    );
  }
});

这是 A 组成 B 和 B 为 A 提供选项以传递某些特定目的的组合的样式。更有条理的构图。

优点

• 作为一个功能组成
• 轻松验证
• 更好的可组合性

缺点

• 注入道具可能会变得有点贵
• 儿童组件的灵活性和功能较小

好的，如果

• B 具有定义的特定功能以构成某些东西
• B 应该只知道如何呈现不呈现的内容

＃3 通常是制作组件公共库的必要条件，但通常也是制作可组合组件并明确定义组合特征的良好实践。 #1 是最简单，最快速的，但是#2 和#3 应该在各种用例中提供某些好处。