React-Hook

1、无状态组件和有状态组件

• 无状态组件（展示组件，函数式组件）：就是一个函数没有state，没有生命周期，就是一个简单的视图函数，没有业务逻辑更纯粹的展示UI。
• 有状态组件（容器组件，类组件）：标准使用模式，此函数继承了React里面的组件和props，可以使用生命周期可以在里面写业务逻辑，可以在里面做任何事情

2、State Hook

       Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用

useState：参数表示state变量的初始值， 类似于this.state = {count: 0}（useState 会返回一对值：当前状态和一个让你更新它的函数，可以在事件处理函数中或其他一些地方调用这个函数）

setCount：用于改变state变量的函数，可以在任意地方调用，类似于this.setState

import React, { useState } from 'react';
function HookApp() {
    // 声明一个新的叫做 “count” 的 state 变量,初始值为0
    const [count, setCount] = useState(0);
    return (
        <div>
            <!--读取state-->
            <p>{`you have been click ${count} times`}</p>
            <button onClick={() => {
                <!--更新state-->
                setCount(count + 1)
            }}>点击增加</button>
        </div>
    )
}
export default HookApp;

3、Effect Hook

Effect Hook 可以让我们在函数组件中执行副作用操作。

当我们在 React 更新 DOM 之后想运行一些额外的代码，比如发送网络请求、手动变更 DOM，记录日志可以使用Effect Hook，可以把 useEffect看做 componentDidMount，componentDidUpdate 的结合

class组件实现副作用：

componentDidMount() {
    document.title = `you have been click ${this.state.count} times`;
}
componentDidUpdate() {
    document.title = `you have been click ${this.state.count} times`;
}
<button onClick={() => {
    this.setState({ count: this.state.count + 1 })
}}>点击按钮增加</button>

函数组件实现副作用：

useEffect(() => {
    document.title = `you have been click ${count} times`;
})
<button onClick={() => {
     setCount(count + 1)
}}>点击增加</button>