巢狀元件

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 應該在各種用例中提供某些好處。