功能子组件最佳实践

Question

在 React 函数式组件中使用常量或子组件之间是否有最佳实践？

看下面的简单例子：在return()函数中，{warningConst}和<WarningFunc />会产生相同的结果，但我不确定哪个最好使用。

    function WarningDialog(props) {
    
    //As constant
    const warningConst = <>Warning {props.message}</>
    
    //As functional component
    function WarningFunc(props) {
        return (
            <>Warning {props.message}</>
        )
    }
    
    return (
        {warningConst}
        <WarningFunc message={props.message} />
    )
}

当然这个例子很简单，但有时我有很长的 return() ，我想拆分它以使代码更具可读性。而且我不确定我是应该创建子组件还是简单地使用常量。

你对此有何看法？

Answer 1

它们是不同的东西。

一个是变量，可以引用JSX。它不是一个组件，例如没有自己的生命周期。如果它能提高您的可读性，您可以使用它。
另一个是组件。但是：不推荐在函数中声明组件（正如您在 WarningFunc 中所做的那样）。 将其定义放在WarningDialog之外。原因是协调算法。当在另一个组件中定义组件时，“构造函数”函数每次都不同，因为它是重新创建的，协调算法可能认为组件类型每次都不同。

Answer 2

用const或function声明React函数式组件对性能基本没有影响。

但是使用 function 声明组件确实有将函数提升到当前范围顶部的好处。

我还建议将“sub-component”放在当前组件之外，因为“sub-component”真的不是东西。

如果你想分离一个大组件的一部分以使代码更清晰，同时又不使其成为与当前组件有 state-wise 连接的子组件，将它放在外面会更好。

功能子组件最佳实践

Functional sub component best practice

reactjs

react-functional-component