简单了解Hook

1.为什么要有Hook ?

逻辑难以抽离，组件难以维护

2.什么是HOOK(钩子) ?

hook 是钩子的意思，给函数式组件钩进来类组件相同的功能。

hook（钩子）是一种特殊的消息处理机制。React一直提倡的是函数组件，有时需要使用state ，才能使用类组件。而Hook 就是可以让你不用class时，也能使用state 以及其他的React特性。hook的目的为了给函数式组件加上状态。

3.最常用的钩子函数（基础钩子）

• useState()
• useEffect()
• useContext()

3.1 useState()：状态钩子

    const [state,setState] = useState(initialState)

state 是 状态 ， setState 是改变状态的函数，initialState 是指初始状态

import { FC, useState} from 'react';
const App:FC = () =>{   
    const [Count, setCount] = useState(0)
    return(
    <div>
        <h2>{Count}</h2>
        <button onClick={() => setCount(Count + 1)}>Click</button>
    </div>
    )}
export default App;

在上面代码中，useState() 接收一个初始值(count),当点击Button 按钮时，调用 setCount(),函数，传入一个改变状态的函数。然后就简单实现了+1的效果（对喽，不能使用 ++ 哦！）

3.2 useEffect() ：副作用钩子

useEffect() 是一个副作用钩子，目的就是给组件添加副作用，取代生命周期的集合体，componentDidMount，componentDidUpdata,componentWillUnmount。useEffect() 有两个参数，第一个是一个函数，第二个是一个数组，只要数组发生改变，就会执行useEffect() 。第二个可以省略。

在 React 组件中有两种常见副作用操作：需要清除的和不需要清除的。

import { FC, useState} from 'react';
const App:FC = () =>{   
    const [Count, setCount] = useState(0)
      useEffect(() => {
        console.log(111);
      }, [count);
    return(
    <div>
        <h2>{Count}</h2>
        <button onClick={() => setCount(Count + 1)}>Click</button>
    </div>
    )}
export default App;

上面代码中，每当count发生改变，就会重修调用useEffect() 。组件第一次调用之也会执行。你们也可以打印一下。

import { FC, useState} from 'react';
const App:FC = () =>{   
    const [Count, setCount] = useState(0)
     const [Str, setStr] = useState(0)
      useEffect(() => {
        console.log(111);
      }, [Str);
    return(
    <div>
        <h2>{Count}</h2>
        <button onClick={() => setCount(Count + 1)}>Click</button>
    </div>
    )}
export default App;

当我把第二个参数改变成Str 时，就只打印一遍了（组件第一次调用），接下来点击时，str并未发生变化，所以未调用useEffect()

3.3 useContext()：跨组件数据传递

useContext() 可以帮助我们跨组件传递数据，实现多组件共享。

首先如果想实现多组件共享，就不能写在一个组件中，应该在做个组件中，写一个文件抽离出来，然后让多组件共享。
创建一个 context.js 文件

import {createContext} from "react"

export const themes = {
    light: {
      foreground: "#000000",
      background: "#eeeeee"
    },
    dark: {
      foreground: "#ffffff",
      background: "#222222"
    }
  };
  
export default createContext(themes.light);

在父组件中引入 ，然后提供给子组件

import { FC} from 'react';
import './App.css';
import ThemeContext,{themes} from "./context"
import Bpp from "./Bpp"

const App: FC = () => {
  console.log(ThemeContext);
  //主要暴露出来两个Provider(提供者)，Consumer(使用者)
  return (
    <div className="App">
      <header className="App-header">
      {/* ThemeContext是提供者 */}
        <ThemeContext.Provider value={themes.light}>
        {/*这是子组件*/}
          <Bpp />
        </ThemeContext.Provider>
      </header>
    </div >
  );
}

export default App;

子组件

import {FC,useContext} from "react"
//引入ThemeContext
import ThemeContext from "./context"
interface Props{}

const Bpp:FC<Props> = () => {
    //拿到父组件灌入的东西
    const theme = useContext(ThemeContext)
    return (
        <div style={{background:theme.background,color:theme.foreground}}>
            Bpp
        </div>
    )
}

export default Bpp

useContext()是为了实现跨组件传递数据、多组件共享。实现多组件共享就不能写在一个文件里，这是我们需要创建一个新的文件，里面抛出我们的数据，在父组件中引入，然后提供给我们的子组件。子组件通过useContext()方法，获取到共享的数据。<br/

以上是基础的Hook,还有额外的Hook.大家可以去React Hooks 入门教程 - 阮一峰的网络日志 (ruanyifeng.com) 看看详细的。

看都看啦，还不点个赞，不能白嫖啊，嘻嘻嘻