react鉤子

So the React Conference just happened and as always something new happened. Hooks happened! The React team talked about suspense, lazy loading, concurrent rendering, and hooks :D.

因此，React會(huì)議剛剛發(fā)生，并且一如既往地發(fā)生了一些新情況。 鉤子發(fā)生了！ React團(tuán)隊(duì)討論了懸念，延遲加載，并發(fā)渲染和鉤子 ：D。

Now I’ll talk about my favorite hook useReducer and how you use it.

現(xiàn)在，我將討論我最喜歡的鉤子useReducer以及如何使用它。

In my PokemonInfo component, I have:

在我的PokemonInfo組件中，我有：

const [{ count, loading }, dispatch] = useReducer(reducer, initialState);

Which is equivalent to:

等效于：

const [state, dispatch] = useReducer(reducer, initialState); const { count, loading } = state;

So what is const [state, dispatch] = useReducer(param1, param2) Let’s first talk about array destructuing which is happening below.

那么什么是const [state, dispatch] = useReducer(param1, param2)首先讓我們談?wù)?strong>數(shù)組解構(gòu) 這正在發(fā)生在下面。

const [state, dispatch] = useReducer(initialState);

Here’s an example of array destructing:

這是數(shù)組銷(xiāo)毀的示例：

let myHeroes = ['Ant man', 'Batman']; // Mixing DC & Marvel :D let [marvelHero, dcHero] = myHeroes; // destructuring array /** * myHeroes[0] == marvelHero => is 'Ant man' * myHeroes[1] == dcHero => is 'Batman' */

So the method useReducer has two items in its array state and dispatch. Also the useReducer takes in two parameters: one is reducer the other is initial-state.

因此，方法useReducer的數(shù)組state和dispatch有兩個(gè)項(xiàng)目。 useReducer接受兩個(gè)參數(shù)：一個(gè)是reducer ，另一個(gè)是initial-state 。

In the useReducer param reducer, I pass in:

在useReducer參數(shù)reducer ，我傳入：

const reducer = (state, action) => {switch (action.type) {case 'increment': {return { ...state, count: state.count + 1, loading: false };}case 'decrement': {return { ...state, count: state.count - 1, loading: false };}case 'loading': {return { ...state, loading: true };}default: {return state;}} };

What this does is it takes in two arguments. One is the current state of the reducer and the other is the action. The action.type decides how it will update the reducer and return a new state to us.

這樣做是有兩個(gè)參數(shù)的。 一個(gè)是減速器的當(dāng)前狀態(tài)，另一個(gè)是動(dòng)作。 action.type決定如何更新減速器并向我們返回新?tīng)顟B(tài)。

So if the action.type === increment

因此，如果action.type === increment

case 'increment': { return { ...state, count: state.count + 1, loading: false }; }

…it will return the state, which will have its count updated to +1 and loading set to false. Also where it says state.count + 1 here the state is actually the previous state.

…它將返回狀態(tài)，該狀態(tài)的計(jì)數(shù)將更新為+1并將加載設(shè)置為false 。 還在上面說(shuō)state.count + 1地方，這里的state實(shí)際上是先前的狀態(tài)。

In useReducer param initialState I pass in:

在useReducer參數(shù)initialState我傳入：

const initialState = { loading: false, count: 0 };

So if this is the initial state, the useReducer method returns two items from its array, state and dispatch. The state method is an object which has two keys count & loading that I destructure in my destructured array.

因此，如果這是初始狀態(tài)，則useReducer方法從其數(shù)組中返回兩項(xiàng)，即state和dispatch 。 state方法是一個(gè)具有兩個(gè)鍵count & loading的對(duì)象，我在已解構(gòu)數(shù)組中對(duì)其進(jìn)行了解構(gòu)。

So I destructure an array, and inside the array, I destructure an object on the first index of the array like below.

因此，我解構(gòu)了一個(gè)數(shù)組，然后在數(shù)組內(nèi)部，對(duì)一個(gè)對(duì)象進(jìn)行了解構(gòu)，該對(duì)象位于數(shù)組的第一個(gè)索引上，如下所示。

const [{ count, loading }, dispatch] = useReducer(reducer, initialState);

Also I have a method called delay

我也有一種叫做delay的方法

// return true after 1500ms in time argument is passed to. const delay = (time = 1500) => { return new Promise(resolve => { setTimeout(() => { resolve(true); }, time); }); };

Now in my render method when I click the + button

現(xiàn)在在我的渲染方法中，當(dāng)我單擊+按鈕時(shí)

<button type="button" onClick={onHandleIncrement}>+</button>

the onHandleIncrement function is executed, which does the following:

執(zhí)行onHandleIncrement函數(shù)，該函數(shù)執(zhí)行以下操作：

const onHandleIncrement = async () => { dispatch({ type: 'loading' }); await delay(500); dispatch({ type: 'increment' }); };

It initially sets loading to true, adds a delay of 500ms and then increments the counter. Now I know this is not a real world case example, but it explains the point as to how a reducer works.

最初將loading設(shè)置為true，添加500ms的延遲，然后遞增計(jì)數(shù)器。 現(xiàn)在，我知道這不是一個(gè)真實(shí)的案例，但是它解釋了減速器如何工作的要點(diǎn)。

Last thing:

最后一件事：

<p>Count {loading ? 'loading..' : count}</p>

If loading is true, I show Count loading.. else I show Count {value}.

如果loading為true，則顯示Count loading..否則顯示Count {value} 。

This is how it looks in the UI:

這是它在UI中的外觀：

I tried replicating Dan Abramov’s code that he showcased at the React Conference 2018. Here is the link to the code repository. Enjoy. :)

我嘗試復(fù)制Dan Abramov在React Conference 2018上展示的代碼。這是代碼庫(kù)的鏈接。 請(qǐng)享用。 :)

Kindly do note that hooks are in an alpha version of React, and are in no way advised to be used in production. But there is a strong possibility that they will become a huge part of the eco-system in the future. So you should start playing around with react hooks now. 請(qǐng)注意，掛鉤是React的alpha版本，絕不建議在生產(chǎn)中使用。 但是它們很可能在將來(lái)成為生態(tài)系統(tǒng)的重要組成部分。 因此，您現(xiàn)在應(yīng)該開(kāi)始使用react掛鉤。

翻譯自: https://www.freecodecamp.org/news/hooked-on-hooks-how-to-use-reacts-usereducer-2fe8f486b963/

react鉤子

總結(jié)

以上是生活随笔為你收集整理的react钩子_迷上了钩子：如何使用React的useReducer（）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。