Question

有时我想将条件渲染移出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

_renderSomething和this.renderSomething之间的任何效果差异？

我什么时候应该使用哪个？

Answer 1

功能组件与函数返回元素会导致性能下降。一个例子就是这个 -

// 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>
        )       
    }
}

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

函数版本不会受此影响，因为它直接返回Elements而不是组件。此外，使用较小的函数，由于代码内联，将会有所收获。

对这种方法的扩展讨论是here。

Answer 2

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

下面，您可以将<EmptyList />替换为<ul></ul>但想法是您可以在任何您认为必要的地方抽象 - 在这种情况下，我认为为空列表添加一些占位符文本会很好，因此将其作为无状态功能组件是一个简单的选择

你的应用实际上很少需要状态 - 实际上，你应该努力尽可能地删除它。当什么都不需要状态时，一切都可以用函数表达

＆＃13;

const EmptyList = ({ placeholder = "There are no items to display" }) =>
  <ul><li>{ placeholder }</li></ul>

const ListItem = ({ text = "" }) =>
  <li>{ text }</li>

const List = ({ items = [] }) =>
  items.length === 0
    ? <EmptyList />
    : <ul>{ items.map (text => <ListItem text={text} />) }</ul>
    
ReactDOM.render(<List items={[1,2,3]} />, document.querySelector('#list1'))
ReactDOM.render(<List items={[]} />, document.querySelector('#list2'))

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="list1"></div>
<div id="list2"></div>

＆＃13;

ReactJS功能组件与组件功能，用于条件渲染

2 个答案: