基础Hook
useState()
基本用法:
const [state, setState] = useState(initialState);
useState()
的返回值:
- 返回一个state
- 更新state的函数。
在初始渲染期间,返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。
setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。
setState(newState);
在后续的重新渲染中,useState 返回的第一个值将始终是更新后最新的 state。
函数式更新:
如果新的 state 需要通过使用先前的 state 计算得出,那么可以将函数传递给 setState。
该函数将接收先前的 state,并返回一个更新后的值。
eg:下面的计数器组件示例展示了 setState 的两种用法:
- setState()传递一个值时
import React,{useState} from 'react';
function Mydemo() {
const [count,setCount] = useState(0);
const add = function() {
setCount(count+1);
setCount(count+2);
setCount(count+3);
}
const minus = function() {
setCount(count-1);
setCount(count-2);
setCount(count-3);
}
return (
<>
Count: {count} <br/>
<button onClick={() => setCount(0)}>Reset</button> <br/>
<button onClick={() => add()}>+</button> <br/>
<button onClick={() => minus()}>-</button>
</>
)
}
export default Mydemo;
- setState()传递一个函数时
import React,{useState} from 'react';
function Mydemo() {
const [count,setCount] = useState(0);
const add = function() {
setCount(pre => pre+1);
setCount(pre => pre+2);
setCount(pre => pre+3);
}
const minus = function() {
setCount(pre => pre-1);
setCount(pre => pre-2);
setCount(pre => pre-3);
}
return (
<>
Count: {count} <br/>
<button onClick={() => setCount(0)}>Reset</button> <br/>
<button onClick={() => add()}>+</button> <br/>
<button onClick={() => minus()}>-</button>
</>
)
}
export default Mydemo;
注意比较两者执行出来的区别
useEffect()
基本用法:
useEffect(didUpdate);
该 Hook 接收一个包含命令式、且可能有副作用代码的函数。
在函数组件主体内(这里指在 React 渲染阶段)改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的,因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性。
使用 useEffect 完成副作用操作。
赋值给 useEffect 的函数会在组件渲染到屏幕之后执行。
你可以把 effect 看作从 React 的纯函数式世界通往命令式世界的逃生通道。
清除effect:
通常,组件卸载时需要清除 effect 创建的诸如订阅或计时器 ID 等资源。
要实现这一点,useEffect 函数需返回一个清除函数。
以下就是一个创建订阅的例子:
useEffect(() => {
const subscription = props.source.subscribe();
return () => {
// 清除订阅
subscription.unsubscribe();
};
});
effect的执行机制:
与 componentDidMount、componentDidUpdate 不同的是,传给 useEffect 的函数会在浏览器完成布局与绘制之后,在一个延迟事件中被调用。
这使得它适用于许多常见的副作用场景,比如设置订阅和事件处理等情况,因为绝大多数操作不应阻塞浏览器对屏幕的更新。
effect的条件执行:
默认情况下,effect 会在每轮组件渲染完成后执行。这样的话,一旦 effect 的依赖发生变化,它就会被重新创建。
然而,在某些场景下这么做可能会矫枉过正。比如,在上一章节的订阅示例中,我们不需要在每次组件更新时都创建新的订阅,而是仅需要在 source prop 改变时重新创建。
要实现这一点,可以给 useEffect 传递第二个参数,它是 effect 所依赖的值数组。
更新后:
useEffect(() => {
const subscription = props.source.subscribe();
return () => {
// 清除订阅
subscription.unsubscribe();
};
}, [props.source])
此时,只有当 props.source 改变后才会重新创建订阅。.
useContext()
const value = useContext(MyContext);
- 接收一个 context 对象(React.createContext 的返回值)并返回该 context 的当前值。
- 当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。
- 当组件上层最近的 <MyContext.Provider> 更新时,该 Hook 会触发重渲染,并使用最新传递给 MyContext provider 的 context value 值。
- 即使祖先使用 React.memo 或 shouldComponentUpdate,也会在组件本身使用 useContext 时重新渲染。
import React,{useState,useEffect,useContext} from 'react';
const AppContext = React.createContext();
function Mydemo() {
return (
<AppContext.Provider value={{name: '南栀'}}>
<A/>
<B/>
</AppContext.Provider>
);
}
function A() {
const {name} = useContext(AppContext);
return (
<p>
我是A组件,我的名字是{name}
</p>
);
}
function B() {
const {name} = useContext(AppContext);
return (
<p>
我是B组件,我的名字是{name}
</p>
);
}
export default Mydemo;
额外的Hook
useRef
const refContainer = useRef(initialValue);
- useRef 返回一个可变的 ref 对象,其 .current 属性被初始化为传入的参数(initialValue)。
- 返回的 ref 对象在组件的整个生命周期内持续存在。
import React,{useRef} from 'react';
function Mydemo() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` 指向已挂载到 DOM 上的文本输入元素
inputEl.current.focus();
}
return (
<>
<input type="text" ref={inputEl}/>
<button onClick={onButtonClick}>Focus the input</button>
</>
)
}
export default Mydemo;
本质上,useRef 就像是可以在其 .current 属性中保存一个可变值的“盒子”。
useRef() 比 ref 属性更有用。它可以很方便地保存任何可变值。
这是因为它创建的是一个普通 Javascript 对象。而 useRef() 和自建一个 {current: …} 对象的唯一区别是,useRef 会在每次渲染时返回同一个 ref 对象。
useReducer
基本语法:
const [state, dispatch] = useReducer(reducer, initialArg, init);
- useState的替代方案。
- 它接收一个形如
(state,action) => newState
的reducer,并返回当前的state以及配套的dispatch方法。
适用场景:
- state逻辑较复杂且包含多个子值
- 下一个state依赖于之前的state等。
- 使用useReducer还能给触发深更新的组件做性能优化,向子组件传递dispatch而不是回调函数。
小例子:重写计数器
import {useReducer} from 'react';
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(){
const [state,dispatch] = useReducer(reducer,initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({type:'decrement'})}>-</button>
<button onClick={() => dispatch({type:'increment'})}>+</button>
</>
)
}
export default Counter;
指定初始state:(两种方式)
- 将初始state作为第二个参数传入useReducer
const [state, dispatch] = useReducer(
reducer,
{count: initialCount}
);
- 先声明一个初始state变量,在useReducer中的第二个参数中传入
const initialState = {count: 0};
const [state,dispatch] = useReducer(reducer,initialState);
惰性初始化:
- 可以选择惰性地创建初始state。
- 需要将init函数作为useReducer的第三个参数传入,这样初始state被设置为init(initialArg)。
- 可以将用于计算 state 的逻辑提取到 reducer 外部,这也为将来对重置 state 的 action 做处理提供了便利。
import {useReducer} from 'react';
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};
default:
throw new Error();
}
}
function Counter(){
const [state,dispatch] = useReducer(reducer,0,init);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({type:'decrement'})}>-</button>
<button onClick={() => dispatch({type:'increment'})}>+</button>
</>
)
}
export default Counter;
参考文档:React官方文档