用于条件渲染的ReactJS函数组件与组件函数

有时我想将我的条件渲染移出

render（）

，我总是在这两种方法之间左右为难：

class MyComponent extends React.Component {
  _renderSomething() => {
    const {x, y, z} = this.props
    // conditional rendering based on props
  }

  render() {
    return (
      { this._renderSomething }
      // vs
      { renderSomething(this.props) }
      // which one is better?
    )
  }
}

const renderSomething = (props) => {
    const {x, y, z} = props
    // conditional rendering based on props
}

export default MyComponent

\u renderSomething

和

这个.renderSomething

之间有没有性能差异

---

什么时候应该使用哪个？

通常，无状态组件应该是一个纯函数，只返回要渲染的组件

下面，您可以将

替换为

，但想法是您可以在任何您认为必要的地方进行抽象–在这种情况下，我认为为空列表提供一些占位符文本会很好，因此将其作为无状态功能组件是一个简单的选择

你的应用几乎不需要状态——事实上，你应该尽可能地删除它。当不需要状态时，一切都可以用函数表示

const EmptyList=（{placeholder=“没有要显示的项目”}）=>
{placeholder}

常量ListItem=（{text=”“}）=>
{text}
常量列表=（{items=[]}）=>
items.length==0
? 
：
{items.map（text=>）}
ReactDOM.render（，document.querySelector（'#list1'））
ReactDOM.render（，document.querySelector（'#list2'））

---

功能组件与返回元素的函数之间存在性能损失。举个例子-

// Component approach
let Tab = ({label, link}) => <li><a href={link}>{label}</a></li>;

class Tabs extends Component {
    render(){
        return (
            // notice the key prop is handled by parent render
            <ul>{this.props.tabs.map(tab => <Tab {...tab} key={link}>)}</ul>
        )       
    }
}

// function based approach, notice the key prop is handled by the function
let tab = ({label, link}) => <li key={link}><a href={link}>{label}</a></li>;

class Tabs extends Component {
    render(){
        return (
            <ul>{this.props.tabs.map(item => tab(item))}</ul>
        )       
    }
}

//组件方法
let Tab=（{label，link}）=>
；
类选项卡扩展组件{
render（）{
返回(
//请注意，关键点道具由父渲染处理
{this.props.tabs.map（tab=>）}
)       
}
}
//基于函数的方法，请注意，关键道具由函数处理
let tab=（{label，link}）=>
；
类选项卡扩展组件{
render（）{
返回(
{this.props.tabs.map（item=>tab（item））}
)       
}
}

在组件示例中，您将得到不必要的中间

选项卡

组件，这些组件将添加到vdom中，无论它们多么小。然后随着它们的增长，这些组件最终会导致渲染速度变慢。React需要在后续渲染中跟踪这些组件。这些是功能组件，您将无法访问基于

shouldComponentUpdate

的优化

函数版本不会受到影响，因为它直接返回

元素

，而不是组件。同样，对于较小的函数，代码内联也会带来好处

---

对这种方法的深入讨论是一个非常好的问题。

！我对这里很好奇。。。不过，还有另一种选择。您可以创建一个全新的组件，并像

那样调用它。你可以将其作为功能组件。我认为如果我们直接使用_renderSomething（），那么我们需要该函数的实例来访问道具。但是在--const renderSomething…--中，我们不需要这个关键字这是基于意见的，如果不看到“复杂的条件”，很难给你建议一部分是那些复杂的事情，帮助我们指导我们在另一种情况下考虑另一种方法时愿意做出的权衡。无状态组件应该只是一个纯函数，它接受道具并返回要呈现的组件–担心函数

f

或

这一点。f

是一种微观优化，不应被视为如何构建代码的主要指南–允许类似的东西决定代码的结构代码显示了一个基本的缺陷understanding@naomik谢谢你的洞察力naomik。我知道你从哪里来。然而，我真正关心的不是诸如

f

或

this.f

之类的微观优化。忘了复杂的渲染部分吧，这不是我的重点。让我们假设条件呈现是一个简单的嵌套if-else。我的重点是一个函数组件将被转换成类似于

\u createClass（renderSomething，[{}]）

的东西，而内部函数只是另一个

var\u renderSomething=function…

。这里有什么不同吗？功能组件似乎更昂贵？