那些创建反应组件方法有什么区别？答案

【问题标题】：What is difference between those create react component method?那些创建反应组件方法有什么区别？
【发布时间】：2017-11-29 04:24:45
【问题描述】：

如果 ProjectItem 不必在任何地方重用，那区别在哪里？

如果我将声明组件放在循环中，它会消耗大量内存吗？

const ProjectItem = ({ _id, title }) => {
  return <div key={_id}>
    <a href={`/projects/${_id}`}>{title}</a>
  </div>
}

class view extends Component {
  render() {
    const { ready, projects } = this.props

    if (!ready)
      return <LoadingView />

    return projects.map((project, projectIdx) => <ProjectItem key={projectIdx} {...project} />)
  }
}

class view extends Component {
  render() {
    const { ready, projects } = this.props

    if (!ready)
      return <LoadingView />

    const ProjectItem = ({ _id, title }) => {
      return <div key={_id}>
        <a href={`/projects/${_id}`}>{title}</a>
      </div>
    }

    return projects.map((project, projectIdx) => <ProjectItem key={projectIdx} {...project} />)
  }
}

class view extends Component {
  render() {
    const { ready, projects } = this.props

    if (!ready)
      return <LoadingView />

    return projects.map((project, projectIdx) => <ProjectItem key={projectIdx} {...project} />)

    function ProjectItem({ _id, title }) {
      return <div key={_id}>
        <a href={`/projects/${_id}`}>{title}</a>
      </div>
    }
  }
}

【问题讨论】：

标签： reactjs

【解决方案1】：

方法 1 与 2.3

第二个和第三个声明，因为你把声明组件放在render函数中，调用render时会重新创建。

所以第一个更好，你只需声明这个组件一次。

方法 2 与 3

基本上，两者都是一样的。

不同的是第三种方法是在调用它之后声明function。由于function hoisting 属性，这将在javascript 中工作，但在某些lint 或样式指南中，他们不建议这种模式。

我贴上另一个问题正在讨论declare var function or function：

var functionName = function() {} vs function functionName() {}

【讨论】：

【解决方案2】：

就性能而言，它们都是相同的。

我不会使用 3，因为这种语法不被认为是过时的。

【讨论】：