【青训营】- React Hook出新手村之路 - P1√在React16.8以前，组件分为两类：一类是函数组件，一类是

在React16.8以前，组件分为两类：一类是函数组件，一类是类组件。

// 函数组件
function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

// 类组件
class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

这两个最重要的不同是，函数组件无法在内部使用state，属于无状态组件；而类组件可以在内部使用state，属于有状态组件。很明显的能看出来，类组件的优势很大。

但在React16.8以后，Hook这个新特性的出现打破了这个局势，函数组件也能在内部使用state了！

在实际开发中，开发者们对函数组件使用得十分得心应手，而且类组件还要处理this指向的问题......所以它通过为开发者提高使用效率、提升使用感的方式后来者居上取代了类组件。

知道这个背景后，我们就能清晰地判断下面这句话是对的了。

- [√] Hook只能在函数组件内使用，而不能在类组件中使用。

至于下面这句话为什么是对的，这就需要你出新手村后再研究Hook的内部原理了，并不在本文的范畴中。

- [√] 只能在函数的最顶层控制流中调用Hook。

因此，我们本次的学习目标是：了解Hook。（没错，就是简历上的三个程度：了解、熟悉、掌握）

注意：Demo用的是Sandbox，能同时预览效果和代码，只有一个毛病，就是打开特别慢！