Question

我对何时应使用组件来呈现页面的一部分以及何时应使用函数感到困惑。按照：React Docs函数可以在render函数中使用，这会导致一个问题：

何时应使用此类功能：

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

在这种情况下，renderAgreementForm函数是一个类函数，它返回页面的HTML和功能的大部分。

是否应该在组件上使用它？即使所说的组件将不会被重复使用？

Answer 1

最终，是为数据定义一个新组件还是在现有组件中生成更多HTML，这是您必须根据具体情况做出的设计决策。但是有一些指导原则：

Single Responsibility Principle-HTML和创建它的代码是否属于当前组件的核心职责？如果没有，请创建一个新的。
Principle of Least Astonishment-另一个人会惊讶于现有组件中的代码吗？如果是，请创建一个新的。
Open / Closed Principle-您当前的组件是否允许您将来扩展功能而无需更改现有代码？如果没有，请重新构建组件。

我个人的经验法则是：如果该函数呈现“大量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>
    );
}

反应：何时将函数用作子项以及何时使用组件

3 个答案: