Hooks中常见的方法使用

1. 三个常用的Hook

(1)useState()
(2)useEffect()
(3)useRef()

2. useState 

(1). State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作
(2). 语法: const [xxx, setXxx] = React.useState(initValue)  
(3). useState()说明:
        参数: 第一次初始化指定的值在内部作缓存
        返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数
(4). setXxx()2种写法:
        setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值
        setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值.

import React,{useState} from 'react'

export default function Example() {
    // let _useState = userState(0)
    // let count = _useState[0]
    // let setState = _useState[1]
    // 数组解构
    const [count,setCount] = useState(0)
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count+1)}}>Click me</button>
        </div>
    )
}

3. useEffect 

(1). Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)
(2). useEffect生命周期函数代替了componentDidMount()和componentDidUpdate()这2个钩子，它是异步的，不影响我们视图的更新。
(2). React中的副作用操作:
        发ajax请求数据获取
        设置订阅 / 启动定时器
        手动更改真实DOM
(3). 语法和说明: 
        useEffect(() => { 
          // 在此可以执行任何带副作用操作
          return () => { // 在组件卸载前执行
            // 在此做一些收尾工作, 比如清除定时器/取消订阅等
          }
        }, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行
    
(4). 可以把 useEffect Hook 看做如下三个函数的组合
        componentDidMount()
        componentDidUpdate()
        componentWillUnmount() 

import React,{useState,useEffect} from 'react'
import { BrowserRouter,Route,Link } from "react-router-dom";

function Index() {
    useEffect(() => {
        console.log(`useEffect=>加载Index页面`);
        return ()=>{
            console.log('销毁Index页面');
        }
    },[])
    return <h2>bihuaizhi</h2>
}

function List() {  
    useEffect(() => {
        console.log(`useEffect=>加载页面`);
        return ()=>{
            console.log('销毁页面');
        }
},[])

    return <h2>List Page</h2>
}

// useEffect代替生命周期函数
export default function Example3() {
    const [count,setCount] = useState(0)
    useEffect(() => {
        console.log(`useEffect=>You clicked ${count} times`);
        return () => {
            console.log('====================================');
        }
    }, [count])
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count+1)}}>Click me</button>

            <BrowserRouter>
                <ul>
                    <li><Link to='/'>首页</Link></li>
                    <li><Link to='/list/'>列表</Link></li>
                </ul>
                <Route path='/' exact component={Index}/>
                <Route path='/list/' component={List}/>
            </BrowserRouter>
        </div>
    )
    
}

4. useRef 

(1). Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据
(2). 语法: const refContainer = useRef()
(3). 作用:保存标签对象,功能与React.createRef()一样