以下内容主要参考react官网（V18.2.0）由于react官方推荐使用函数式组件，主要介绍个人在工作中使用到的五个hook

一、常用的hook

包括useState、useEffect、useMemo、useCallback、useContext等，下面将列举出来的做一下说明

1. useState hook

useState 是一个 React Hook，它允许你向组件添加一个状态变量.

使用语法：const [state, setState] = useState(initialState); 按照惯例使用数组解构来命名状态变量，例如 [something, setSomething]。

其中initialState为初始化的值，初始化完成后state等于initialState的值，后续需要修改值则需要调用setState方法。调用完成后会引起组件的渲染

2. useEffect hook

useEffect 是一个 React Hook，它允许你将组件与外部系统同步

使用语法：useEffect(setup, dependencies?) setup一般是一个函数，dependencies一般为需要监听的对象，是数组结构

useEffect(() => { console.log('useEffect exec...'); return () => { console.log('unmount...') } }, [])

上述代码会在组件加载后执行一下，与类组件中的componentDidMount是类似的效果；目前是dependencies为空的情况；当dependencies不为空时，dependencies中的任何一个对象的值发生改变都会重新执行setup里面的方法；里面的return语句类似于类组件中的componentWillUnMount，在组件即将被销毁的时候调用。

3. useMemo hook

useMemo 是一个 React Hook，它在每次重新渲染的时候能够缓存计算的结果。用于缓存数据，优化性能

使用语法：const cachedValue = useMemo(calculateValue, dependencies) 在计算calculateValue后将其结果缓存在cachedValue中，只有当dependencies中有值发生改变时，才会触发更新操作，这样就保证了性能，避免没有必要的渲染

4. useCallback hook

useCallback 是一个允许你在多次渲染中缓存函数的 React Hook。用于缓存函数，优化性能

使用语法：const cachedFn = useCallback(fn, dependencies)在执行完fn后会返回一个函数cacheFn,在初始化完成后，只有当dependencies值发生改变时，才会重新根据fn生成一个函数。避免没有必要的函数执行，从而提高性能

5. useContext hook

useContext 是一个 React Hook，可以让你读取和订阅组件中的 context。可以不通过props逐层往下传递，在该组件的所有子组件都可以获取到传递的值

使用语法：const value = useContext(SomeContext)

下面是官网给的DEMO：传递的dark为样式属性，这里仅展示js代码

import { createContext, useContext } from 'react';

const ThemeContext = createContext(null);// 创建一个上下文对象 初始话为null

export default function MyApp() {
  return (
  // 用上下文对象包裹组件 使该组件的子孙组件都可以接受dark value值一般是一个对象
    <ThemeContext.Provider value="dark"> 
      <Form />
    </ThemeContext.Provider>
  )
}

function Form() { // 子组件
  return (
    <Panel title="Welcome">
      <Button>Sign up</Button>
      <Button>Log in</Button>
    </Panel>
  );
}

function Panel({ title, children }) { // 孙组件
  const theme = useContext(ThemeContext); // 获取上下文对象
  const className = 'panel-' + theme;
  return (
    <section className={className}>
      <h1>{title}</h1>
      {children}
    </section>
  )
}

function Button({ children }) { // 孙子的儿子组件
  const theme = useContext(ThemeContext); // 获取上下文对象
  const className = 'button-' + theme;
  return (
    <button className={className}>
      {children}
    </button>
  );
}

在本地运行上面的js代码后，打开控制台发现drak是可以通过上下文对象获取到的

至此，常用的五个函数介绍完毕。

React常用函数式组件hook