React中的Hook

React Hooks的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码“钩”进来。

1、useState：状态钩子

useState用于为函数组件引入状态(state)。纯函数不能有状态，所以把状态放在钩子里面。

例子：

import { useState } from 'react'export default function HooksPage() {const [count, setCount] = useState(0);return (<div onClick={() => setCount(count+1)}>{count}</div>)
}

2、useEffect: 副作用钩子

useEffect用来引入具有副作用的操作，如向服务器请求数据。

useEffect接受两个参数。第一个参数是一个函数，依赖变化时执行的操作；第二个参数是一个数组，用于给出Effect的依赖项，只要这个数组发生变化，useEffect就会执行。第二个参数可以省略，这样每次组件渲染时，会执行useEffect。

例子：

import { useState, useEffect } from 'react'export default function HooksPage() {const [count, setCount] = useState(0);useEffect(() => {//副作用动作}, [count])return (<div onClick={() => setCount(count+1)}>{count}</div>)
}

3、useCallback

useCallback简单来说就是返回一个函数，只有在依赖项发生变化时才会更新（返回一个新函数）。

例子：

import { useState, useCallback } from 'react'export default function HooksPage() {const [count, setCount] = useState(0);const [count1, setCount1] = useState(0);const count1Add = useCallback(() => {setCount1(count1+1)}, [count]);return (<div onClick={() => setCount(count+1)}>{count}<button onClick={count1Add}>callback count1:{count1}</button></div>)
}

4、useMemo

useMemo、useCallback都是使参数（函数）不会因为其他不相关的参数变化而重新渲染。useMemo与useEffect都是用来避免重复渲染，优化性能的，不同的是useMemo返回的是个数值，而useCallback返回的是个函数。

传入useMemo的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作，诸如副作用这类的操作属于useEffect的适用范畴，而不是useMemo。

例子：

import { useState, useMemo } from 'react'export default function HooksPage() {const [count, setCount] = useState(0);const memoValue = useMemo(() => {return count + 1}, [count])return (<div onClick={() => setCount(count+1)}>{count} memoValue:{memoValue}</div>)
}

5、useContext：共享状态钩子

组件之间共享状态，则可以使用useContext。

例子：

1、创建共享内容

import {useState, createContext} from 'react';//定义公用参数，方法
export const useTestContext = () => {const [count, setCount] = useState(0);return {count, setCount}
}export const TestContext = createContext({count: 0,setCount: (count: number) => count
})

2、创建共享组件

import {TestContext, useTestContext} from './hooks/useTestContext.jsx'
import Test1 from './Test1.jsx'
import Test2 from './Test2.jsx'export default function app() {return (<TestContext.Provider value={useTestContext()}><Test1/><Test2/></TestContext.Provider>)
}

Test1.jsx

import {useContext} from 'react';
import {TestContext} from './hooks/useTestContext.jsx';export default function Test1() {const {count, setCount} = useContext(TestContext);return (<div onClick={()=>setCount(count+1)}>{count} ++</div>)
}

Test2.jsx 同 Test1.jsx