初步了解hooks用法

了解 react hooks

React hooks在16.7的测试版到16.8的正式上线以后到现在的火热。可以看出react hooks新特性的功能是效果绝佳的，而这种模式也被Vue3.0所参考。
React hooks的出现使函数式组件也可以像类组件一样拥有类似生命钩子一样的概念。扩大函数式组件的应用范围。

react hooks钩子介绍

首先总结react hooks中有哪些钩子:

• `useState、useEffect、useContext`
  

• `useRef、useReducer、useCallback、useMemo`
  

• `useLayoutEffect、useDebugValue、useImperativeHandle`
  

react hooks钩子使用

useState 举个栗子

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

function Index() {
    const [count, setCount] = useState(0)
    const [color, setColor] = useState('blue')
    return (
    <Fragment>
        <div style={{color}}>统计数: {count}</div>
        <button onClick={()=> setCount(count+1)}>add</butto>
        <button onClick={()=> setColor('pink')}>color</butto>
    </Fragment>
    )
}

export defualt Index;

// 上述栗子中，当我们点击按钮会让count+1 以及 将div中的字体颜色变成粉色。useStata()其实就是结构赋值，括号中接受初始化参数，第一个参数接受值, 第二个则是一个方法，通过去调用传一个参数来改变他。

---

useEffect 举个栗子

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

function Index() {   
    useEffect(()=>{        
        console.log('进入Index');        
            return () => {           
                console.log('离开Index');        
             }    
     });    
     return <h2>这是一个Index</h2>;
}

function List() {   
    useEffect(()=>{        
        console.log('进入List');        
            return () => {           
                console.log('离开List');        
             }    
     });    
     return <h2>这是一个List</h2>;
}

function App() {
    const [count, setCount] = useState(0)
    const [color, setColor] = useState('blue')

    useEffect(()=> {
        console.log(count)
        return (
          console.log('我离开了')
        )
    })
}   

return (
    <Fragment>
        <div style={{color}}>统计数: {count}</div>
        <button onClick={()=> setCount(count+1)}>add</butto>
        <button onClick={()=> setColor('pink')}>color</butto>

        <Route>
            <ul>
                <li>
                    <Link to='/'>首页</Link>
                </li>
                <li>    
                    <Link to='/list/'>LIST</Link>
                </li>
            </ul>
            <Route path='/' exact component={Index}/>
            <Route path='/list/' exact component={List}/>
        </Route>
    </Fragment>
)
}

export defualt App;

上述栗子中,当你在点击改变 useState定义的参数时, 你会发现在不停的打印count是因为, useEffect()类似类组件中 componentDidMount 和 componentDidUpdate的概念。所以当你在点击切换路由第一次加载完成会提示进入XX，根据上述代码您大致也猜到了在useEffect中return（注意：必须返回的是一个函数/方法）其实也就是类似类组件中componentWillUnmount的概念。
useState第一个参数拥有类似类组件三个钩子概率同时，它还有第二个参数需要传一个数组，来指定哪些参数改变以后才会触发。如果不传那么不管改变了那个useState的参数都会触发useEffect

---

useContext 举个栗子

在使用useContext时 这次您需要多现引入createContext
那么我因为我没有分成两个文件来写栗子但实际开发中肯定是分成两个文件那么这里会和下面代码稍有不同
首先在使用useContext时需要先创建
export const appContext = createContext({});
暴露出这个变量 在另一个页面中来使用所以还需import引入

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

const appContext = createContext({});

function Index() {
    let { count, color} = useContext(appContext);
    useEffect(()=>{        
        console.log('进入Index');        
            return () => {           
                console.log('离开Index');        
             }    
     });    
     return <h2>这是一个Index, 父组件中的计数:{count}</h2>;
}

function List() {   
    useEffect(()=>{        
        console.log('进入List');        
            return () => {           
                console.log('离开List');        
             }    
     });    
     return <h2>这是一个List</h2>;
}

function App() {
    const [count, setCount] = useState(0)
    const [color, setColor] = useState('blue')

    useEffect(()=> {
        console.log(count)
        return (
          console.log('我离开了')
        )
    })
}   

return (
    <Fragment>
        <div style={{color}}>统计数: {count}</div>
        <button onClick={()=> setCount(count+1)}>add</butto>
        <button onClick={()=> setColor('pink')}>color</butto>

        <Route>
            <ul>
                <li>
                    <Link to='/'>首页</Link>
                </li>
                <li>    
                    <Link to='/list/'>LIST</Link>
                </li>
            </ul>
            <Route path='/' exact component={Index}/>
            <Route path='/list/' exact component={List}/>
        </Route>
        // 显示子组件
        <appContext.Provider value={{count, color}}>
            <Index/>
        </appContext>
    </Fragment>
)
}

export defualt App;

useContext主要功能其实就是父子组件之间的通信

由于工作原因后面内容, 他日有缘在补。emmmmmm