useReducer
useStateの代替。（state、action）=> newStateの形式のレデューサーを受け入れ、現在の状態とそのディスパッチメソッドを返します。（Reduxに精通している場合は、Reduxがどのように機能するかをすでに知っています。）
基本的な使用法：
const [state, dispatch] = useReducer(reducer, initialArg);
もちろん、3番目のパラメータがありますが、これはあまり使用されないため、詳細には説明しません。
他のフック（useState、useEffect、useSelector、useDispatchなど）と同様に、それらはすべてreactから分解されます。これを使用する場合は、アクション関数と初期状態を渡すだけで済みます。このとき、useReducerは配列要素、配列の0番目の項目は最新の状態、1番目の項目はディスパッチ関数です。アクションIDを渡すだけで、状態のデータを変更し、react-rudex\reduxと入力できます。自動render（）を実現
アクション機能
const initialState = {
count: 0};
function reducer(state=initialState , action) {
switch (action.type) {
case 'increment':
return {
count: state.count + 1};
case 'decrement':
return {
count: state.count - 1};
default:
throw new Error();
}
}
useReducerを使用する
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {
state.count}
<button onClick={
() => dispatch({
type: 'decrement'})}>-</button>
<button onClick={
() => dispatch({
type: 'increment'})}>+</button>
</>
);
}
このようにして、状態が更新され、useStateフックは使用されません。大量のデータを更新する場合は、複数のsetXXXXを呼び出して状態を更新する代わりに、ディスパッチを使用してデータを解決できます。また、コールバック関数の形式で親コンポーネントの状態を更新する必要はありません。useReducerは、単一のモジュールに適しています。useReducerを使用してグローバル状態を実現する場合は、グローバル状態管理を作成する形式を使用して解決することをお勧めします。
フックは、createStore、Provider、useSelector、useDispatchを使用して接続機能を実装します
一部のシナリオでは、useReducerがuseStateよりも適しています。たとえば、状態ロジックがより複雑で複数のサブ値が含まれている場合や、次の状態が前の状態に依存している場合などです。また、useReducerを使用すると、コールバック関数の代わりに子コンポーネントにディスパッチを渡すことができるため、ディープアップデートをトリガーするコンポーネントのパフォーマンスを最適化することもできます。
useReducerの状態も、useStateの状態と同様に永続的であり、コンポーネントが再レンダリングされても変更されません。
createContext && useContext
Contextを使用すると、プロパティであろうとコールバックであろうと、親コンポーネントから孫コンポーネントにパラメーターを渡す問題を実現できます。
上記のuseRecuderと連携して、孫コンポーネントによって親コンポーネントの状態を更新することもできます。孫コンポーネントが親コンポーネントでディスパッチを取得する限り、アクションを開始して親コンポーネントを再作成できます。与える。
まず、別のjsでコンテキストを作成することを選択できます
export const myName='六卿'
export const myCreateContext= React.createContext();
このjsを親コンポーネントに導入し、破棄割り当ての形式を使用してmyNameとmyCreateContextを取得します。
import {
myName,myCreateContext} from './xxx.js'
レンダリングでの使用：
<myCreateContext.Provider value={
myName}>
<子组件 />
</myCreateContext.Provider>
この時点で、myNameが子コンポーネントか孫コンポーネントかに関係なく、子孫コンポーネントに正常に渡されました
。xxx.jsは子コンポーネントまたは孫コンポーネントにも導入さ
れ、useContextフックは子コンポーネントまたは孫コンポーネントで使用されます。親コンポーネントからデータを受信するコンポーネント。データ。
const myName= useContext(myCreateContext);
この時点で、myNameの値を直接使用できます。
useReducer && createContext
上記の例でも、useReducer、state、dispatchで返す値の値を渡します。
const [state, dispatch] = useReducer(reducer, initialState);
<myCreateContext.Provider value={
{
state,dispatch}}>
<子组件 />
</myCreateContext.Provider>
したがって、子コンポーネントまたは孫コンポーネントでは、次のように記述できます。
const {
state,dispatch}= useContext(myCreateContext);
このようにして、親コンポーネントの状態を使用でき、親コンポーネントのアクションをトリガーして、親コンポーネントのデータを変更できます。
上記の操作は、親コンポーネントと孫コンポーネント間の通信を実装します。
上記と同じuseReducerとコンテキストは、単一のモジュールにも引き続き適用可能であり、この形式のグローバルデータ共有は推奨されません。
その他の記事
1.フックはtoDoListを実装します
2.フックは左加算と右減算を実装
します3.Reactは複数行の入力ボックスの追加を実装します（行をクリックして行を追加します）
4。Reactページジャンプは前のページのすべてのリクエストをキャンセルします
5.Reactは協力しますaxiosリクエストインターセプト検証セッションでは、403はログインページ
6にジャンプします。フックはcreateStore、Provider、useSelector、useDispatchを使用して接続機能を実装します
Liuqing
见贤思齐焉，见不贤内自省