React Hooks
1.关于 React Hooks
React 提倡函数式编程，view = fn(props)，函数更灵活，更易拆分，更易测试。尽管函数组件有着许多优势，但是函数组件太简单了，许多功能class组件能轻易实现的功能函数组件很难或者不可能实现。因次，为了让函数组件拥有更强大的能力，Hooks出现了。
关于 Hooks 介绍，无论是官方文档还是网络上都已经有了很多介绍，下面直接对常用的一些 hook 使用进行介绍。
2. State Hook
函数组件是一个纯函数，执行完就销毁了，无法存储state，如果想拥有像 class 组件中的state功能，这时就需要 state hook，把 state 功能 “钩”到纯函数中
2.1 函数组件基本“格式”
import React from 'react'
const HooksT = () => {
return (
<>
<p>这是一个函数组件</p>
</>
)
}
export default HooksT;
2.2 使用useState
下面是在函数组件中实现加一减一效果，在class组件中可以通过state和setState来实现（注意，这里的state和setState是class组件中固定的唯一写法，和函数组件中的不同）
import React, { useState } from 'react'
const HooksT = () => {
/**
* 数组解构，首先要引入：import { useState } from 'react'
* 1.[count, setCount]，这个可以自定义名字，但是一般来说，都是以[值，set值]这种命名方式
* 2.useState(0)中的0是值的初始值，也可以是是字符串，数组，对象等
* 3.如果值为对象，可以这样写：useState({a:'1',b:'2'})
* 4.setCount这是可以对count进行修改的方法，如设置count值为5，则：setCount(5);设置count值加一，则：setCount(count + 1)
* 5.这样的useState可以在函数组件中没有数量限制
*/
const [count, setCount] = useState(0)
return (
<>
<p>这是一个函数组件</p>
<p>{`num:${count}`}</p>
<button onClick={() => { setCount(count + 1) }}>num加1</button>
<button onClick={() => { setCount(count - 1) }}>num减1</button>
</>
)
}
export default HooksT;
3. useEffect
函数组件是一个纯函数，执行完即销毁，自己无法实现生命周期，可以用 useEffect 把生命周期 “钩” 到纯函数中，用 useEffect 模拟组件生命周期
3.1 使用 useEffect
import React, { useState, useEffect } from 'react'
const HooksT = () => {
const [count, setCount] = useState(0)
/**
* 1.模拟class组件的 DidMound 和 DidUpdate 生命周期
* 当界面第一次渲染完成，或者更新时重新渲染后都会执行
*/
useEffect(() => {
console.log('当界面第一次渲染完成，或者更新时重新渲染后都会执行')
})
/**
* 2.仅模拟class组件的 DidMound 生命周期（在useEffect的第二个参数加一个空数组）
* 当界面第一次渲染完成执行，更新时不执行
*/
useEffect(() => {
console.log('当界面第一次渲染完成执行，更新时不执行')
}, [])
/**
* 3.仅模拟class组件的 DidUpdate 生命周期（在useEffect的第二个参数加一个数组，数组里放入需要监听更新的值）
* 当界面第一次渲染完成执行，更新时不执行
* 注意1：这里useEffect中第二个参数其实是一种依赖关系，和第一点中的不同，第一点在useEffect中不加第二个参数时
* 无论什么数据更新都会执行； 而此处增加 [count] 后，仅仅当count更新时才会执行，除此之外的更新不会执行。
* 注意2：数组中可以放多个依赖的值，其中任何一个更新都会执行
*/
useEffect(() => {
console.log('当界面第一次渲染完成执行，更新时不执行')
}, [count])
/**
* 4.模拟class组件的 WillUnMount ，在销毁时执行，这一步谨慎使用
* 在定义一些定时任务和全局变量时，一定要返回一个函数去进行销毁，否则会
* 造成内存泄漏
*/
useEffect(() => {
console.log('当界面销毁时执行')
let timerId = window.setInterval(() => {
console.log(timerId)
})
// 返回一个函数，模拟一个函数
// 当不return时，定时任务其实不会结束，为了完全销毁，需要增加return，并返回一个函数
return () => {
window.clearInterval(timerId)
}
}, [])
return (
<>
<p>这是一个函数组件</p>
<p>{`num:${count}`}</p>
<button onClick={() => { setCount(count + 1) }}>num加1</button>
<button onClick={() => { setCount(count - 1) }}>num减1</button>
</>
)
}
export default HooksT;
3.2 useEffect 使用总结
1.同时模拟 componentDidMount 和 componentDidUpdate — useEffect无依赖
2.模拟 componentDidMount - useEffect 依赖 []
3.模拟 componentDidUpdate - useEffect依赖[a, b]
4.模拟 componentWillUnmount - useEffect 中返回一个函数，依赖 []
3.3 useEffect 让纯函数有了副作用
1.默认情况下，执行纯函数，输入参数，返回结果，无副作用
2.所谓副作用，就是对函数之外造成了影响，如设置全局定时任务
3.而某些时候需要副作用，则可以用 useEffect “钩” 到纯函数
3.4使用 useEffect 模拟 WillUnMount 时的注意事项
注意，模拟 WillUnMount ，但不完全相等
useEffect 中返回函数 fn：
1.useEffect 依赖 []，组件销毁时执行fn，等于 WillUnMount，
2.useEffect 无依赖或者依赖 [a, b] ，组件更新时会执行 fn，
4. 其他 Hooks
针对其他一些不常用到的 hooks 进行简单介绍：
1.useRef
2.useContext
3.useReducer
4.useMemo
5.useCallback
4.1 useRef
1.useRef常用于获取 DOM 节点
import React, { useEffect, useRef } from 'react'
const HooksT = () => {
const btnRef = useRef(null)
useEffect(() => {
console.log(btnRef.current) // btnRef所绑定的 DOM 节点
}, [])
return (
<>
<p>这是一个函数组件</p>
<button ref={btnRef}>click</button>
</>
)
}
export default HooksT;
2.可用于保存一些其他数据
// 定义一个ref
const ref = useRef()
// 可以对ref进行一个赋值操作
ref.current = 100;
4.2 useContext
提供了更加高级的一种组件中传递值的方式，不再需要一层一层的向下传递，而是可以隔层传递。
import React, { useContext } from 'react'
// 主题颜色
const themes = {
light: {
foreground: '#000',
background: '#eee',
},
dark: {
foreground: '#fff',
background: '#222',
},
}
// 创建 Context
const ThemeContext = React.createContext(themes.light)
/**
* 下面定义三个组件演示隔层传递
*/
const ThemeButton = () => {
const theme = useContext(ThemeContext)
return (
<button
style={{background: theme.background, color: theme.foreground}}
>
hello world
</button>
)
}
const Toolbar = () => {
return (
<>
<ThemeButton></ThemeButton>
</>
)
}
const HooksT = () => {
return (
<>
{/* ThemeContext.Provider */}
<ThemeContext.Provider value={themes.dark}>
<Toolbar></Toolbar>
</ThemeContext.Provider>
</>
)
}
export default HooksT;
我们可以不再一层一层的去传递某些值，而是可以统一的在最顶层组件传入，然后可以在下面任何一个组件内传递，从而减少了多层组件传递的麻烦，只需要在顶层做一次修改，就能修改整个大组件，例如做主题管理。而无需再引用 Redux
4.3 useReducer
useRedecer 和 useState很像，当我们想要实现更加复杂的修改值的操作，可以使用 reducer
import React, { useReducer } from 'react'
// 定义初始值
const initialSatate = {
count: 0,
}
// 定义修改规则
const reducer = (state, action) => {
switch(action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
return false;
}
}
const HooksT = () => {
// 创建一个 reducer ，很像useState
const [state, dispatch] = useReducer(reducer, initialSatate)
return (
<>
count: {state.count}
<button onClick={() => {dispatch({type: 'increment'})}}>increment</button>
<button onClick={() => {dispatch({type: 'decrement'})}}>decrement</button>
</>
)
}
export default HooksT;
useRedecer 和 redux 区别：
1.useReducer 是 useState 的代替方案，用于 state 的复杂变化
2.useReducer 是单个组件的状态管理，组件间通讯还是需要 props
3.redux 是全局的状态管理，多组件共享数据
因此，useReducer 本质上只是 useState 的升级版，并不能代替 redux
4.4 useMemo
在react中，默认情况下当父组件重新渲染时，子组件也会无条件重新渲染，当遇到性能瓶颈时，可以考虑使用 useMemo 做性能优化
1.首先要使用memo将子组件封装起来
import React, { memo } from 'react
// 通过memo将子组件封装起来，即作为参数传入memo()中
const Child = memo((info) => {
console.log("子组件渲染了")
return (
<p>子组件</p>
)
})
2.在父组件中使用 useMemo 对传入子组件的数据进行一个依赖判断
import React, { useMemo } from 'react
import Child from 'path'
const Parent = () => {
// 通过 useMemo 来封装需要传入子组件的数据，即进行缓存数据
// 数据通过return来返回
cosnt info = useMemo(() = {
return {
name: 'jack',
age: 18
}
},[name]) // 依赖name，只有name变化时子组件才会重新渲染
console.log("父组件渲染了")
return (
<>
<p>父组件</p>
<Child info={info} />
</>
)
3. useMemo 使用总结
1.React 默认在父组件更新情况下会无条件更新子组件
2.class 组件使用SCU和PureComponent 做优化
3.Hooks 中使用 useMemo做优化
4.上面2，3点的优化原理是一样的，都是通过对 props 的一个浅层对比进行优化
4.5 useCallback
useCallback 是对 useMemo 的一个补充，针对父组件传入函数时进行缓存
只需要在 4.4 中 Parent 组件中增加对函数的缓存即可:
import React, { memo, useMemo, useCallback } from 'react
import Child from 'path'
// 在这增加传入的 onChange 函数
const Child = memo(({info, onChange}) => {
console.log("子组件渲染了")
return (
<p>子组件</p>
<button onClick={() => {onChange}>change</button>
)
})
const Parent = () => {
// 通过 useMemo 来封装需要传入子组件的数据
cosnt info = useMemo(() = {
return {
name: 'jack',
age: 18
}
},[name])
// 将要传入子组件的函数作为参数传入 useCallback 中即可
const onChange = useCallback(() => {
console.log("useCallback")
})
console.log("父组件渲染了")
return (
<>
<p>父组件</p>
<Child info={info} onChange={onChange} />
</>
)
}
5.自定义Hook
5.1 通过定义一个axios相关的hook来演示自定义hook
安装Axios： yarn add axios --save
import { useState, useEffect } from 'react';
import axios from 'axios';
/**
* 封装 axios 自定义hook发送请求
*/
const useAxios = (url) => {
const [loading, setLoading] = useState(false)
const [data, setData] = useState()
const [error, setError] = useState()
useEffect(() => {
// 表示开始请求
setLoading(true)
// 利用 axios 发送网络请求
axios.get(url)
.then(res => {
setData(res)
})
.catch(err => {
setError(err)
})
.finally(() => {
setLoading(false)
})
}, [url])
return [loading, data, error]
}
export default useAxios;
小结：
1.本质是一个函数，命名以 use 开头
2.内部能正常使用 useState, useEffect 或者其他 Hooks
3.自定义返回结果，格式不限
5.2 第三方Hooks：
https://ahooks.js.org/zh-CN/docs/getting-started
6.Hooks 使用规范
6.1 命名规范
自定义 hooks 使用 use 开头的命名，非 hooks 尽量避免使用 use 开头命名
6.2 Hooks使用规范
1.只能用于 React 函数组件和自定义 Hook 中，其他地方不可以
2.只能用于顶层代码，不能在循环、判断(if)中使用 Hooks
3.eslint 插件 eslint-plugin-react-hook 可以检测使用规范
6.3 关于Hooks的调用顺序
函数组件，本质是一个函数，执行完即销毁；
无论是组件初始化还是组件更新，都会重新去执行这个函数（表示从销毁到再一次初始化）；这一点和class组件不同，因为class组件会有组件实例，只要组件不被主动销毁，组件更新是不会导致calss组件销毁。
1.对于 useState
/**
* render：初始化 state 的值
* re-render: 只恢复为第一次初始化的 state 的值，不会再重新设置新的值
* 只能通过 setState 修改
*/
const [state, useState] = useState("name")
之所以 hooks 能到正确获取到对应的值（多个state能一一对应），是因为 hooks 是严格按顺序读取的，如果有 hooks 在 if 内，当 if 不通过时，if 内的 hooks 就不会执行，也就会导致剩下的hooks 全部错乱。
2.对于 useEffect
/**
* render：添加 effect 函数
* re-render：替换 effect 函数，useEffect内部的匿名函数也会重新定义
*/
useEffect(() => {
console.log("useEffect")
})
同样，当在 if 中使用 useEffect 时，因为执行的不确定性，也会导致前后的 useEffect 执行错乱
####hooks严格依赖于执行顺序，绝对不能在循环，判断中使用
7.React Hooks 组件逻辑复用
7.1 class组件的逻辑复用
1.Mixins 已经废弃
2.高阶组件HOC
3.Render Prop
7.2 使用 Hooks 做组件逻辑复用
1.定义一个公共的自定义hooks
2.直接在需要的地方使用即可
8.React Hooks 注意事项
1.useState 初始化值，只有第一次有效
import React, { memo, useMemo, useCallback } from 'react
import Child from 'path'
const Child = memo(({info}) => {
const [nameC, setNameC] = useState(info.name)
return (
<p>子组件</p>
<p>传进来 props 的 name1：{info.name}</p>
<p>初始化 nameC 的name2：{nameC}</p>
)
})
const Parent = () => {
const [name, setName] = useState("name")
const info = {
name
}
return (
<>
<p>父组件</p>
<Child info={info} />
<button onClick={() => {setName("nameChange")}}>change</button>
</>
)
在上面的演示代码中，当第一次运行后：name1 和 name2 值都是 ”name“，而当点击按钮修改传入的info时，name1 变成了 ”nameChange“，而name2 仍然时 ”name“
由此可以印证，useState 只有在初次渲染时会给 nameC 初始值，而在后面即使改变传入的值，useState 也不会再重新设置新的值，只能通过 setNameC来修改
2.useEffect 内部不能修改 state 的情况
使用 useEffect 时，当依赖为 [] 时，re-render 是不会重新执行 effect 函数的，这样就会导致在 useEffect 中的一些 set值 的操作没有效果
当没有依赖，或者依赖 [a, b] 中会 a 或 b 会改变的情况时，re-render 会重新执行函数，这样状态又不能保存下来
这时可以通过useRef来保存一个状态值
解决方案：
// 可以使用 useRef
// 通过 useRef 为 countRef 赋值为 0
const countRef = useRef(0)
// 然后可以进行修改 countRef , countRef.current 就是它的值
++countRef.current
3.useEffect 可能出现死循环
当 useEffect 的依赖里面有 {} , [] 引用类型时，会导致死循环
这是因为，react 的 useEffect 判断依赖是否变化是通过 Object.is() 这个函数，而 Object.is({}, {}) 和 Object.is([], []) 都会返回false，则 useEffect 判断为依赖变化，就会执行 effect 函数，这样就会导致死循环的发生
后续
1.webpack的完整配置流程，帮助掌握基本配置和部分高级配置
2.JavaScript版数据结构与算法，着重于实战练习
3.dva的介绍与使用
小伙伴们有需要想让作者先整理出来的可以留言评论，我会参考大家的意见来选择