1.概述

React官方网站原文：Hooks 是一项新功能提案，可让您在不编写类的情况下使用 state(状态) 和其他 React 功能。

我总结了下使用Hooks的理由：

1.解决class中的代码层级复杂。

2.类的生命周期复杂。

3.无状态组件，因工作需求要求改成有状态组件，改成class组件成本比较高。

2.useState(保存组件状态)

const [state, setState] = useState(initialState)//改语法为ES6的结构化赋值。

state存放数据，setState改变数据的方法，initialState为state初始话的值。

补充说明useState还是记忆组件，只在创建该组件的时候初始化一次，这样可保证每次修改的值可以保存起来。示例代码做一个简单的修改名称，逻辑也比较简单直接上代码：

import React, { useState } from 'react'export default function App() {const [name,setName]=useState('张三')return (<div>App-{name}<button onClick={()=>{setName('李四') //把name张三修改成了李四console.log(name);}}>修改</button></div>)
}

3.useEffect(处理副作用)

先来了解下什么是副作用，副作用是指函数或者表达式的行为依赖于外部世界。

语法： useEffect(()=>{},[]) ；两个参数：参数一会点函数把要处理的逻辑放在里面，比如网络请求或者逻辑处理。参数二数组：依赖的状态;空数组,表示不依赖，如果传入空数组则表示只会执行一次，如果传入依赖状态则依赖状态的只改变函数就会执行一遍。

补充说明：useEffect 是会在整个页面渲染完才会调用的，类似于类组件的生命周期，但不完全相同。示例代码做了个简单的网络请求：

import React, { useEffect, useState } from 'react'
import axios from 'axios'export default function App() {const [list, setList] = useState([])useEffect(() => {axios({method: 'get',url: 'move.json'}).then(res => {console.log(res.data.data);setList(res.data.data.films)})},[])//传空数组，表示不依赖任何东西return (<div><ul>{list.map(item => <li key={item.filmId}>{item.name}</li>)}</ul></div>)
}

useEffect的清除方法，比如说你在useEffect回调方法里面中设置里定时器，当组件消失的时候应该销毁掉。上代码

import React, { useEffect, useState } from 'react'export default function App() {const [show, setShow] = useState(true)return (<div><button onClick={() => {setShow(false)}}>销毁</button>{show ? <Child></Child> : ""}</div>)
}
function Child() {let timer = nullconst [name, setName] = useState('张三')useEffect(() => {console.log(name);timer = setInterval(() => {console.log('定时器');}, 1000)//销毁是执行一次，依赖更新一次也会执行一次。return () => {clearInterval(timer)timer = nullconsole.log('xiaohui');}}, [name])return (<div><button onClick={() => {setName('李四')}}>Child</button></div>)
}

4.useCallback(记忆函数)

useCallback(()=>{},[]) ；该方法返回的是一个函数方法，参数一：回调函数，参数二：依赖的状态;空数组,表示不依赖，如果传入空数组则表示只会执行一次，如果传入依赖状态则依赖状态的只改变函数就会执行一遍返回更新后的函数。

import React, { useCallback, useState } from 'react'export default function App() {const [name,setName]=useState('张三')let sum=0;console.log(sum);const handleAdd=useCallback(()=>{console.log(sum++);setName('lisi'+sum)},[])//只有name改变后， 这个函数才会重新声明一次，//如果传入空数组， 那么就是第一次创建后就被缓存， 如果name后期改变了,拿到的还是老的name。//如果不传第二个参数，每次都会重新声明一次，拿到的就是最新的namereturn (<div>app-{name}<button onClick={ handleAdd}>anniu </button></div>)
}

5.useMemo

useMemo和useCallback用法很类似，useCallback 不会执行第一个参数函数，而是将它返回给你，而 useMemo 会执行第一个函数并且将函数执行结果返回给你。

直接上代码

import React, { useMemo, useState } from 'react'export default function App() {const [name, setName] = useState('xiaoming')const handleName = useMemo(() => name.toLocaleUpperCase(), [name])return (<div>App-{handleName}<button onClick={()=>{setName('lisi')}}>gaibian</button></div>)
}

6.useRef

useRef 绑定dom或者组件，也可以保存值，useRef也具有记忆功能。

直接上代码

import React, { useRef } from 'react'export default function App() {//绑定dom或者组件const ref = useRef()//useref保存值const myCount=useRef(0)return (<div><input ref={ref}></input><button onClick={() => {console.log(ref.current.value);ref.current.value = '';myCount.current++;console.log(myCount.current);}}>按钮</button></div>)
}

7.useContext

父组件给子组件传值。比较简单直接上代码。

import React, { useContext } from 'react'
const Context =React.createContext()
export default function App() {return (<Context.Provider value={{name:'lisi'}}><div><Ietm></Ietm></div></Context.Provider>)
}function Ietm(){const value=useContext(Context)return (<div>ietm-{value.name}</div>)
}

8.useReducer

语法：const [state, dispatch] = useReducer(reducer, initialState);

useState的替代方案。接受类型为 (state, action) => newState 的reducer，并返回与 dispatch 方法配对的当前状态。（如果你熟悉Redux，你已经知道它是如何工作的。），主要把修改状态的方法抽取出来。

useReducer一步都是结合着useContext使用，可以减少代码层级。直接上代码

import React, { useContext, useReducer } from 'react'
//preState 老状态  action改变的类型
function reducer(preState, action) {let newSate = { ...preState };switch (action.type) {case "add":newSate.count++return newSate;case "sub":newSate.count--return newSate;}return preState;}
const initialState = {count: 0
}
const Context = React.createContext()
export default function App() {const [state, dispatch] = useReducer(reducer, initialState)return (<Context.Provider value={{ state, dispatch }}><div><Child></Child></div></Context.Provider>)
}
function Child() {const { state, dispatch } = useContext(Context)return (<div>计数器：{state.count}<div><buttononClick={() => {dispatch({ type: "add" })}}>+</button><buttononClick={() => {dispatch({ type: "sub" })}}>-</button></div></div>)
}

9.构建你自己的 Hooks

必须以“use”开头。这个约定非常重要。不遵循的话，由于无法判断某个函数是否包含对其内部 Hooks的调用，React 将无法自动检查你的 Hook 是否违反了 Hook 的规则。

当我们想要在两个 JavaScript 函数之间共享逻辑时，我们会将共享逻辑提取到第三个函数。组件和 Hook 都是函数，所以这种办法也适用于它们！上代码

import React, { useEffect, useState } from 'react'
function useToLocaleUpperCase(text) {const [name, setName] = useState(text)useEffect(() => {setName(name.toLocaleUpperCase())}, [])return { name };
}
export default function App() {const { name } = useToLocaleUpperCase('zhansan')return (<div>App-{name}<Child></Child></div>)
}
function Child() {const { name } = useToLocaleUpperCase('lisi')return (<div>App-{name}</div>)
}

官方地址：React 入门 – React 中文文档 v16.6.3 (html.cn)

希望这篇文章对正在学习React的你有所帮助。

React中的Hooks详解相关推荐

js路由在php上面使用,React中路由使用详解
这次给大家带来React中路由使用详解,React中路由使用的注意事项有哪些,下面就是实战案例,一起来看一下. 路由通过 URL 映射到对应的功能实现,React 的路由使用要先引入 react-r ...
React中使用Vditor详解（自定义图片）
安装 npm install vditor -s 引用导入依赖包 import Vditor from "vditor"; 导入样式 import "vditor/sr ...
React中setState方法详解
一.为什么要使用 setState 方法,如何用? 在 React 中,组件分为有状态组件和无状态组件,有状态组件就是能够定义 state 的组件,比如类组件,无状态组件反之,比如函数组件.st ...
react中的setState详解
1.setState更新状态的2种写法 (1). setState(stateChange, [callback])------对象式的setState 1.stateChange为状态改变对象( ...
react中的state详解
state 理解:state是组件对象最重要的属性,值是对象(可以包含多个key-value组合) state中的值可以修改,修改的唯一方法是调用this.setState,每次修改以后,自动调用 t ...
webpack搭建php服务器,webpack搭建react开发环境步骤详解
这次给大家带来webpack搭建react开发环境步骤详解,webpack搭建react开发环境的注意事项有哪些,下面就是实战案例,一起来看一下.mkdir react-redux && ...
Android 中malloc_debug 原理详解
版本基于:Android R 关联博文: Android 中malloc_debug 使用详解 0. 前言最近上项目中遇到一个native 可能内存泄漏的问题,曾考虑使用HWASAN,但这个工具是针 ...
ALSA声卡驱动中的DAPM详解之四：在驱动程序中初始化并注册widget和route
前几篇文章我们从dapm的数据结构入手,了解了代表音频控件的widget,代表连接路径的route以及用于连接两个widget的path.之前都是一些概念的讲解以及对数据结构中各个字段的说明,从本章开 ...
Asp.net中GridView使用详解(引)【转】
Asp.net中GridView使用详解(引) GridView无代码分页排序 GridView选中,编辑,取消,删除 GridView正反双向排序 GridView和下拉菜单DropDownList ...

React中的Hooks详解