日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

useReducer?createContext代替Redux原理示例解析_React

作者：馮心心愛吃肉 ? 更新時間： 2022-12-05 編程語言

前言

最近看到很多采用useReducer + createContext 實現一個簡易的redux的方案，今天親自試了一下，發現還是會有一些區別的。

采用react-redux實現

這里使用react-redux 實現一個簡單的狀態管理例子。

App.jsx根組件

import React from 'react';
import { Button } from './Button';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import A from './a';
export default function ButtonDemo1() {
  const reducer = (state, action) => {
    const { name, theme } = state;
    switch (action.type) {
      case 'UPDATENAME':
        return {
          ...state,
          name: `${name} + 1`,
        };
      case 'UPDATETHEME':
        return {
          ...state,
          theme: theme === 'dark' ? 'light' : 'dark',
        };
      default:
        return state;
    }
  };
  const store = createStore(reducer, {
    name: 'fx',
    theme: 'dark',
  });
  return (
    <Provider store={store}>
      <div>
        <Button />
        <A />
      </div>
    </Provider>
  );
}

A組件用于dispatch和接收store。

A.jsx

import React, { useContext } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { reduxContent } from './index1';
export default function A() {
  const dispatch = useDispatch();
  return (
    <div onClick={() => dispatch({ type: 'UPDATENAME' })}>
      {useSelector((state) => state.name)}
    </div>
  );
}

效果如圖：

可以看到，Button組件未使用redux store，因此正常渲染了一次。

采用react hooks模擬redux實現

這里采用useReducer + createContext 模擬實現一個redux：

App.jsx

import React, { useReducer, createContext } from 'react';
import { Button } from 'concis';
import A from './a';
export const reduxContent = createContext({});
export default function ButtonDemo1() {
  const reducer = (state, action) => {
    const { name, theme } = state;
    switch (action.type) {
      case 'UPDATENAME':
        return {
          ...state,
          name: `${name} + 1`,
        };
      case 'UPDATETHEME':
        return {
          ...state,
          theme: theme === 'dark' ? 'light' : 'dark',
        };
      default:
        return state;
    }
  };
  const [redux, dispatch] = useReducer(reducer, {
    name: 'fx',
    theme: 'dark',
  });
  return (
    <reduxContent.Provider value={{ redux, dispatch }}>
        <Button />
        <A />
    </reduxContent.Provider>
  );
}

A.jsx

import React, { useContext } from 'react';
import { reduxContent } from './index1';
export default function A() {
  const { redux, dispatch } = useContext(reduxContent);
  return (
    <div onClick={() => dispatch({ type: 'UPDATENAME' })}>
      {redux.name}
    </div>
  );
}

同樣，子組件也可以對store中的狀態進行get和dispatch，但是會出現這樣的問題：

可以看到，Button組件并沒有使用store中的內容，但是會隨著A組件一起跟著重新渲染，原因其實就是采用這種方式store是存儲在根組件的，根組件狀態發生了變化(useReducer)，子組件跟著一起重新渲染了，因此解決這個問題的思路其實和解決常規的子組件沒變化一起被更新的思路是一樣的。

可以采用 useMemo限制 + memo 淺比較。

因此只需要在App.jsx中這樣修改：

 const renderButton = React.useMemo(() => {
    return <Button />;
  }, []);
  return (
    <reduxContent.Provider value={{ redux, dispatch }}>
      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
        {renderButton}
        <A />
      </div>
    </reduxContent.Provider>
  );
}

Button.jsx

const Button = (props) => {
    ......
})
export default React.memo(Button);

異步action

同樣，如果需要異步dispatch的話，簡單的場景其實單純使用異步操作就可以完成，但是在復雜的場景下很難對于異步流進行管理和維護，這時就需要借助redux中間件了，類似redux-thunk、redux-saga，而這也是使用hooks無法實現的，無法處理副作用，攔截action去更好的reducer。

總結

當然，并不是說采用react hooks所實現的狀態管理方式沒有好處，這樣可以更加貼合react原生，采用react自身所提供的hook，并且可以減少項目中的redux各種實例、減少代碼體積，對于小型項目或是不需要很多全局狀態的項目，這種方式確實是不錯的選擇。但是redux仍然是大型項目中最可靠的保障存在。

原文鏈接：https://juejin.cn/post/7161458530984132622

欄目分類
最近更新