哪一个反应声明

Question

我是新的反应和看到下面的声明在一些教程。

我很疑惑要用哪个。有什么指南可以在差异情况下选择？

宣言1

const elem = function() { 
    return <div>Hello World!</div> 
} 

宣言2

const elem2 = <div>Hello World!</div> 

宣言3

class App extends Component { 
render() { 
    return (
     <div>Hello World!</div> 
    ); 
    } 
} 

Answer 1

考虑

class App extends Component { 
render() { 
    return (
     <div>Hello World!</div> 
    ); 
    } 
} 

是一个React组件，因此当您希望为您为不同的功能创建单独的组件时应该使用它，包括正在传递的状态和道具。

按

const elem2 = <div>Hello World!</div> 

当JSX元素不包含额外的逻辑和contian静态内容

它应该被用来

const elem = function() { 
    return <div>Hello World!</div> 
} 

时要执行的某些修改

最好应使用数据并返回JSX元素，同样如果您希望执行一些有条件的回报和无状态回退

Answer 2

您可以随时使用功能组件当组件仅由渲染函数组成时。

这意味着，如果你的组件有以下形式：

class MyComponent extends React.Component { 
    render() { 
     ... do something ... 
    } 
} 

那么你就可以

const MyComponent = (props, context) => { 
    ... do something ... 
} 

功能组件替代它不能有state（它们是无状态的），你不能访问组件生命周期（例如componentDidMount）。您也无法使用纯渲染，因为您无法覆盖shouldComponentUpdate。

它们是组件的最纯粹的形式，它们将属性转换为UI并且没有其他副作用。

我会建议尽可能多地使用它们，因为它们强制执行良好的编程风格（特别是在使用redux体系结构时），但无法每次都使用它们。 “智能”组件是，使用功能组件的可能性会降低（请参阅Smart vs Dumb components）。

当定义Higher Order Components时，它们特别有用。

另外请注意，你常常可以结合所有的办法，考虑

render() { 
    const renderContents =() => { 
     return (
      <div className="contents"> 
       this.props.children 
      </div> 
     ); 
    } 

    return (
     <div> 
      {renderContents} 
     </div> 
    ); 
} 

您可以定义内的其他组件的render“成分”。如您所见，功能和功能组件之间没有区别。这同样适用于常量。定义常量<div />与定义常量字符串或数字没有区别。您不需要将其包装到组件/功能中。你也可以这样做：

const contents = (() => { 
    if (props.children.count === 0) { 
     return null; 
    } 

    return (
     <div>{props.children}</div> 
    ); 
})(); 

这是一个立即调用的函数。