Question

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

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

1

select det.empid  ,
       avg(case when detectionTime  > 0 then det.blocked_time end) as avgBlockedTime, 
       sum(case when detectionTime =  0 then 0 else 1 end) as logTimeCount
FROM (SELECT c.emplid as empid, 
      EXTRACT(EPOCH FROM ( a.detectionTime - b.logTime )) as blocked_time,
      coalesce(DetectionTime,0) as detectionTime
      ## left outer join and condition here
  ) As det 
group by det.empid

2

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

3

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

Answer 1

就性能而言，它们都是一样的。

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

Answer 2

方法1对2.3

对于第二个和第三个声明，因为你将声明组件放在渲染函数中，它会在调用渲染时再次创建。

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

方法2对3

基本上两者都是一样的。

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

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

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

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

2 个答案:

方法1对2.3

方法2对3