Question

我曾经做过React.createClass，但是因为我听说扩展组件的速度更快，而且现在我开始玩babel，我想用更新的风格转换无状态的遗留组件。

我有这个

const Main = React.createClass({
   render(){
      return(<h1>my title</h1>)
   }
})

那么上面代码的“更新”语法是什么？

是这样的吗？

const Main = () => { 
   render(){
       return(<h1>my title</h1>)
   }
}

然后何时使用React.component？

class Main extends React.Components() {
   render(){ return(<h1>something</h1>}
}

Answer 1

使用

之间没有性能差异

<DataGrid x:Name="DgrModelParameters" ItemsSource="{Binding}" AutoGenerateColumns="False" CanUserAddRows="False" CellEditEnding="MyDgr_OnCellEditEnding">

或

const Main = () => { 

       return(<h1>my title</h1>)

}

鉴于他们收到相同的道具，但反应创作者建议将来会改进性能。简而言之，

使用第一种方法，当您的组件仅接受道具并呈现结果时，这是一种class Main extends React.Component { render(){ return(<h1>something</h1>} }方法。但是，当您的React组件具有更多功能并处理状态时，请使用functional component方法。

在您的情况下，您只是渲染组件，因此功能组件方法最适合您

Answer 2

你的两个例子都是正确的。只是扩展Component应该没有s，并且需要import React, { Component } from 'react';位于顶部。

const Main = () => { 
    return(<h1>my title</h1>)
}

当您不需要任何lifecycle方法时，通常需要使用上面的示例。这被称为Pure组件，当给定相同的props时，它将始终表现相同。它也没有保留state。

class Main extends React.Component() {
  componentWillMount() {
    console.log("I can be not pure");
  }

  render(){ return(<h1>something</h1>}
}

上述Component可以管理state并使用lifecycle方法。

通常要决定使用什么，我总是从纯粹的组件开始。继续开发时，我发现我必须使用state或lifecycle方法，然后将其转换为组件。

使用extends Components实现创建类混淆

2 个答案: