React Hooks 使用详解及实际项目中遇到的坑
React Hooks 使用详解及实际项目中遇到的坑
一. useState
- useState基本使用`
function Example() {
// 声明一个叫 "count" 的 state 变量
const [count, setCount] = useState(0);
return (
You clicked {count} times
);
}
- 这是官方的一个基本使用示例，import引入useState函数
- 调用函数时传入初始化的值
- 函数返回一个数组：一个为初始化的state，一个为更新state的函数
- 最后在其他地方使用state，或者调用更新state的函数
- 注意：更新state的函数会直接替换state，而不是像以前setState会合并新老state
二. 使用push，pop，splice等直接更改数组对象的坑
因为useState的更新函数会直接替换老的state，所以我们在对对象或者数组的state做增删的时候不能像以前直接对数组使用push，pop，splice等直接改变数组的方法
错误示例
import React, { useState } from "react";
function Comment() {
const [counts, setCounts] = useState([1, 2]);
const handleAdd = () => {
const randomCount = Math.round(Math.random()*100)
// 在此地方我们使用push增加一个随机数，程序报错
setCounts(counts.push(randomCount))
}
return (
<div>
{counts.map((count) => (
<div key={count}>{count}</div>
))}
<button onClick={handleAdd}>增加</button>
</div>
);
}
export default Comment
正确的方法应该是使用数组解构生成一个新数组，在数组后面加上我们新增的随机数达成数组新增项，使用filter数组过滤方法来实现我们删除其中项的操作。
数组新增项：
import React, { useState } from "react";
function Comment() {
const [counts, setCounts] = useState([1, 2]);
const handleAdd = () => {
const randomCount = Math.round(Math.random()*100)
// 在此我们用数组结构生成新数组，并在后面加上我们要新增的随机数
setCounts([
...counts,
randomCount
])
}
return (
<div>
{counts.map((count) => (
<div key={count}>{count}</div>
))}
<button onClick={handleAdd}>增加</button>
</div>
);
}
export default Comment;
删除其中项
import React, { useState } from "react";
function Comment() {
const [counts, setCounts] = useState([1, 2, 3, 4]);
const handleDel = () => {
// 使用数组filter方法，过滤删除其中不需要的项
setCounts(counts.filter((count, index) => index !== counts.length - 1))
}
return (
<div>
{counts.map((count) => (
<div key={count}>{count}</div>
))}
<button onClick={handleDel}>删除</button>
</div>
);
}
export default Comment;
此外还有一个方法是类似以前使用redux的reducer中对老的数组对象做深拷贝，然后做增删操作，最后返回
import React, { useState } from "react";
function Comment() {
const [counts, setCounts] = useState([1, 2]);
const handleAdd = () => {
setCounts(counts => {
const randomCount = Math.round(Math.random()*100)
// 简单使用JSON.parse及JSON.stringify深拷贝一个新的数组和对象(实际项目中建议自己写递归深拷贝函数)，然后对其操作返回
let newCounts = JSON.parse(JSON.stringify(counts))
newCounts.push(randomCount)
return newCounts
})
}
return (
<div>
{counts.map((count) => (
<div key={count}>{count}</div>
))}
<button onClick={handleAdd}>增加</button>
</div>
);
}
export default Comment;
- 每次渲染都是独立闭包的坑
当我们先执行异步增加函数(handleSyncAdd)，再执行同步函数(handleAdd)，同步执行完毕再执行异步时，异步函数里面的count为之前执行时闭包里面的值(0)，错误示例：
import React, { useState } from "react";
function Comment() {
const [count, setCount] = useState(0);
const handleAdd = () => setCount(count + 1);
const handleSyncAdd = () => {
setTimeout(() => {
// 获取的是闭包中的state
setCount(count + 1);
}, 1000);
};
return (
<div>
<p>{count}</p>
<button onClick={handleAdd}>增加</button>
<button onClick={handleSyncAdd}>异步增加</button>
</div>
);
}
export default Comment;
这种情况我们要使用回调式函数更新
正确示例：
import React, { useState } from "react";
function Comment() {
const [count, setCount] = useState(0);
const handleAdd = () => setCount(count + 1);
const handleSyncAdd = () => {
setTimeout(() => {
// 改成回调函数更新，每次回调函数执行时会接收之前的state，而不是闭包中的state
setCount(count => count + 1);
}, 1000);
};
return (
<div>
<p>{count}</p>
<button onClick={handleAdd}>增加</button>
<button onClick={handleSyncAdd}>异步增加</button>
</div>
);
}
export default Comment;
二、useEffect
effect（副作用），可以理解为我们在使用类组件时的生命周期函数
useEffect 可以实现我们在类组件中的componentDidMount、ComponentDidUpdate和componentWillUnmount的功能呢，只不过被合并成为一个API
与 componentDidMount 或 componentDidUpdate 不同的是，使用 useEffect 不会阻塞浏览器更新屏幕，这让你的应用看起来响应更快。大多数情况下，effect 不需要同步地执行。在个别情况下（例如测量布局），有单独的 useLayoutEffect 供你使用，其 API 与 useEffect 相同。
- useEffect 实现 componentDidMount及ComponentDidUpdate
直接使用useEffect传入一个回调函数，会在组件初次渲染及每次更新渲染时执行
import React, { useState, useEffect } from 'react'
function Parent() {
const [count, setCount] = useState(0)
const handleAdd = () => setCount(count + 1)
// 使用useEffect传入一个回调函数使用类组件componentDidMount和componentDidUpdate功能
useEffect(() => {
console.log('parent effect');
})
return (
<div>
parent, {count}
<button onClick={handleAdd}>增加</button>
</div>
)
}
export default Parent
- 使用useEffect 实现componentDidMount功能
很多时候我们只需要组件初次加载做一些事，如ajax获取数据等，我们只需要在useEfffect的第二个参数传入一个空数组，这个数组的意思是数组里面监听的值发生更新update时执行effect
import React, { useState, useEffect } from 'react'
function Parent() {
const [count, setCount] = useState(0)
const handleAdd = () => setCount(count + 1)
// 第二个参数传入空数组，不需要根据其他值执行effect，只会在组件初次加载执行
useEffect(() => {
console.log('parent didMount');
}, [])
return (
<div>
parent, {count}
<button onClick={handleAdd}>增加</button>
</div>
)
}
export default Parent
也可以在第二个数组中传入值，表明根据这个值update时执行effect
import React, { useState, useEffect } from 'react'
function Parent() {
const [count, setCount] = useState(0)
const handleAdd = () => setCount(count + 1)
// 第二个参数传入含有count的数组，count更新时执行effect
useEffect(() => {
console.log('count update');
}, [count])
return (
<div>
parent, {count}
<button onClick={handleAdd}>增加</button>
</div>
)
}
export default Parent
3.使用useEffect实现componentWillUnmout功能
在项目中我们需要在组件卸载时清除定时器、监听等，使用useEffect返回一个函数，这个函数会在组件卸载时调用完成componentWillUnmout的功能
import React, { useState, useEffect } from 'react'
function Parent() {
const [count, setCount] = useState(0)
const handleAdd = () => setCount(count + 1)
// 在useEffect中返回一个函数完成componentWillUnmoun的功能
useEffect(() => {
console.log('component mount');
return () => {
console.log('component unmount');
}
})
return (
<div>
parent, {count}
<button onClick={handleAdd}>增加</button>
</div>
)
}
export default Parent
三、useMemo
useMemo可以初略理解为Vue中的计算属性，在依赖的某一属性改变的时候自动执行里面的计算并返回最终的值(并缓存，依赖性改变时才重新计算)，对于性能消耗比较大的一定要使用useMemo不然每次更新都会重新计算。
示例：
import React, { useState, useMemo } from 'react'
function Parent() {
const [count, setCount] = useState(0)
const [price, setPrice] = useState(1)
const handleCountAdd = () => setCount(count + 1)
const handlePriceAdd = () => setPrice(price + 1)
// 使用useMemo在count和price改变时自动计算总价
const all = useMemo(() => count * price, [count, price])
return (
<div>
parent, {count}
<button onClick={handleCountAdd}>增加数量</button>
<button onClick={handlePriceAdd}>增加价格</button>
<p>count: {count}, price: {price} all: {all}</p>
</div>
)
}
export default Parent
四、useCallback
useCallback不同于useMemo的是，useMemo是缓存的值，useCallback是缓存的函数，父组件给子组件传递参数为普通函数时，父组件每次更新子组件都会更新，但是大部分情况子组件更新是没必要的，这时候我们用useCallback来定义函数，并把这个函数传递给子组件，子组件就会根据依赖项再更新了
示例：
import React, { useState, useCallback, useEffect } from 'react';
function Parent() {
const [count, setCount] = useState(1);
const [val, setVal] = useState('');
const callback = useCallback(() => {
return count;
}, [count]);
return <div>
<h4>{count}</h4>
<Child callback={callback}/>
<div>
<button onClick={() => setCount(count + 1)}>+</button>
<input value={val} onChange={event => setVal(event.target.value)}/>
</div>
</div>;
}
export default Parent
function Child({ callback }) {
const [count, setCount] = useState(() => callback());
useEffect(() => {
console.log(123);
setCount(callback());
}, [callback]);
return <div>
{count}
</div>
}
export default memo(Child)
// 千万记得用momo进行包裹，刚开始看csdn上其他人写的貌似没用memo包裹，没用momo还是一直会触发
五、useReducer
useReducer和redux中reducer类似，useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。（如果你熟悉 Redux 的话，就已经知道它如何工作了。）
在某些场景下，useReducer 会比 useState 更适用，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等。并且，使用 useReducer 还能给那些会触发深更新的组件做性能优化，因为你可以向子组件传递 dispatch 而不是回调函数 。
import React, { useReducer } from 'react'
function Parent() {
const reducer = (state, action) => {
switch (action.type) {
case 'add':
return {count: state.count + 1}
case 'reduce':
return {count: state.count - 1}
default:
throw new Error()
}
}
let initialState = 0
const init = (initialState) => ({
count: initialState
})
// 第三个参数为惰性初始化函数，可以用来进行复杂计算返回最终的initialState，如果initialState较简单可以忽略此参数
const [state, dispatch] = useReducer(reducer, initialState, init)
return (
<div>
<p>{state.count}</p>
<button onClick={() => dispatch({type: 'add'})}>add</button>
<button onClick={() => dispatch({type: 'reduce'})}>reduce</button>
</div>
)
}
export default Parent
六、useContext
useContext可以实现类似react-redux插件的功能，上层组件使用createContext创建一个context，并使用
示例：
import React, { useState, createContext, useContext } from "react";
// 使用createContext来创建一个context
const CounterContext = createContext();
function Parent() {
const [count, setCount] = useState(0);
return (
// 父组件使用传递context
<CounterContext.Provider value={{ count, setCount }}>
{count}
<Child />
</CounterContext.Provider>
);
}
function Child() {
// 子组件使用useContext来接收context
const { count, setCount } = useContext(CounterContext);
return (
<div>
<button onClick={() => setCount(count + 1)}>add</button>
</div>
);
}
export default Parent;
七、useLayoutEffect
其使用方法与useEffect一样，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。useEffect为异步，useLayoutEffect为同步，推荐你一开始先用 useEffect，只有当它出问题的时候再尝试使用 useLayoutEffect
八、useRef
React Hooks中用来获取DOM节点
示例：
import React, { useRef } from 'react'
function Parent() {
// 使用useRef创建一个ref，并在标签中绑定到ref属性上
const pRef = useRef(null)
return (
<div>
<p ref={pRef}>content</p>
</div>
)
}
export default Parent
九、自定义Hooks
自定义Hooks可以实现逻辑复用等，在多个组件中可以复用我们自定义的Hooks，并且里面的状态是独立的，自定义Hooks我们一般按照规则以use开头定义
示例：
import React, { useState } from "react";
// 自定义useCount的Hooks
function useCount() {
const [count, setCount] = useState(0);
return { count, setCount };
}
function Parent() {
// 父组件使用，状态独立
const { count, setCount } = useCount()
return (
<div>
<p>parent</p>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>add</button>
<Child />
</div>
);
}
function Child() {
// 子组件使用，状态独立
const { count, setCount } = useCount()
return (
<div>
<p>child</p>
<h1>{count}</h1>
<button onClick={() => setCount(count + 2)}>add</button>
</div>
);
}
export default Parent;