React Hooks
Hooks以前将“无状态”功能组件放到了……基本上，传统类组件都可以做到。使用更干净的API！在React 16.7中发布后不久，DefinitelyTyped中的React类型也得到了更新。了解如何在TypeScript中使用钩子！
useState
import React, { FunctionComponent, useState } from 'react';
const Counter:FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
const [clicks, setClicks] = useState(initial);
return <>
<p>Clicks: {clicks}</p>
<button onClick={() => setClicks(clicks+1)}>+</button>
<button onClick={() => setClicks(clicks-1)}>-</button>
</>
}
useState 的使用方式
const [keys, setKeys] = useState<{ currentOpenSubs: string[], currentSideMenu: string }>({
currentSideMenu: '',
currentOpenSubs: [],
});
useEffect
useEffect在这里有所有副作用。添加事件侦听器，更改文档中的内容，获取数据。一切你所使用的（组件生命周期方法componentDidUpdate，componentDidMount，componentWillUnmount）的方法签名是非常简单的。它接受两个参数：
- 无需任何参数即可调用的函数。这是您要调用的副作用。
- 类型的值数组any。此参数是可选的。如果不提供，则每次组件更新时都会调用提供的功能。如果这样做，React将检查这些值是否确实发生了变化，并且仅在存在差异时才触发函数。
useEffect(() => {
const handler = () => {
document.title = window.width;
}
window.addEventListener('resize', handler);
return true;
return () => {
window.removeEventListener('resize', handler);
}
})
useContext
useContext允许您从组件中的任何位置访问上下文属性。非常类似于Context.Consumer 类组件中的do。类型推断在这里非常出色，您不需要使用任何TypeScript特定的语言功能就可以完成所有工作：
import React, { useContext } from 'react';
export const LanguageContext = React.createContext({ lang: 'en' });
const Display = () => {
const { lang } = useContext(LanguageContext);
return <>
<p>Your selected language: {lang}</p>
</>
}
useRef
function TextInputWithFocusButton() {
const inputEl = useRef<HTMLInputElement>(null);
const onButtonClick = () => {
if(inputEl && inputEl.current) {
inputEl.current.focus();
}
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
useMemo-useCallback
useMemo返回一个 memoized 值。 传递“创建”函数和依赖项数组。useMemo 只会在其中一个依赖项发生更改时重新计算 memoized 值。此优化有助于避免在每个渲染上进行昂贵的计算。
const memoizedValue = useMemo（（） => computeExpensiveValue（ a， b），[ a， b ]）;
useMemo 在渲染过程中传递的函数会运行。不要做那些在渲染时通常不会做的事情。例如，副作用属于 useEffect，而不是 useMemo。
您知道useEffect，可以通过向其传递一些参数来影响某些函数的执行。React检查这些参数是否已更改，并且仅在存在差异的情况下才会执行此功能。
useMemo做类似的事情。假设您有大量计算方法，并且只想在其参数更改时运行它们，而不是每次组件更新时都运行它们。useMemo返回记忆的结果，并且仅在参数更改时才执行回调函数。
function getHistogram(image: ImageData): number[] {
...
return histogram;
}
function Histogram() {
...
const histogram = useMemo(() => getHistogram(imageData), [imageData]);
}
useCallback非常相似。实际上，这也是可以表达的捷径useMemo。但是它返回一个回调函数，而不是一个值。
const memoCallback = useCallback((a: number) => {
// doSomething
}, [a])
useMemo和useCallback的作用有点像啊，那它们之间有什么区别呢？
- useCallback 和 useMemo 都可缓存函数的引用或值。
- 从更细的使用角度来说 useCallback 缓存函数的引用，useMemo 缓存计算数据的值。
useReducer
如果您以前使用过Redux，则应该很熟悉。useReducer接受 3 个参数(reducer，initialState，init)并返回当前的 state 以及与其配套的 dispatch 方法。reducer 是如下形式的函数(state, action) => newState；initialState 是一个 JavaScript 对象；而 init 参数是一个惰性初始化函数，可以让你延迟加载初始状态。
const [state，dispatch] = useReducer（reducer，initialState，init）;
type ActionType = {
type: 'reset' | 'decrement' | 'increment'
}
const initialState = { count: 0 };
// We only need to set the type here ...
function reducer(state, action: ActionType) {
switch (action.type) {
// ... to make sure that we don't have any other strings here ...
case 'reset':
return initialState;
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
}
function Counter({ initialCount = 0 }) {
const [state, dispatch] = useReducer(reducer, { count: initialCount });
return (
<>
Count: {state.count}
{ /* and can dispatch certain events here */ }
<button onClick={() => dispatch({ type: 'reset' })}>
Reset
</button>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</>
);
}
React-redux hooks
React Redux 现在提供了一系列 hook APIs 作为现在 connect() 高阶组件的替代品。这些 APIs 允许你，在不使用 connect() 包裹组件的情况下，订阅 Redux 的 store，和 分发(dispatch) actions。
useSelector()
const result : any = useSelector(selector : Function, equalityFn? : Function)
基本用法
import React from 'react'
import { useSelector } from 'react-redux'
export const CounterComponent = () => {
const counter = useSelector(state => state.counter)
return <div>{counter}</div>
}
通过闭包使用 props 来选择取回什么状态：
import React from 'react'
import { useSelector } from 'react-redux'
export const TodoListItem = props => {
const todo = useSelector(state => state.todos[props.id])
return <div>{todo.text}</div>
}
**使用记忆化的 selectors 函数**
当像上方展示的那样，在使用 useSelector 时使用单行箭头函数，会导致在每次渲染期间都会创建一个新的 selector 函数。可以看出，这样的 selector 函数并没有维持任何的内部状态。但是，记忆化的 selectors 函数 (通过 reselect 库中 的 createSelector 创建) 含有内部状态，所以在使用它们时必须小心。
当一个 selector 函数依赖于某个 状态(state) 时，确保函数声明在组件之外，这样就不会导致相同的 selector 函数在每一次渲染时都被重复创建：
import React from 'react'
import { useSelector } from 'react-redux'
import { createSelector } from 'reselect'
const selectNumOfDoneTodos = createSelector(
state => state.todos,
todos => todos.filter(todo => todo.isDone).length
)
export const DoneTodosCounter = () => {
const NumOfDoneTodos = useSelector(selectNumOfDoneTodos)
return <div>{NumOfDoneTodos}</div>
}
export const App = () => {
return (
<>
<span>Number of done todos:</span>
<DoneTodosCounter />
</>
)
}
被移除的：useActions()
import { useMemo, DependencyList } from 'react';
import { bindActionCreators } from 'redux';
import { useDispatch } from 'react-redux';
// 这个主要是用于配合saga 处理异步请求
import {
bindPromiseCreators,
PromiseCreator,
ActionCreatorFunction,
Routine,
} from 'redux-saga-routines';
type actionType = Routine | PromiseCreator | ActionCreatorFunction;
// hooks 一定要以use开头
function useActions(
actions: {
[kye: string]: actionType;
},
deps?: DependencyList | undefined
): any {
const dispatch = useDispatch();
return useMemo(() => {
const newActions = actions;
const keys = Object.keys(actions);
keys.forEach((key: string) => {
if( newActions[key].length === 2 ) {
newActions[key] = bindPromiseCreators((actions[key] as PromiseCreator), dispatch);
} else {
newActions[key] = bindActionCreators((actions[key] as Routine), dispatch);
}
})
return newActions;
}, deps ? [dispatch, ...deps] : [dispatch]);
}
useAction的使用方式
const { topMenu, currentSidebar, theme, drawer, primaryColor } = useSelector((state: IState) => state.menu);
const [collapsed, setCollapsed] = useState(false);
const actions = useActions({
setMenu: menuAction.setMenu,
setDrawer: menuAction.setDrawer,
setTheme: menuAction.setTheme,
});
const handleSettingClick = useCallback((values) => {
actions.setTheme(values);
}, [actions]);
useDispatch() 这个 hook 返回 Redux store 的 分发(dispatch) 函数的引用。你也许会使用来 分发(dispatch) 某些需要的 action。
import React from 'react'
import { useDispatch } from 'react-redux'
export const CounterComponent = ({ value }) => {
const dispatch = useDispatch()
return (
<div>
<span>{value}</span>
<button onClick={() => dispatch({ type: 'increment-counter' })}>
Increment counter
</button>
</div>
)
}
在将一个使用了 dispatch 函数的回调函数传递给子组件时，建议使用 useCallback 函数将回调函数记忆化，防止因为回调函数引用的变化导致不必要的渲染。
这里的建议其实和 dispatch 没关系，无论是否使用 dispatch，你都应该确保回调函数不会无故变化，然后导致不必要的重渲染。之所以和 dispatch 没关系，是因为，一旦 dispatch 变化，useCallback 会重新创建回调函数，回调函数的引用铁定发生了变化，然而导致不必要的重渲染。
import React, { useCallback } from 'react'
import { useDispatch } from 'react-redux'
export const CounterComponent = ({ value }) => {
const dispatch = useDispatch()
const incrementCounter = useCallback(
() => dispatch({ type: 'increment-counter' }),
[dispatch]
)
return (
<div>
<span>{value}</span>
<MyIncrementButton onIncrement={incrementCounter} />
</div>
)
}
export const MyIncrementButton = React.memo(({ onIncrement }) => (
<button onClick={onIncrement}>Increment counter</button>
))
useStore() 这个 hook 返回传递给 组件的 Redux sotore 的引用。
这个 hook 也许不应该被经常使用。 你应该将 useSelector() 作为你的首选。但是，在一些不常见的场景下，你需要访问 store，这个还是有用的，比如替换 store 的 reducers。
import React from 'react'
import { useStore } from 'react-redux'
export const CounterComponent = ({ value }) => {
const store = useStore()
return <div>{store.getState()}</div>
}