react 脚手架

Hook

能够 在不编写 class 的情况下使用 state 以及其他的 React 特性。

Hook 是一个特殊的函数，它可以让你“钩入”React 的特性

作用：

能减少不停的复用一个有状态的组件

有效处理生命周期钩子函数里的逻辑混乱

解决class 中 this 指向问题

State Hook

useState 是 React 自带的一个 Hook 函数，它的作用就是用来声明状态变量。

useState 这个函数接收的参数是我们的状态初始值，它返回了一个数组，这个数组的第 0 项是当前的状态值，第 1 项是可以改变状态值的方法函数。

在一个组件中，可以使用多个 state 变量

    let [stuName, setStuName] = useState('');
    let [stuAge, setStuAge] = useState('');

Effect Hook

useEffect 是声明周期函数钩子的集合体，结合了componentDidMount，componentDidUpdate 和 componentWillUnmount

在书写有状态组件时，通常会产生很多的副作用

副作用（Side Effect）是指一个 function 做了和本身运算返回值无关的事，比如：修改了全局变量、修改了传入的参数、甚至是 console.log()，所以 ajax 操作，修改 dom 都是算作副作用的；

给 useEffect 传了一个匿名函数，这个匿名函数就是副作用

    // useEffect专门用来处理副作用（除渲染以外的其他事）
    useEffect(() => {
        axios.get('http://localhost:3006/users').then(function ({ data }) {
            setStu(stu = data);
        })
        console.log("执行了副作用", stu);
    }, []);  
// 后接依赖 没有依赖则为[]

需要清除的 effect

对 effect 的副作用进行解绑

给 useEffect 的副作用函数返回一个新的函数即可。这个新的函数将会在组件下一次重新渲染之后执行

  useEffect(() => {
   
    console.log(count);
    return function cleanup(){
   
      console.log('该函数会在下一次渲染之后，执行副作用函数之前执行');
    }
  })