简单了解 React Hook

156 阅读1分钟

简单了解 React Hook

image.png

什么是 hook ? ? ?

hook的英文中是钩子

在react中是消息处理的一种方法,用来监视指定程序,也称为钩子机制。我们可以在代码中设置一个窗口来监视指定的程序,这就是钩子机制

组件尽量写成纯函数,如果需要外部功能和副作用,就用钩子把外部代码勾进来,React Hook 就是那些钩子 React 和 React Hook的区别就在与 React有this 声明周期和状态state 然而 React Hook 并没有 并且命名必须要以set开头 钩子use后首字母必须是大写

React Hook 钩子分为哪几种

基础钩子: useState useEffect useContext

额外钩子:useReducer useCallback useMemo useRef useImperativeHandle useLayoutEffect useDebugValue

常用钩子:useState useEffect useContext useReducer

userState 简介:【维护状态】

useState 例子:

返回一个 count,以及更新 count 的函数

image.png

image.png

useEffect 简介:【副作用操作】

useEffect 例子:

函数需返回一个清除函数

image.png

image.png

useContext 简介:【共享状态】

useContext 例子:

接收一个 context 对象(React.createContext 的返回值)并返回该 context 的当前值

image.png

Toolbar组件

image.png

useContext 简介:【类似redux】

useReducer 例子:

它接收一个形如 (state, action) => newState 的 reducer,并返回当前的 state 以及与其配套的 dispatch 方法

image.png