1. useLayoutEffect
useLayoutEffct与useEffect使用方式一致，都可以执行副作用和清理操作。唯一的不同是执行时机。useEffect不回阻塞浏览的绘制任务，页面更新后执行。useLayoutEffect跟componentDidMount和componentDidUpdate类似，会阻塞浏览器的绘制任务，如果任务执行时间过长，会造成页面空白。
使用场景： 根据ui执行DOM操作，绝大多数情况下使用useEffect是一个更好的选择。useLayoutEffect会在页面渲染前执行，保证渲染出来的是最终效果。如果使用了useEffect很可能会因为渲染了2次而出现抖动。
2. useContext
const value = useContext(myContext)
接收一个context对象（React.createContext返回值），并返回该context当前值。当前context的值由上层组件距离当前组件最近的<MyContext.Provider>的value、prop决定。当上层<MyContext.provider>更新时，该Hook会触发重新渲染，并将使用最新传递给MyContext的Provider的contextvalue值。
useContext的参数必须是context对象本身：
- 正确：
useContext(MyContext) - 错误：
useContext(MyContext.Consumer) - 错误：
useContext(MyContext.Provider)
useContext(MyContext)相当于class组件中的static contextType = MyContext或者<MyContext.Consumer>
调用了useContext的组件总会在context的值发生变化时重新渲染。
3. useReducer
useReducer用法跟Redux非常相似。当state的计算逻辑比较复杂或者需要根据以前的值计算新的值时，使用这个Hook会比useState更好。
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>
</>
);
}
4. useCallback / useMemo / React.memo
useCallback和useMemo的设计初衷时用来做性能优化的。
传统onClick方法，每次重新渲染都会重新绑定事件，解决方式是使用bind或者箭头函数。同样函数组件也有这个问题，React给出的方案是useCallback Hook。它会返回相同的引用，避免子组件进行无意义的重复渲染。
useCallback缓存的是方法的引用，
function Foo() {
const [count, setCount] = useState(0);
const memoizedHandleClick = useCallback(
() => console.log(`Click happened with dependency: ${count}`), [count],
);
return <Button onClick={memoizedHandleClick}>Click Me</Button>;
}
而useMemo缓存的则是方法的返回值。
function Parent({ a, b }) {
// 当 a 改变时才会重新渲染
const child1 = useMemo(() => <Child1 a={a} />, [a]);
// 当 b 改变时才会重新渲染
const child2 = useMemo(() => <Child2 b={b} />, [b]);
return (
<>
{child1}
{child2}
</>
)
}
如果想实现class Component的shouldComponentUpdate方法，可以使用React.memo方法，区别是它只能比较props不能比较state。
- useRef
Class Component获取ref的方式如下：
class MyComponent extends React.Component {
constrctor(props) {
super(props)
this.myRef = React.createRef()
}
componentDidMount() {
this.myRef.current.focus()
}
render() {
return (
<input ref={this.myRef} type="text" />
)
}
}
Hook实现方式:
function MyComponent() {
const myRef = useRef(null)
useEffect(() => {
myRef.current.focus()
}, [])
return <input ref={myRef} type="text" />
}
useRef返回一个普通的js对象，可以将任意类型数据存放到current属性里面，就像使用实例化this一样。另外一个使用场景是获取previous props或previous state:
function Counter() {
const [count, setCount] = useState(0)
const previousRef = useRef()
useEffect(() => {
previousRef.current = count
})
const previousCount = previousRef.current
return <h1> Now: { count }, Before: { previousCount } </h1>
}
6. 自定义hooks
自定义Hook可以解决复用组件内带逻辑的部分。
自定义Hook是一个函数，是以use开头的，函数内部可以调用其他Hook。
- 自定义Hook返回在线状态(true or false)
function useFriendStatus(friendId) {
const [isOnline, setIsOnline] = useState(null)
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline)
}
ChatAPI.subscribeToFriendStatus(friendId, handleStatusChange)
return () => {
chatAPI.unsubscrbeToFriendStatus(friendId, handleStatusChange)
}
})
return isOnline
}
-
使用该自定义Hook
-
根据在线状态显示
在线离线function friendStatus(props) { const isOnline = useFreindStatus(props.friend.id) return isOnline ? 'online' : 'offline' } -
显示具体friend信息
function friendInfo(props) { const isOnline = useFriendStatus(props.friend.id) return ( <li style={isOnline ? 'green' : 'gray'}> { props.friend.name } </li> ) }
-
网友评论