React：何時將函數用作子代以及何時使用組件

Question

我對於何時應使用組件來呈現頁面的一部分以及何時應使用函數感到困惑。 按照： React Docs函數可以在render函數中使用，這導致一個問題：

什么時候應該使用這樣的功能：

  <> {this.renderAgreementForm(data)}</> 

在這種情況下，renderAgreementForm函數是一個類函數，它返回頁面的HTML和功能的大部分內容。

是否應該在組件上使用它？ 即使說該組件也不會被重用？

Answer 1

最終，是要為數據定義一個新組件還是在現有組件中生成更多HTML，這是您必須根據具體情況做出的設計決策。 但是有一些指導原則：

• 單一職責原則 -HTML和創建它的代碼是否屬於當前組件的核心職責？ 如果沒有，請創建一個新的。
• 最少驚訝的原則 -另一個人會在現有組件中找到該代碼感到驚訝嗎？ 如果是，請創建一個新的。
• 開放/封閉原則 -您當前使用的組件是否允許您將來擴展功能而無需更改現有代碼？ 如果否，請重新構造您的組件。

我個人的經驗法則是：如果該函數呈現“大量HTML”或做一些不平凡的事情，那么我可能會創建一個新組件。 我將內聯函數用於類似的東西（即瑣碎的代碼）：

render() {
    return <ul>{ listOfFriends.map(this.createFriendItem) }</li>
}

createFriendItem(f) {
    return <li><FriendShortView friend={f} /></li>
}

Answer 2

當您具有“重復代碼”時，應使用組件，例如自定義按鈕或列表視圖項。 其他任何功能都可以用作典型功能。 這有助於提高可讀性，並使其更容易了解特定於頁面的內容與應用“標准”的內容。

Answer 3

在render函數的返回部分。

import ListWrapper from "./ListWrapper";

// components should be used directly

showList() {
   return <li>item</li>;
}

// function or constants should be wrapped with `{}`

render() {
   const inputValue = "value";
    return (
       <ListWrapper>
           { this.showList() } // <li>item</li>
           { inputValue } // value
       </ListWrapper>
    );
}