2021-05-18 react hooks 学习

Hook 是 React 16.8 的新增特性，它可以让我们在不编写class的情况下使用state以及其他的React特性(比如生命周期)
1.什么情况下使用Hooks

官方并不建议我们把原有的 class 组件，大规模重构成 Hooks，而是有一个渐进过程:
首先，原有的函数组件如果需要自己的状态或者需要访问生命周期函数，那么用 Hooks 是再好不过了；
另外就是，我们可以先在一些逻辑较简单的组件上尝试 Hooks ，在使用起来相对较熟悉，且组内人员比较能接受的前提下，再扩大 Hooks 的使用范围。

2.对比与class，函数式组件有哪些优势

State Hook 使得组件内的状态的设置和更新相对独立，这样便于对这些状态单独测试并复用。
Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分，这样使得各个逻辑相对独立和清晰

3.hooks 提供的常用的几个函数
(1) useState

useState来自react，需要从react中导入，它是一个hook
useState 只在初始化时执行一次，后面不再执行
ü 参数:初始化值，如果不设置为undefined;  返回值:数组，包含两个元素;
Ø 元素一:当前状态的值(第一调用为初始化值); 类比于 state中的值
Ø 元素二:设置状态值的函数;类比于 setState 更新界面
如下代码
const [counter,setCount] = useState(0)  //数组的结构
    return (
        <div>
            <h2>当前计数 {counter}</h2>
            <button onClick={e => setCount( counter + 1 )}>+1</button>
            <button onClick={e => setCount( counter - 1 )}>-1</button>

        </div>
    );

(2)useEffect

useEffect 相当于是 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合，可以通过传参及其他逻辑，分别模拟这三个生命周期函数；
useEffect 第二个参数是一个数组，如果数组为空时，则只执行一次（相当于componentDidMount）
如果数组中有值时，则该值更新时，useEffect 中的函数才会执行 （相当于componentDidUpdate）
如果没有第二个参数，则每次render时，useEffect 中的函数都会执行；
effect 中返回的函数（其清除函数）（页面销毁的时候调用）， （相当于componentWillUnmount）
如下代码
const  [counter,setCounter] = useState(0)
const  [age,setAge] = useState(18)
  useEffect(()=>{
        document.title = counter
        console.log('1')
        return ()=>{
            console.log('2')
        }
    },[counter])

    useEffect(()=>{
        console.log('3')
    })

    useEffect(()=>{
        console.log('4')
    },[counter,age])

    useEffect(()=>{
        console.log('5')
    },[])

    return (
        <div>
            <h2>当前计数:{counter}</h2>
            <button onClick={e=>{setCounter(counter+1)}}>+1</button>
            <button onClick={e=>{setAge(age+1)}}>+1</button>
        </div>
    );

(3) useContex

useContext() 状态共享的函数钩子 
该钩子的作用是，在组件之间共享状态。关于Context这里不再赘述，其作用就是可以做状态的分发，在React16.X以后支持，避免了react逐层通过Props传递数据。

import React, {useState, useContext} from 'react';

function Test1() {
    // hook : useState
    // useState 本身是一个函数，来自react包
    // const arr = useState(0)
    // const state = arr[0]
    // const setState = arr[1]

    const [counter, setCount] = useState(0)
    const AppContext = React.createContext({})

    const A = () => {
        const {name} = useContext(AppContext)
        return (
            <p>我是A组件的名字{name}</p>
        )
    }

    const B = () => {
        const {name} = useContext(AppContext)
        return (
            <p>我是B组件的名字{name}</p>
        )
    }

    return (
        <AppContext.Provider value={{name: 'hook测试'}}>
            <h2>当前计数 {counter}</h2>
            <button onClick={e => setCount(counter + 1)}>+1</button>
            <button onClick={e => setCount(counter - 1)}>-1</button>
            <A></A>
            <B></B>

        </AppContext.Provider>
    );
}

export default Test1;

image.png