先新建一个项目，准备以下文件：
一、setState
对象式setState()
案例为点击按钮让页面中的数据加1的效果。
其实setState()更新状态是异步的。
准确地说setState()是同步地，但是引起数据状态变化的动作是异步的。
效果如下：
setState()方法除了上面的写法，setState()也可以传两个参数，第一个参数还是数据对象，第二个参数为函数（状态改变函数），第二个参数的函数在状态更新完毕render()执行完后被调用。
函数式setState()
setState()还有一种写法，是函数的setState()。也有两个参数，第一个参数是函数，该函数返回state改变后的状态，第二个参数也是函数，也是状态更新完render()执行完之后被调用。
注意：第一个参数函数可以接收两个值state、props，
总结：若是新状态不依赖原状态，则使用对象式setState()，否则使用函数式setState()更方便（不是必须，只是不用手动获取state）。
二、LazyLoad
懒加载最多的使用场景是路由组件的懒加载。
这样会造成资源的浪费，需要实现点击一个路由组件加载一个的方式，即实现路由组件的懒加载。
三、Hooks
Hooks时react16.8版本增加的新特性，可以在函数组件中使用state以及其他的react特性。
之前说过，函数式组件没有this，不能使用对象实例的特性（除了props）。函数式组件也不能用生命周期函数。Hooks可以解决这些问题。
在之前一、setState的例子的基础上进行修改。
有三个常用的Hook，分别为React.useState()、React.useEffect()、React.useRef()。
useState()
useState()方法返回两个参数，第一个参数是数据，第二个参数是更新数据的方法，方法的参数是返回值第一个参数的初始值。
注意：每一次点击按钮函数组件Demo都会被调用一次,react底层做了处理，只有第一次执行的时候才会执行"const count,setCount = React.useState(0)"进行初始化操作。
改变数据的方法setCount也有两种写法。另一种写法也是传递一个函数，该函数参数为旧值，返回值为修改后的值。
useEffect()
useEffect()使得函数组件中可以使用生命周期函数。
用一个例子说明。
函数式组件中没有componentDidMount()方法。
React.useEffect()方法有两个参数（第二个可选），第一个参数表示执行的操作，第二个参数是一个数组，表示检测的setState的数据。
第二个参数不穿，React.useEffect()指定的第一个参数的方法类似于类组件的生命周期函数componentDidUpdate()。
所以，可以看出，不传第二次参数类似于类组件的，传空数组类似于类组件的componentDidMount()。
之前在类组件还有一个案例，若是组件被卸载了需要把定时器清楚，类组件是在生命周期函数componentWillUnmount()中卸载定时器的。
函数组件中若想实现componentWillUnmount()的效果，需要把React.useEffect()的第一个参数（函数）的返回值为一个函数，这个函数相当于componentWillUnmount()。
可以把useEffect()看成componentDidMount()、DidUpdate()与componentWillUnmount()的结合。
useRef()
在之前的点击按钮弹出用户的输入内容的例子中，类组件中一个组件(button)要获得另一个组件input的value值，需要需用ref属性。
函数式组件中需要使用useRef()。
