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架构）但是你不可能每次都使用它们。更聪明的＆＃34;一个组件，使用功能组件的可能性越小（参见Smart vs Dumb components）。

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

另请注意，您可以经常组合所有方法，考虑

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

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

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

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

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

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

哪个反应声明使用

2 个答案: