react hooks

React比较常见的hooks都有哪些？

useState()
useEffect()
useContext()
userReducer()
useRef()
useMemo()
useCallback()

setState()

让我们可以在函数组件中，声明和修改state

function Example() {
  const [count, setCount] = useState(initstate);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

useEffect()

允许在函数组件中执行类似生命周期 的操作

参数：1.function 2.[]

[]中为空的时候，类似于生命周期的mounted，在组件渲染后执行一次function
[]中为某个具体的状态时，类似于生命周期中的updata，当状态发生改变的时候，会执行一次function

useContext()

允许在函数组件中访问 React 上下文，简化了组件之间的通信

// 创建上下文
const ThemeContext = React.createContext();

function App() {
  // 提供上下文值
  return (
    <ThemeContext.Provider value="dark">
      <SomeChild />
    </ThemeContext.Provider>
  );
}

<ThemeContext.Provider> 组件提供了一个 dark 的上下文值。此时，所有的子组件都可以通过调用 useContext 来访问这个值

useReducer

允许在函数组件中管理state,并通过actions来更新state

useRef

函数组件中访问一个可变的引用。

useCallback，useMemo

接收两个参数： 1.函数 2.依赖列表依赖列表没有改变时，会执行函数上一次的执行结果，两者的区别主要是useMemo返回函数的执行结果，useCallback返回函数的引用

React hooks总结