Hook
Hook 是 React 16.8.0 的新增特性。
Hook 使你在非 class 的情况下可以使用更多的 React 特性。Hook 不能在 class 组件中使用。
使用规则：
- 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
- 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。
State Hook
useState
使用useState可以不通过class组件而在函数组件内使用state，可通过多次调用声明多个state
-
参数：
useState() 方法里面唯一的参数就是初始 state。
-
返回值：
当前 state 以及更新 state 的函数。
函数式更新：
如果新的 state 需要通过使用先前的 state 计算得出，那么可以将函数传递给 setState。该函数将接收先前的 state，并返回一个更新后的值。
function Counter({initialCount}) {
const [count, setCount] = useState(initialCount);
return (
<>
Count: {count}
<button onClick={() => setCount(initialCount)}>Reset</button>
<button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
<button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
</>
);
}
Effect Hook
Effect Hook 可以让你在函数组件中执行副作用操作（在 React 组件中执行过数据获取、订阅或者手动修改过 DOM。我们统一把这些操作称为“副作用”，或者简称为“作用”。）
useEffect
可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
useEffect 会在每次渲染后（第一次渲染之后和每次更新之后）都执行，如果你的 effect 返回一个函数，React 将会在组件卸载的时候执行清除操作时调用它。
useEffect在组件内可多次调用，Hook 允许我们按照代码的用途分离他们，React 将按照 effect 声明的顺序依次调用组件中的每一个 effect。
使用位置：
组件内部调用 useEffect。 将 useEffect 放在组件内部让我们可以在 effect 中直接访问 count state 变量（或其他 props）。
性能优化：
useEffect 的第二个可选参数可以实现如果某些特定值在两次重渲染之间没有发生变化，你可以通知 React 跳过对 effect 的调用。请确保数组中包含了所有外部作用域中会随时间变化并且在 effect 中使用的变量
// 仅在 count 更改时更新
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
// 仅在组件初次渲染和组件销毁时执行
useEffect(() => {
console.log('1')
return () => {
console.log('2')
}
}, [])
示例代码详解 useState 与 useEffect ：
// 引入 React 中的 useState Hook。它让我们在函数组件中存储内部 state
// 引入 useEffect
import React, { useState, useEffect } from 'react';
function Example(props) {
// 声明了一个叫 count 的 state 变量，然后把它设为 0
const [count, setCount] = useState(0);
// 声明第2个state
const [isOnline, setIsOnline] = useState(null);
// 无需清除的 effect
useEffect(() => {
// 将 document 的 title 设置为包含了点击次数的消息。
document.title = `You clicked ${count} times`;
});
// 需要清除的 effect
useEffect(() => {
function handleFn(val) {
setIsOnline(val);
}
// 注册监听
XXAPI.subscribe(handleFn);
// 清除监听
return () => {
XXAPI.unsubscribe(handleFn);
};
});
return (
<div>
// 读取 State: 我们可以直接用 count
<p>You clicked {count} times</p>
// 更新 State: 可以通过调用 setCount 来更新当前的 count
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
useLayoutEffect
其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。尽可能使用标准的 useEffect 以避免阻塞视觉更新。
与 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这让你的应用看起来响应更快。大多数情况下，effect 不需要同步地执行。在个别情况下（例如测量布局），这时需要用到useLayoutEffect
useRef
useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` 指向已挂载到 DOM 上的文本输入元素
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
useRef() 比 ref 属性更有用。它可以很方便地保存任何可变值，其类似于在 class 中使用实例字段的方式。当 ref 对象内容发生变化时，useRef 并不会通知你。变更 .current 属性不会引发组件重新渲染。
自定义Hook
自定义Hook 是一个函数，其名称以 use 开头(必须以 use 开头)，函数内部可以调用其他的 Hook。自定义Hook用于提取多组件之间的共享逻辑，可用于替代 render props 和 HOC。
在需要共享逻辑的组件内调用很简单，只需要引入定义好的自定义Hook，并传入自己想要的参数拿到你想要的返回值作用于当前组件。
如下例：
- 提取自定义Hook：
import React, { useState, useEffect } from 'react';
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
XXXAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
XXXAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
return isOnline;
}
- 使用自定义Hook：
function FriendListItem(props) {
const isOnline = useFriendStatus(props.friend.id);
return (
<li style={{ color: isOnline ? 'green' : 'black' }}>
{props.friend.name}
</li>
);
}
其它Hook
useReducer
useReducer是useState的替代方案，它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。
在某些场景下，useReducer 会比 useState 更适用，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等。并且，使用 useReducer 还能给那些会触发深更新的组件做性能优化，因为你可以向子组件传递 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() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({type: 'increment'})}>+</button>
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
</>
);
}
通过阅读React源码 ReactFiberHooks.js 发现 useState 就是对 useReducer 的封装：
// useState
export function useState<S>(
initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
return useReducer(
basicStateReducer,
// useReducer has a special case to support lazy useState initializers
(initialState: any),
);
}
// useReducer
export function useReducer<S, A>(
reducer: (S, A) => S,
initialState: S,
initialAction: A | void | null,
): [S, Dispatch<A>] {
// ...
// ...
// ...
}
useMemo 与 useCallback
可用于给子组件传递参数及回调函数时的优化项
import React, {useState, useMemo, useCallback} from 'react'
function fnComponent() {
const [count, setCount] = useState(0)
const [name, setName] = useState('name')
// 不会在每次fnComponent有更新都重新渲染Child
const config = useMemo(()=>{
text: `count is ${count}`
}, [count])
const handleButtonClk = useCallback(()=>{ setCount(c=>c+1) }, [])
return (
<div>
<div className='countStyle'>{name}</div>
<div className='countStyle'>{count}</div>
<input value={name} onChange={(e)=>{setName(e.target.value)}} />
<Child config={config} handleButtonClk={handleButtonClk} />
</div>
)
}
function Child({config, handleButtonClk}) {
console.log('child render')
return (
<button
onClick={handleButtonClk}
>
{config.text}
</button>
)
}
