相关疑难解决方法(0)

我试图了解React的有状态和无状态组件之间的确切区别.好吧,无状态组件只是做某事,但没有记住任何事情,而有状态组件可能会做同样的事情,但他们会记住内部的东西this.state.这就是理论.

但现在,检查如何使用代码显示这一点,我有点麻烦有所作为.我是对的,有以下两个例子吗？唯一的区别是getInitialState函数的定义.

无状态组件的示例:

var React = require('react');

var Header = React.createClass({
    render: function() {
        return(
            <img src={'mypicture.png'} />
        );
    }
});

module.exports = Header;

有状态组件的示例:

var React = require('react');

var Header = React.createClass({

    getInitialState: function() {
        return {
            someVariable: "I remember something"
        };
    },

    render: function() {
        return(
            <img src={'mypicture.png'} />
        );
    }
});

module.exports = Header;

我是React的新手,试图掌握语法.

我正在React 15环境中开发(使用react-starterify模板),并且一直在使用下面的VERSION 2中的语法,但是,我在Facebook的React页面中找到的大多数示例和教程都是VERSION 1.有什么区别这两个什么时候我应该使用另一个？

版本1

var MyComponent = React.createClass({
  render: function() {
    return (
      <ul>
        // some list
      </ul>
    );
  }
});

module.exports = MyOtherComponent;

版本2

const MyComponent = () => (
  <ul>
    // some list
  </ul>
);

export default MyComponent;