import React,{ useState } from "react";

const NewCount = ()=> {
    const [ count,setCount ] = useState(0)
    const addCount= ()=> {
        let newCount = count;
        setCount(newCount +=1)
    }
   return (
       <>
           <p> { count }</p>
           <button onClick={ addCount }>Count++</button>
       </>
   )
}
export default NewCount;

count相当于一个状态属性，setCount相当于内组件里面的this.setState，useState(0)，将0赋给count，useState里面的参数就是状态属性里面的初始值

在useState()中，它接受状态的初始值作为参数，例如上例中计数的初始值（0），它返回一个数组，其中数组第一项为一个变量，指向状态的当前值，类似this.state；第二项是一个函数，用来更新状态,类似setState。函数的命名，约定为set前缀加状态的变量名。

② useContext()

useContext()：共享状态钩子。作用就是可以做状态的分发，在React16.X以后支持，避免了react逐层通过Props传递数据。
第一步：创建全局的Context，const AppContext = React.createContext([初始化参数])
第二步：通过全局的Context进行状态值的共享
<AppContext.Provider value={{属性名:值}}>
    <组件1 />
    <组件2 />
</AppContext>

import React, { useContext } from "react";
const HookTest = ()=> {
    const AppContext = React.createContext({});  //创建AppContext的常量
    const A = ()=> {  //A组件
        const { name } = useContext(AppContext) //用userContext将AppContext赋给name，相当于解构，将AppContext中的name属性解构出来
        return (
            <p>
                我是A组件,我的名字是：{ name }；
                <span>我是A的子标签：{ name }</span>
            </p>
        )
    }
    const B= ()=> {    //B组件
        const { name } = useContext(AppContext);
        return (
            <p>我是B组件,名字是： { name }</p>
        )
    }
    return (
        <AppContext.Provider value={{ name: '小森'}}>
            <A />
            <B />
        </AppContext.Provider>
    )
}
export default HookTest;

③ useReducer()：Action钩子

const [state, dispatch] = useReducer(reducer, initialState)

它接受reducer函数和状态的初始值作为参数，返回一个数组，其中第一项为当前的状态值，第二项为发送action的dispatch函数

④ useEffect()：副作用钩子

可以用来更好的处理副作用，如异步请求等，Hooks的useEffect()也是为函数组件提供了处理副作用的钩子。在类组件中我们会把请求放在componentDidMount里面，在函数组件中我们可以使用useEffect()。

   useEffect(() => {},[array])

useEffect()接受两个参数，第一个参数是要进行的异步操作，第二个参数是一个数组，用来给出Effect的依赖项，只要这个数组发生变化，useEffect()就会执行。当第二项省略不填时，useEffect()会在每次组件渲染时执行。这一点类似于类组件的componentDidMount

//通过useEffect()模拟一个异步加载数据。
import React,{ useState,useEffect } from "react";
const AsyncPage = () => {
    const [loading,setLoading] = useState(true)
    useEffect(()=> {
        setTimeout(()=> {
            setLoading(false)
        },5000)
    })//第二个参数为默认的话，组件每一次刷新，都会向后台发起一次请求
    return (
        loading? <p>loading...</p>: <p>异步请求完成</p>
    )
}
export default AsyncPage;

//useEffect()依赖第二项数组变化
import React,{ useState,useEffect } from "react";
const AsyncPage = ({name}) => {
    const [loading, setLoading] = useState(true)
    const [person, setPerson] = useState({})

    useEffect(() => {
        setLoading(true)
        setTimeout(()=> {
            setLoading(false)
            setPerson({name})
        },2000)
    },[name])
    return (
        <>
            {loading?<p>Loading...</p>:<p>{person.name}</p>}
        </>
    )
}
const PersonPage = ()=> {
    const [state,setState] = useState('')
    const changeName = (name)=> {
        setState(name);
    }
    return (
        <>
            <AsyncPage name={ state }/>
            <button onClick={()=>{ changeName('小森')}}>小森</button>
            <button onClick={()=>{ changeName('小沈')}}>小沈</button>
        </>
    )
}
export default PersonPage;