React Component的发展历程

从 react component 的发展历程上来看，它主要是经历了一下三个阶段：

1. createClass Component
2. Class Component
3. Function Component

createClass Component

import React from 'react'
 
const MyComponent = React.createClass({
  // 通过proTypes对象和getDefaultProps()方法来设置和获取props
  propTypes: {
    name: React.PropTypes.string
  },
  getDefaultProps() {
    return {
 
    }
  },
  // 通过getInitialState()方法返回一个包含初始值的对象
  getInitialState(){ 
        return {
            sayHello: 'Hello Srtian'
        }
    }
  render() {
    return (
      <p></p>
    )
  }
})
 
export default MyComponent

create-react-class
A drop-in replacement for React.createClass.
Refer to the React documentation for more information.

import React from 'react';
import createReactClass from 'create-react-class';

const Index = createReactClass({
  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  },
});

module.exports = Index;

Class Component

class Modal extends React.Component {
  state = { visible: false }
 
  showModal = () => {
    this.setState({
      visible: true,
    });
  }
  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }
  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }
  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>
          Open Modal
        </Button>
        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p>this is a modal</p>
        </Modal>
      </div>
    );
  }
}

使用高阶组件提取公共逻辑
注意，装饰器对类的行为的改变，是代码编译时发生的，而不是在运行时。这意味着，装饰器能在编译阶段运行代码。也就是说，装饰器本质就是编译时执行的函数。
装饰器只能用于类和类的方法，不能用于函数，因为存在函数提升。

function WrapperHello(Comp) {
  class WrapComp extends React.Component {
    render() {
      return (
        <div>
          <p>这是 HOC 高阶组件特有的元素</p>
          <Comp {...this.props}></Comp>
        </div>
      )
    }
  }

  return WrapComp
}

class Hello extends React.Component {
  render() {
    return <h2>Hello, I love React</h2>
  }
}

Hello = WrapperHello(Hello)

// 装饰器
@WrapperHello
class Hello extends React.Component {
  render() {
    return <h2>Hello, I love React</h2>
  }
}

Function Component

const Modal = () => {
  const [visible , changeVisible] = useState(false)
  return (
    <div>
      <Button type="primary" onClick={()=>changeVisible(true)}>open</Button>
      <Modal
          title="Basic Modal"
          visible={visible}
          onOk={()=>changeVisible(false)}
          onCancel={()=>changeVisible(false)}
        >
          <p>this is a modal</p>
        </Modal>
    </div>
  )
}