React： Class 类型的组件

React 里的组件可能用函数来定义，也可以是个类（Class）。 使用类定义的组件有更多的功能，比如使用组件的生命周期函数，定义自己的方法，添加数据的数据（State） 等等。

下面用 Class 改造一下之前我们定义的 App 这个组件：

import React, { Component } from 'react'

class App extends Component {
  render () {
    return (
      <h2>ninghao.net</h2>
    )
  }
}

export default App

先要导入 React，再从 React 里面把 Component 拿出来用。React 组件的类可以继承这个 Component，定义的这个类的名字就是组件的名字。 组件里面要显示的东西用 render 方法返回。

State

组件内部使用的数据叫 State。 我们可以在组件里面自己定义需要的 State，数据有变化以后可以使用 setState 这个方法去设置组件的 State，这样组件会重新在界面上显示。

import React, { Component } from 'react'

class App extends Component {
  state = {
    header: 'ninghao.net'
  }
  render () {
    return (
      <h2>{ this.state.header }</h2>
    )
  }
}

export default App

上面我们在组件里定义了一个 state，这种写法是 Class 的属性初始器（Property Initializer）。在这个 state 里添加了一个 header 属性，对应的值是个字符串，然后在 render 方法里，大括号里面，我们绑定输出了 this.state.header，就是 state 里面的这个 header 属性的值。

Event

在 React 元素里绑定事件，用的是 on... ，比如 onClick，点击事件。命名方法就是这种驼峰式。在组件里可以定义事件处理方法。

import React, { Component } from 'react'

class App extends Component {
  state = {
    header: 'ninghao.net'
  }

 changeHeader = () => {
   this.setState({
     header: '😄'
   })
  }

  render () {
    return (
      <h2 onClick={ this.changeHeader }>{ this.state.header }</h2>
    )
  }
}

export default App

我们在 h2 元素上绑定了一个点击事件（onClick），用组件里的 changeHeader 来处理。在组件里定义了这个 changeHeader，它做的事就是用了一下 setState 去重新设置了 header 的值。这样点击 h2 元素，就会让标题变成新设置的一个 😄 。