Question

我在ReactJs中有两种声明组件的方法。有什么不同，因为两者似乎工作正常！

案例I：

function Roger(props){
    return <h1>Hello! {props.name},{props.message}</h1>;
}

案例II：

var Roger = React.createClass({
  render: function() {
    return (
      <h1>Hello! {props.name},{props.message}</h1>
    );
  }
});

任何人都可以帮助我理解差异吗？

Answer 1

案例I正在创建无状态功能组件，根据经验，建议尽可能使用它。例如，如果您需要使用this或需要生命周期方法，则案例II非常有用。

查看这篇精彩文章，了解详情：http://jamesknelson.com/should-i-use-react-createclass-es6-classes-or-stateless-functional-components/

来自官方文档：

定义组件的最简单方法是写一个JavaScript函数：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

此函数是一个有效的React组件，因为它接受一个   “props”对象参数与数据并返回一个React元素。我们称之为   这些组件“功能”，因为它们实际上是JavaScript   功能

您还可以使用ES6类来定义组件：

class Welcome extends React.Component {   
  render() {
    return <h1>Hello, {this.props.name}</h1>;   
  } 
}

上述两个组成部分与React的观点相同。

类有一些额外的功能，我们将在下一步讨论   部分。在那之前，我们将使用功能组件   简明。

来源：https://facebook.github.io/react/docs/components-and-props.html#functional-and-class-components

在ReactJs中定义组件的两种方法之间的区别

1 个答案: