React Hooks 是 React v16.8 中新添加的特性，这个特性主要是对函数型组件的功能进行增强，让函数型组件可以做类组件做的事情。
这个篇文章主要包含三个部分：

1. 什么是react hooks
   
   1. react hooks 主要包含哪些功能，要解决哪些问题。
2. react hooks 的使用
   
   1. react hooks 到底是什么
   2. 这些函数要在什么场景下使用
3. 【React Hooks】自定义 react hooks
   
   1. 通过自己定义函数，如何将组件内部的公共逻辑提取出来

1. 什么是 React Hooks 1.react hooks 功能介绍
对函数组件进行增强，让函数组件可以储存状态，可以拥有处理副作用的能力，让开发者在不使用类组件的情况下，实现相同的功能。

副作用：在组件中不是将数据转换为视图的代码被称为副作用。
比如：获取DOM元素、为DOM元素添加事件、设置定时器以及发送Ajax请求等，这都属于副作用。

2.类组件的不足

1. 缺少逻辑复用机制
   
   1. 为了复用逻辑增加无实际渲染效果的组件，增加了组件层级显示十分臃肿，增加了调试的难度以及运行效率的降低。
2. 类组件经常会变得很复杂难以维护
   
   1. 将一组相干的业务逻辑拆分到多个生命周期函数中，例如：1.在组件挂载时要做些什么 2.更新完成之后要做些什么
   2. 在一个生命周期函数内存在多个不相干的业务逻辑
   3. 类成员的方法不能保证this指向的正确性，例如：在声明一些函数要使用bind进行绑定，或者嵌套函数来解决this指向的问题

2. React Hooks 的使用 Hooks 意为钩子，React Hooks 就是一堆钩子函数，React 通过这些钩子函数对函数组型件进行增强，不同的钩子函数提供了不同的功能。
react hooks 提供的钩子函数有：

• useState()
• useEffect()
• useReducer()
• useRef()
• useCallback()
• useContext()
• useMemo()

1.useState
用于为函数组件引入状态，在现有的认知里面，在函数执行完毕之后该变量就会被释放掉，所以函数型组件原本是不可以保存组件数据的，useState 用来解决这个问题

import React, {useState} from 'react'; function App () { // useState 返回一个数组，count: 状态 setCount: 设置状态的方法 const [count, setCount] = useState(0); return {count} setCount(count => count + 1)}>+1}

使用 setCount 方法设置 count 的值后，组件会被重新渲染，而渲染后count的状态还在。

• useState 使用细节
  
  1. 接收唯一的参数即状态初始值，初始值可以是任意数据类型。
  2. 返回为数组，数组中存储状态值和更新状态值的方法，方法名称约定以set开头，后面加上状态的名称。
  3. useState 方法可以被调用多次，用以保存不同的状态值。
  4. 参数可以是一个函数，函数返回什么初始状态值就是什么，函数只会被调用一次，用在初始值是动态值的情况下。

import React, {useState} from 'react'; function UseState (props) { console.log('渲染即执行'); // 传入一个方法 const [count, setCount] = useState(() => { console.log('这个位置只会被执行一次'); return props.count || 0; }); // 可以接收任意数据类型为状态值 const [person, setPerson] = useState({name: 'howie', age: 20}); return {count} {person.name} {person.age} setCount(count + 1)}>plus setPerson(() => ({...person, name: 'zs'}))}>change person}export default UseState;

• 设置状态的细节
  
  1. 设置状态值的方法的参数，可以是一个值也可以是一个函数
  2. 设置状态值的方法本身是异步的

import React, {useState} from 'react'; function UseState (props) { const [count, setCount] = useState(() => { return props.count || 0; }); function handleSetCount () { // 传递回调函数设置状态，setCount 是异步的 setCount(count => { return count + 1; // 这样设置title就会变成同步的 // const newCount = count + 1; // document.title = newCount; // 1 // return newCount; }); document.title = count; // 0 }return {count} plus}export default UseState;

2.useReducer
useReducer是另一种让函数组件保存状态的方式。

import React, {useReducer} from 'react'; function UseReducer () {function reducer(state, action) { switch (action.type) { case 'increment': return state + 1; case 'decrement': return state - 1; default: return state; } }const [count, dispatch] = useReducer(reducer, 0); return useReducer
dispatch({type: 'increment'})}>+ {count} dispatch({type: 'decrement'})}>-}export default UseReducer;

相较于 useState 的优势在于，如果子组件要修改父组件中的数据时，可以直接将父组件中的dispatch方法传递给子组件，
然后根据不同的类型，做不同的处理。
3.useContext
在跨组件层级获取数据时简化获取数据的代码。

• 跨层级获取数据
  

  import React, {createContext} from 'react'; const countContext = createContext(); function UseContext () { return UseContext }function Foo () { return { value => { return {value} } } }export default UseContext;

  
  
• 简化代码
  

  import React, {createContext, useContext} from 'react'; const countContext = createContext(); function UseContext () { return UseContext }function Foo () { const value = https://www.it610.com/article/useContext(countContext); return {value} }export default UseContext;

  
  

4.useEffect
让函数组件拥有处理副作用的能力，类似生命周期函数。
1. useEffect 执行时机

1. useEffect(() => {}): componentDidMount、componentDidUpdate
2. useEffect(() => {}, []): componentDidMount
3. useEffect(() => () => {}): componentWillUnMount

可以把 useEffect 看做 componentDidMount、componentDidUpdate、componentWillUnMount 这三个生命周期函数的组合。

import React, {useEffect, useState} from "react"; function UseEffect() {const [count, setCount] = useState(0); // 组件挂载和组件更新时执行 // useEffect(() => { //console.log('run') // }); // 组件挂载时执行 // useEffect(() => { //console.log('run') // }, []); // 清除上一个 effect useEffect(() => { console.log('1') return () => { console.log('run'); } }); return useEffect {count} setCount(count + 1)}>plus}export default UseEffect;

2. useEffect 使用方式

1. 为window对象添加滚动事件
2. 设置定时器让count数值每隔一秒增加1

import React, {useEffect, useState} from "react"; import {root} from "../index"; function UseEffect() {function onScroll() { console.log('页面滚动了'); }// 挂载之后绑定事件 useEffect(() => { window.addEventListener('scroll', onScroll) return () => { console.log('run') window.removeEventListener('scroll', onScroll); } }, []); const [count, setCount] = useState(0); useEffect(() => { const timer = setInterval(() => { setCount(count => count + 1); }, 1000) return () => { clearInterval(timer); } }, [])useEffect(() => () => { console.log('卸载组件'); })return (useEffect {count} root.unmount()}>卸载组件) }export default UseEffect;

3. useEffect 解决的问题

1. 按照用途将代码进行分类（将一组相干的业务逻辑归置到了同一个副作用函数中）
2. 简化重复代码，是组件内部代码更加清晰（在类组件中通常componentDidMount和componentDidUpdate中的代码是一样的）

4. useEffect 数据监测 只有指定数据发生变化的时候才会去触发 effect

const [count, setCount] = useState(0); const [num, setNum] = useState(0); // 只有count改变的时候才会执行 useEffect(() => { document.title = count; }, [count]); return (useEffect {count} {num} setCount(count => count + 1)}>addCount setNum(count => count + 1)}>addNum)

5.useEffect 结合异步函数 useEffect中的参数函数不能是异步函数，因为useEffect函数要返回清理资源的函数，如果是异步函数就变成了返回Promise

useEffect(() => { // 编写一个立即执行函数 (async () => { await axios.get() })(); })

6.useMemo
useMemo 的行为类似 Vue 中的计算属性，可以监测某一个值的变化，根据变化值计算新值。
useMemo 会缓存计算结果，如果监测值没有发生变化，即使组件重新渲染也不会重新计算，此行为可以有助于避免在每个渲染上进行昂贵的计算。

import {useMemo} from 'react'; // 挂载完成后默认执行一次，如果监听的count发生了变化则再次执行 const result = useMemo(() => { return result; }, [count]);

7.使用memo方法提高组件性能
性能优化，如果本组件中的数据没有发生任何变化，就阻止组件进行更新。类似类组件中的 PureComponent 和 shouldComponentUpdate

import React, {memo, useState} from "react"; function Memo () { const [count, setCount] = useState(0); return {count} setCount(count => count + 1)}>+1 }// 每当 count + 1 Foo即使没有改变也会被重新渲染 // function Foo() { //console.log('重新渲染'); //return Foo组件 // }// 这样 Memo 组件更新就不会连带 Foo 更新 const Foo = memo(() => { console.log('重新渲染'); return Foo组件 })// 当Memo没有发生数据变化且父组件发生了变化，Memo组件不会被更新 export default memo(Memo);

8.useCallback
性能优化，缓存函数，使组件重新渲染时得到相同的函数实例。
Foo 子组件被重新渲染

import React, {useCallback, useState, memo} from 'react'; function UseCallback() { const [count, setCount] = useState(0); function resetCount () { setCount(0); }return {count} setCount(count => count + 1)}>+1 }const Foo = memo((props) => { /** * 当 count 发生改变时会更新父组件，父组件中的 resetCount 函数被重新定义 * 这时的 resetCount 与 Foo props中的 resetCount 实例已经发生了改变，所以 Foo 会被重新渲染 */ console.log('重新渲染'); return Foo组件 resetCount})export default UseCallback;

// 使用 useCallback 优化 resetCount

const resetCount = useCallback(() => setCount(0), [setCount]);

9.useRef
1.获取DOM对象

import React, {useRef} from 'react'; function UseRef () { const userName = useRef(); const handler = () => console.log(userName.current); return UseRef }export default UseRef;

2.useRef保存数据 即使组件重新渲染，保存的数据仍然还在，保存的数据被更改不会触发组件渲染（跨组件周期）。

// 保存数据 const [count, setCount] = useState(0); // 即使组件更新并不会重置，所以 stopCount 可以拿到 timer let timer = useRef(); useEffect(() => { timer.current = setInterval(() => { setCount(count => count + 1); }, 1000); }, [])const stopCount = () => { clearInterval(timer.current); }return useRef {count} stop

10.自定义hook

• 自定义hook是标准的封装和共享逻辑的方式
• 自定义hook是一个函数，其名称以use开头
• 自定义hook其实就是逻辑和内置hook的组合

import React, {useEffect, useState} from 'react'; import axios from 'axios'; /** * 当前组件需要再组件挂载完成之后，获取文章数据 * 假设获取文章数据的请求是共享逻辑，尝试把它写到自定义hook当中 */// 创建自定义hook function useGetEssay () {const [essay, setEssay] = useState({}); useEffect(() => { axios.get('https://www.fastmock.site/mock/eefbb8ce7302645510629510865adb64/api/essay') .then(res => setEssay(res.data)); }, []); return [essay, setEssay]; }function CustomizationHook () {const [essay, setEssay] = useGetEssay(null); return CustomizationHook{essay.title}
{essay.content}}export default CustomizationHook;

2. 提取表单中的常用逻辑
   

   function useUpdateInput(initialValue) { const [value, setValue] = useState(initialValue); return { value, onChange: e => setValue(value => value = https://www.it610.com/article/e.target.value) } }function CustomizationHook() { const userNameInput = useUpdateInput(''); const passwordInput = useUpdateInput(''); const submitForm = e => { e.preventDefault(); console.log(userNameInput.value, passwordInput.value) }return

   {/*为了绑定数据，每个表单元素都需要设置 value 和 onChange，这就属于共享逻辑*/}

   }

   
   

推荐阅读

• 

  需求分析方法,什么是一种面向数据流的需求分析方法
• 

  小学学霸冲a卷二年级上册数学试卷 二年级上册数学试卷可打印
• 

  疫情期间,大家都用的什么牌子的口罩呀？求推荐？
• 

  在美国大片中,一个人黑进国家安全网窃取机密,几分钟后FBI找上门来,现实中可能吗？
• 

  羽毛球反手接杀慢动作 羽毛球如何接杀教学视频，羽毛球如何接杀挑后场
• 

  cad怎么输入角度符号详细介绍
• 

  php星星塔
• 

  简单好玩的C语言编程代码，很6很好玩的短小c语言程序
• 

  兰州水上巴士现在还开吗今天 兰州水上巴士现在还开吗
• 

  平面制图作品分析,平面广告设计作品分析
• 

  二类银行卡能改一类吗
• 

  柳暗花名又一村的前一句 柳暗花名又一村原文及翻译
• 

  深海鱼可以生吃吗
• 

  广告正文分析,广告分析案例
• 

  【给木木的信】2018/09|【给木木的信】2018/09 决定
• 

  棕榈叶的功效与作用 药用价值
• 

  资助卡是什么卡
• 

  白芍的功效与作用及食用方法禁忌 白芍的功效与作用及食用方法禁忌
• 

  阿司匹林|阿司匹林肠溶片能和降压药在早上一起服吗？有哪些注意事项？
• 

  蛋挞液的牛奶可以用水代替吗