react-hook的例子仓库。具体见src文件夹。
请配合react-hook笔记食用
[toc]
- 只能在最高层级调用hooks,不能在循环, 条件或者嵌套方法中调用。
- 只能在函数组件中调用Hooks, 不能在普通的函数方法中调用(自定义Hook除外)。
hooks是要能够重用stateful logic,即控制state的逻辑,而不是state本身。实际上,任何对hook的调用都会有完全独立的state,所以你甚至可以在一个组件中重用相同的组件Hook
建议根据哪些值是一起变化的,将state拆分成多个小的state。而不是一上来就设一个大的复杂state。
const [state, setState] = useState(initialState)
setState(currentState)
setState((prevState) => f(prevState))
setState(produce(draft => {draft.user.age += 1})) // 用immer的produce的话
- 接受一个值或者一个函数
- 是整个替换更新,而不是自动Merge,需要解构自己merge(或者使用useReducer),可以使用Immer辅助
- 懒init 如果initialState需要通过复杂计算获得,可以提供一个函数
const [state, setState] = useState(() => {
const initialState = someExpensiveComputation(props)
return initialState
})
- 如果update的值跟之前的值相同,React可能会渲染组件本身,但不会渲染子组件和相关的effects。用Object.is来比较二者。
- 如果在渲染时有昂贵的计算,则用
useMemo
来优化
在函数式组件/render阶段中不允许有状态的改变,订阅,定时器,日志和其他引起副作用的方法。但可以使用useEffect
来做这些事情。它与React类中的componentDidMount,componentDidUpdate和componentWillUnmount具有相同的用途,但整合到了单个的API中。
effect可以分为需要清理的和不需要清理的。网络请求,手动修改dom,和打印日志都属于常用的无需清理的effect。
- 为何useEffect要在组件内部调用? 函数作用域问题。这样可以直接在effect中获取到state变量,而不需要一个额外的api去获取。这是js的闭包特性决定的。
- useEffect是不是在每次渲染之后都会运行?是的!默认是在第一次渲染和以后的每次更新都会跑,当然,可以通过传第二个参数来自定义它。与其用
mounting
,updating
这样的术语来描述它,倒不如想成是effects会在每次render
之后发生。React保证DOM在运行effects之前已经被更新了。
useEffect(asyncFn, state) asyncFn会在render已经完成后执行。在纯函数的世界里,这是一个通往命令世界的逃生舱。 asyncFn需要返回一个清理side-effect的函数。该函数会在组件从UI中移除之前运行,以避免内存泄露。 async并不是指传入的第一个参数本身是async的,而是说里面可以声明一个async的函数,再执行它。
useEffect(() => {
const subscription = props.source.subscribe()
return () => {
subscription.unsubscirbe()
}
})
为了避免在每次更新的时候都会清理上次、重新订阅,可以注意下effects的时机。不像componentDidMount
和componentDidUpdate
, 传给useEffect的函数在布局和绘制(layout and paint)之后被触发,处于一个被延迟的事件中。这样对许多订阅和事件监听都是适用的,但并非所有的effects都可以被稍后执行。例如,一个展现给用户看的DOM更新必须在下一次绘制的时候同步执行,对这类的effects, react提供了一个特别的hook,叫做useLayoutEffect
。它有着与useEffect相同的函数签名,只是触发的时机不同。
尽管useEffect会在浏览器绘制之后延迟触发,但是它一定会在下一次的render之前触发。
useEffect的函数接受第二个参数,一个数组,只有里面的值变动了,才会重新重新触发Effect函数。 确保数组中包括了组件的所有会随着时间改变,并被effect使用的props, state值
- 如果只想触发一次和清理一次(mount and unmont),可以传一个空数组
const value = useContext(MyContext)
接受一个context对象(从React.createContext)中创建,并返回一个代表当前的context的值,这个值由最近的<MyContext.Provider>的value Prop决定。当该Provider更新的时候,这个hook就会触发一次重新渲染,会根据最近的一次传给MyContext的value属性变化。
useContext(MyContext) 基本与在class中static contextType = MyContext类似,或者类似于<MyContext.Consumer>
const [state, dispatch] = useReducer(reducer, initialArg, init)
因为可以把dispatch方法传下去代替回调,对触发深层结构更新的组件会有效率上的优化
const initialState = {count, 0}
function reducer(state, action) {
switch (action.type) {
case 'increment': return {count: state.count +1}
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
}
}
function Counter({initialState}) {
const [state, dispatch] = useReducer(reducer, initialState)
return (
<>
Count: {state.count}
<button onClick={() => dispatch({type: 'increment'})}>+</button>
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
</>
)
}
需要自己管理自己的状态,外部组件不需要知道里面组件的状态
React没有像Redux一样直接使用
state = initailState
, 这是因为可能传入的inital value 是基于props的,所以没有从内部自己定义。
传入第三个参数, init函数,则初始值会被set 为 init(initialArg)。这样可以把计算初始state的逻辑从reducer中抽离出来,对根据action的结果重置state也非常方便。
function init(initialCount) {
return {count: initialCount};
}
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
case 'reset':
return init(action.payload);
default:
throw new Error();
}
}
function Counter({initialCount}) {
const [state, dispatch] = useReducer(reducer, initialCount, init);
return (
<>
Count: {state.count}
<button
onClick={() => dispatch({type: 'reset', payload: initialCount})}>
Reset
</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
</>
);
}
const memoizedCallback = useCallback(() => { doSomething(a, b)}, [a, b])
a, b是依赖项。将会返回一个callback的记忆版本,只有当依赖项有改变时,才会改变。对根据引用相等进行了渲染优化后的子组件,传入callback很有效果。
useCallback(fn, deps) === useMemo(() => fn, deps)
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
传给useMemo的函数会在渲染时执行。后续react可能会遗忘掉一些不在页面上的组件的memo,重新计算它们。慎用。
const refContainer = useRef(initialValue)
返回一个可变的ref object,其.current属性由传入的参数初始化。返回的对象会在组件的生命周期内一直存在。 比如,明确命令式地获取一个child。
function TextInputWithFocusButton() {
const inputEl = useRef(null)
const onButtonClick = () => {
inputEl.current.focus()
}
return (
<>
<input ref={inputEl} />
<button onClick = {onButtonClick}>focus the input</button>
</>
)
}
useImperativeHandle(ref, createHandle, [dep1, dep2, ...]) 生成一个自动focus的输入框子组件:
function FancyInput(props, ref) {
const inputRef = useRef()
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus()
}
}))
return <input ref={inputRef} ... />
}
FancyInput = forwardRef(FancyInput)
如果要把代码从class component迁移到函数式的,注意useLayoutEffect
会在componentDidMount
和componentDidUpdate
的时候每次都触发。更推荐用useEffect.
如果使用了服务端渲染,注意无论是useLayoutEffect
还是useEffect
都会直到js被下载才会执行。
useDebugValue(value, (value) => computed(value)) 用于在react dev tools中显示该label, 在定义customHoook 共享库的时候可以使用。第二个参数用于懒初始化。
hooks 会替代 render props 和 hoc 吗? 通常,render props和 hoc 都只能渲染一个子组件。但这二者仍然有独特的使用场景。比如说,一个虚拟的滚动组件,可能需要有
renderItem
prop,或者是一个有特定dom结构的容器组件。不过对大多数情况下,hook可以替代它们。
组件的生命周期和hook是如何对应的? constructor在函数式组件中不存在,可以在
useState
中初始化state,如果计算初始state很耗费性能,可以传个函数给useState。getDerivedStateFromProps是通过每一次render执行更新的。shouldComponentUpdate 参见React.memo。render方法就是函数体本身。componentDidMount, componentDidUpdate, componentWillUnmount被useEffect包括在内。componentDidCatch, getDerivedStateFromError 暂时还没有等价的hook方法,但以后会被增加上。
有没有类似实例变量的东西? 有!useRef并不仅仅用于dom refs。ref对象是一个通用容器,其current属性是手动可变的,里面能放任何值,就像class上的实例属性一样。
// component.js
function Timer() {
const intervalRef = useRef();
useEffect(() => {
const id = setInterval(() => {
// ...
});
intervalRef.current = id;
return () => {
clearInterval(intervalRef.current);
};
});
// ...
}
// 如果想在某个时间Handler上清理该interval,则可以这么做
function handleCancelClick() {
clearInterval(intervalRef.current)
}
尽量不要在渲染的时候设置refs, 可能会导致意想不到的结果,最好是在事件处理和effect中修改refs。
是否可以只在更新的时候run effect? 这个用例很少见。不过若是需要,可以使用useRef中的可变ref来存一个布尔值,判断是否是第一次渲染,然后在effect里检查该值。
如何拿到上一次的prop或者state?
function usePrevious(value) {
const ref = useRef()
useEffect(() => {
ref.current = value
})
return ref.current
}
function Counter() {
const [count, setCount] = useState(0)
const prevCount = usePrevious(count)
return (<h1>now: {count}, before: {prevCount}</h1>)
}
注意这里useEffect的时机,它是在render之后重新clean up 并执行的。其结果并不会触发重新render,因此能拿到上一次useEffect的结果。如果再在useEffect中setState,则会重新触发渲染,这样的话会render两次,就不能起到usePrevious的结果了。
为什么我在函数方法内部看到了未更新的prop或者state? 任何组件内的方法,包括事件handler和effects,都是从它被触发的那一刻render出的props和state中读取的值。
function Example() {
const [count, setCount] = useState(0);
function handleAlertClick() {
setTimeout(() => {
alert('You clicked on: ' + count);
}, 3000);
}
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
<button onClick={handleAlertClick}>
Show alert
</button>
</div>
);
}
如果先点了alert按钮,再点了增加按钮,那么会看到alert出来的值是你点击那一刻时count的值。 另外一个可能的原因是错误地用了依赖项数组优化,比如传了一个空数组作为第二个参数,但又在内部获取了prop,那只能拿到最初的prop了。
如何处理dom元素? 推荐用useCallback,也可以用useRef和useEffect结合,但是useCallback的话传入的第二个参数可以是一个空数组,避免重复渲染,而useEffect会在初始时多渲染一次,以确认前后值不变。例子参见usecallback-on-node.js和useref-on-node.js。
function MeasureExample() {
const [rect, ref] = useClientRect();
return (
<>
<h1 ref={ref}>Hello, world</h1>
{rect !== null &&
<h2>The above header is {Math.round(rect.height)}px tall</h2>
}
</>
);
}
function useClientRect() {
const [rect, setRect] = useState(null);
const ref = useCallback(node => {
if (node !== null) {
setRect(node.getBoundingClientRect());
}
}, []);
return [rect, ref];
}
建议在useEffect, useMemo, useCallback, useImperativeHandle
内部写定义的小函数,否则容易忘掉哪些依赖项。依赖项要包括用到的state, prop或者从这两者算出来的值。
useEffect(() => {
let ignore = false;
async function fetchProduct() {
const response = await fetch('http://myapi/product/' + productId);
const json = await response.json();
if (!ignore) setProduct(json);
}
return () => { ignore = true };
}, [productId]);
如果你就是不想把方法写在effect内部,考虑下别的选择:
- 把函数移到组件之外
- 如果这是一个纯计算函数,而且可以在渲染时安全地调用,可以在effect外部去调用,然后让返回值作为effect的依赖项之一。
- 最后,实在不行的话,还可以在effect依赖项中增加一个函数,但把它的定义包裹在useCallback中。这确保了不会在每次渲染的时候不会都去更新,只有在依赖项改变的时候才更新。例子参见update-outside-effect.js。
- how to throttle render?
对setState采用函数式的更新,即传入一个函数,而不是一个值,从而尽可能去掉useEffect中的依赖项。这样做仍然会重新渲染和重新setState,但是不会重新调用setInterval之类的async函数。见例子prevent-restart-interval.js。 对比较复杂的情况,比如一个state依赖于另一个state,可以使用useReducer把更新state的逻辑提出来放在外面。参见此文:https://adamrackis.dev/state-and-use-reducer/useReducer的dispatch方法永远是稳定恒等的,即使组件内声明的reducer函数会用到props。 实在不行,那就用useRef替代useState来存取手动修改的变量吧!例子参见manually-render-useref.js
- 如何应用shouldComponentUpdate?
把函数组件用React.memo包裹起来,即可浅比较传入的props。
const Button = React.memo((props) => {
// ...
})
这个跟hook没关系,React.memo基本等于PureComponent,但是它只比较Props。它还可以传入第二个参数,为一个比较函数。如果返回是true则会跳过udpate。
- 如何记忆计算结果?
useMemo
hook 可以在多次渲染之间通过记住上次的计算结果完成缓存。注意传给useMemo的函数是在渲染时执行的。不要错误地把useEffect中该做的事情放在了useMemo中(useMemo有点像computed)。 可以用useMemo来做性能优化,但不能在语法上保证它的准确无误。 可以分别渲染两个子组件,但是,不能在循环中使用它,不过可以把list组件抽出来,然后调用useMemo。参见例子List.js。
- 如何懒初始化耗费性能的对象?
如果依赖项恒等,useMemo可记忆昂贵的计算。但是它只能当做提示来使用,而且不保证计算不会重新执行。但有些时候,需要确认一个对象只被创建一次。这时可以给useState传一个函数。 有时需要避免useRef的初始值被重复创建,但它不能传函数,需要手动写单例模式:
function Image(props) {
const ref = useRef(null)
function getObserver() {
let observer = ref.current
if(observer !== null) {
return observer
} else {
let newObserver = new IntersectionObserver()
ref.current = newObserver
return newObserver
}
}
const observer = getObserver()
// use it....
}
- 如何读取useCallback里频繁改动的值? 这个情况不太常见。可以手工把值存在ref中,并以ref作为依赖项。见often-changing-normal.js和often-changing-callback.js
function useEventCallback(fn, dependencies) {
const ref = useRef(() => {
throw new Error('Cannot call an event handler while rendering.');
});
useEffect(() => {
ref.current = fn;
}, [fn, ...dependencies]);
return useCallback(() => {
const fn = ref.current;
return fn();
}, [ref]);
}
function Form() {
const [text, updateText] = useState('');
// Will be memoized even if `text` changes:
const handleSubmit = useEventCallback(() => {
alert(text);
}, [text]);
return (
<>
<input value={text} onChange={e => updateText(e.target.value)} />
<ExpensiveTree onSubmit={handleSubmit} />
</>
);
}
- hook在三个方面对shouldComponentUpdate做出的优化
- useCallback 可以在两次渲染之间维持着相同的callback引用,所以shouldComponentUpdate可以继续发挥功能。
- useMemo 可以让单独的子组件更新更容易
- 最后,useReducer可以避免往深层的子组件中层层传递回调,可以在context内部的子组件上任意dispatch事件(参见todo.js, todo-usememo.js, todo-react-memo.js)。