创建组件的方法

方法一:工厂函数式(无状态组件)

适用于仅接受prop,无state

// TestComponent.js
import React from 'react';

function TestComponent() {
  return <h2>工厂函数创建函数</h2>;
}

export default TestComponent;


// index.js
import TestComponent from './TestComponent';// 此处使用大驼峰法
.....
ReactDOM.render(<TestComponent />, document.getElementById('root'));

方法二: class类

react16以上方法通用(推荐)，继承component类

//    TestComponent.js
import React from 'react';

class TestComponent extends React.Component {
  render() {
    console.log(this);
    return <h2>使用es6语法创建组件</h2>;
  }
}

export default TestComponent;

//    index.js
import TestComponent from './TestComponent';
...
ReactDOM.render(<TestComponent />, document.getElementById('root'));

方法三: createClass方法

适用于react15以下,不推荐使用,react官方正在逐步废弃

//    TestComponent.js
const React = require('react');
const TestComponent = React.createClass({
    render:function(){
        return <div>react15以下使用</div>
    }
})
module.exports = TestComponent;
//    index.hs
const TestComponent = require('./TestComponent');
...
ReactDOM.render(<TestComponent />,document.getElementById('root'));