useState#

useState是React提供的用于在函数组件中添加state的Hook。它接受一个初始state作为参数，并返回一个包含当前state和更新state的函数的数组。可以用来管理一个组件比较简单的一组状态

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
    Count: {count}   
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>    

  );
}

useRef#

useRef is a React Hook that lets you reference a value that’s not needed for rendering.

源自官网的描述，除此之外可以用来管理一个组件比较复杂的一组状态，也可以用来保存一些不需要触发渲染的状态，如DOM元素、定时器等。

与 useState 不同的是 useRef 是同步更新的，且不会触发组件的重新渲染，因此可以用来保存一些不需要渲染的状态，如DOM元素、定时器等。

不过大家似乎更钟爱于使用 useRef 来绑定DOM元素

import { useRef } from 'react';

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}

useReducer#

useReducer是React提供的用于在函数组件中管理复杂state的Hook。它接受一个reducer函数和一个初始state作为参数，并返回一个包含当前state和dispatch函数的数组。可以用来管理一个组件比较复杂的一组状态。如果状态管理相对简单可以使用useReducer，但复杂度上升后建议使用Redux进行管理，不过我个人更喜欢使用react-query。

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
    </div>
  );
}

useEffect#

useEffect hook 用来实现一些副作用，可以在某些变量更新时重绘组件。

默认情况下，每次 state 有改变的时候，都会调用 useEffect 函数。如果需要更改触发的时机， 那么需要使用 useEffect 的第二个参数来指定监听的事件或者说状态。当第二个参数只使用一个空 数组 [] 的时候就只在组件加载的时候调用。数组的变量表示观察这些变量。

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

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  },[count]);

  return (
    <div>
      Count: {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

useContext#

useContext是React提供的用于在函数组件中访问上下文的Hook。它接受一个上下文对象作为参数，并返回该上下文的当前值。可以用来管理全局状态，如主题、语言等。 其实就当作是Vue中的 Provider 和 inject 就差不多了 不过听我在字节的朋友说他们那边还是通过props传递的，所有的state全部放在顶层，看个人的使用习惯吧

import { createContext, useContext } from 'react';

const ThemeContext = createContext(null);

export default function MyApp() {
  return (
    <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>
  );
}