你会使用React组件么，比较喜欢哪一种组件

React组件

组件，类似于js函数，它接受任意参数（props），并返回用于描述页面展示内容的react元素

组件分为两类：class组件 与 class组件

1 class组件

class组件是由状态和声明周期的，继承于Component,实现于render方法。 例：用class组件实现一个clock

import React, {Component} from 'react'

export default class ClassComponent extends Component{
  constructor(props) {
    super(props)
    this.state = {
      date: new Date（）
    }
  }
  componentDidMount（） {
    this.timer = setInterval(() => {
      this.setState（{
        date: new Date（）
      }）
    },1000)
  }
  componentWillUnmount（）{
    cleanInterval(this.timer)
  }
  render（）{
    const {date} = this.state
    return （
      <div>
        <h3>ClassComponent</h3>
        <p>{date.toLocaleString()}</p>
      </div>
    ）
  }
}

其中更新状态不可以直接修改，要使用this.setState。 上述的setInterval在组件卸载时要清除。

2 Function组件

Function组件在hooks出现之前是没有状态的概念的。React Hook是react 16.8之后提出的新特性。可以让组件和class组件一样有能力管理自己的状态。

import ClassComponent from './pages/classComponent.js'

function App（）{
  return (
    <div className="App">
      <ClassComponent />
    </div>
  )
}

下面用Function组件实现一个clock

import React, { useState, useEffect } from 'react'

export default FunctionComponent(props){
  const [date, setState] = useState(new Date())
  useEffect(() => {
    // 相当于componentDidMount、componentDidUpdate、componentWillUnmount
    const timer = setInterval(() => {
      setState(new Date())
    }, 1000)
    // 卸载时候 要清除
    return () => cleanInterval(timer)
  },[])
  //空数组，否则useEffect多次执行，不依赖任何数据，只要求执行一次
  return(
    <div>
      <h3>Function Component</h3>
      <p>{date.toLocaleString()}</p>
    </div>
  )
}

其中useState，useEffect 都属于hooks。后面内容会介绍