摘要：前言自推出之后，收到了不少追捧，很多問(wèn)題也隨之而來(lái)。在出現(xiàn)之前，可以使用保存狀態(tài)和更新?tīng)顟B(tài)用以應(yīng)對(duì)這種情況。為了在這個(gè)用例上追趕的腳步，的需要提供副作用隔離功能。提供了一個(gè)，可以用它接入你的風(fēng)格的。

React Hooks 自推出之后，收到了不少追捧， 很多問(wèn)題也隨之而來(lái)。

本文就其中的一個(gè)話題展開(kāi)討論：React Hooks 是否會(huì)取代傳統(tǒng)的Redux ?

我認(rèn)為： 不會(huì).

在我看來(lái)，相比于傳統(tǒng)的Class Component, Hooks 并沒(méi)有提供什么新的狀態(tài)功能，只不過(guò)是對(duì)原有的 API 做了增強(qiáng)。

相比之前，Hoos 更加簡(jiǎn)潔，也提升了原生 API 的可用性，適用的場(chǎng)景也越來(lái)越多。

為了闡明我的觀點(diǎn)， 我們先做一些回顧。

Redux 是一個(gè) 可預(yù)測(cè)的狀態(tài)管理工具，可以輕松集成在 React 應(yīng)用中。 它有很多優(yōu)點(diǎn)， 比如：

單一數(shù)據(jù)源

數(shù)據(jù)共享

事務(wù)狀態(tài)

將數(shù)據(jù)狀態(tài)I/O和副作用相隔離

狀態(tài)回朔, 又稱 時(shí)光機(jī)

一系列輔助工具帶來(lái)的強(qiáng)大調(diào)試能力

總的來(lái)說(shuō)， Redux 提供了應(yīng)對(duì)大型應(yīng)用的代碼組織和調(diào)試能力，在程序出錯(cuò)時(shí)， 能幫你快速定位問(wèn)題。

在下的這邊文章科普了Hooks的一些基礎(chǔ)功能， 感興趣的可以看一下。

全面了解 React 新功能: Suspense 和 Hooks

Hooks 的主要優(yōu)點(diǎn)：

可以在函數(shù)式組件中定義數(shù)據(jù)狀態(tài)，也能通過(guò)一些Hooks來(lái)模擬生命周期方法。

邏輯復(fù)用；可以把公共邏輯抽象成一個(gè)個(gè)多帶帶的Hook， 從傳統(tǒng)的面向生命周期編程 轉(zhuǎn)變?yōu)槊嫦驑I(yè)務(wù)邏輯編程。

共享公共行為，類似Render Props.

兩家各有所長(zhǎng)，好在現(xiàn)在有 react-redux Hooks(https://react-redux.js.org/ne... 和 Reducer Hook (https://reactjs.org/docs/hook... 這樣的工具，我們就沒(méi)有必要糾結(jié)兩者之間如何選擇，雨露均沾， 美滋滋。

改變了我們編寫(xiě)組件的方式， 有了更多選擇，你可以拋棄生命周期方法， 擁抱Hooks。

Render Props 這種模式也有了更好的歸宿

Redux

HOC

容器組件和視圖組件之間的隔離, 分離純邏輯和視覺(jué)效果， 更易于測(cè)試。

任何時(shí)候你都可以使用Redux 來(lái)管理狀態(tài)，只要你喜歡。
但是如果你的應(yīng)用足夠簡(jiǎn)單，只包含單個(gè)視圖，需要一個(gè)地方臨時(shí)保存狀態(tài)，不需要和其他組件共享數(shù)據(jù)，或者甚至都沒(méi)有異步I/O都沒(méi)有(有也無(wú)所謂)。 這時(shí)候就到Hooks大顯身手了，這些情景下用Redux, 當(dāng)然也可以，不過(guò)這種做法叫用牛刀殺雞雞。

來(lái)看個(gè)例子：

import React, { useState } from "react";
import t from "prop-types";
import TextField, { Input } from "@material/react-text-field";

const noop = () => {};

const Holder = ({
  itemPrice = 175,
  name = "",
  email = "",
  id = "",
  removeHolder = noop,
  showRemoveButton = false,
}) => {
  const [nameInput, setName] = useState(name);
  const [emailInput, setEmail] = useState(email);
const setter = set => e => {
    const { target } = e;
    const { value } = target;
    set(value);
  };
return (
    

      

        

          
            
          
        
        

          
            
          
        
        {showRemoveButton && (
           {
              e.preventDefault();
              removeHolder(id);
            }}
          >
            ×
          
        )}
      
      
${itemPrice}
      
    
  );
};

export default Holder;

上面的例子 使用 useState 來(lái)跟蹤表單中的 name 和 email：

const [nameInput, setName] = useState(name);
const [emailInput, setEmail] = useState(email);

你可能會(huì)注意到還有一個(gè) removeHolder ，這個(gè)action creator 來(lái)自 Redux 。這種模式下，各種方法都可以混合搭配。

在 Hooks 出現(xiàn)之前， 可以使用 local state 保存狀態(tài)和更新?tīng)顟B(tài) 用以應(yīng)對(duì)這種情況。如果是我寫(xiě)這個(gè)的話， 我更傾向于把它塞到Redux中， 再通過(guò)Prop去取狀態(tài)吧。

反正到現(xiàn)在， 我做過(guò)的所有React應(yīng)用， 都用到了Redux，原則也很簡(jiǎn)單：

組件狀態(tài)用組件狀態(tài)，應(yīng)用狀態(tài)用 Redux。 各司其職， 相得益彰。

另一個(gè)常見(jiàn)的疑問(wèn)是， 我應(yīng)該把所有的數(shù)據(jù)和狀態(tài)都放在Redux嗎？ 如果不這么做的話， 是不是就無(wú)法使用時(shí)間旅行？

答案是不會(huì)的。

因?yàn)閼?yīng)用中有很多狀態(tài)是臨時(shí)的，種種局限不足以為日志遙測(cè)或者時(shí)間旅行提供足夠多的信息。 除非你在做的是一個(gè)具有協(xié)同能力的文本編輯器（比如我之前參與的Lark Docs, 還有騰訊文檔等），可以把用戶的每一個(gè)操作，每一個(gè)changeSet 的數(shù)據(jù)都保存起來(lái)， 包括光標(biāo)位置等信息。

每次你往Redux 里添加數(shù)據(jù)的時(shí)候， 隨之而來(lái)的是一層抽象和額外的復(fù)雜度。

換言之， 每次你要用Redux的時(shí)候， 要知道自己為啥需要用到它。 如果你的應(yīng)用有如下需求， 那就可以考慮使用Redux：

需要保存或者加載狀態(tài)

跨組件共享狀態(tài)

需要與其他組件共享業(yè)務(wù)邏輯或數(shù)據(jù)處理過(guò)程

還是那個(gè)例子：

訪問(wèn)鏈接： https://tffffday.com/

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { compose } from "ramda";
import page from "../../hocs/page.js";
import Purchase from "./purchase-component.js";
import { addHolder, removeHolder, getHolders } from "./purchase-reducer.js";
const PurchasePage = () => {
  // You can use these instead of
  // mapStateToProps and mapDispatchToProps
  const dispatch = useDispatch();
  const holders = useSelector(getHolders);
const props = {
    // Use function composition to compose action creators
    // with dispatch. See "Composing Software" for details.
    addHolder: compose(
      dispatch,
      addHolder
    ),
    removeHolder: compose(
      dispatch,
      removeHolder
    ),
    holders,
  };
return ;
};
// `page` is a Higher Order Component composed of many
// other higher order components using function composition.
export default page(PurchasePage);

這個(gè)組件并不處理任何DOM， 是一個(gè)純展示型的組件，并用 React-Redux hooks API 連接到 Redux 上。

之所以用到 Redux，是因?yàn)槠渌糠中枰@個(gè)表單的數(shù)據(jù)。它的狀態(tài)不是本地化到單個(gè)組件中，而是在組件之間共享；

Redux 允許我們干凈地將副作用與其他組件邏輯分離開(kāi)來(lái)，不需要我們模擬 I/O 服務(wù)。

相比 redux-thunk，我更喜歡使用 redux-saga 的原因就是后者的隔離功能）。

為了在這個(gè)用例上追趕 Redux 的腳步，React 的 API 需要提供副作用隔離功能。

Redux 與狀態(tài)管理庫(kù)有著很大區(qū)別。但本質(zhì)上，也是 Flux 架構(gòu) 的一個(gè)子集。

與庫(kù)相比，Redux 向來(lái)更接近一種架構(gòu)和非強(qiáng)制性的約定（convention）。

事實(shí)上，Redux 的基本實(shí)現(xiàn)只需要幾十行代碼。

這也是 Redux 的一大好處。如果你想多用一些本地組件狀態(tài)和 hook API，不想把所有內(nèi)容都塞到 Redux 里，那也完全沒(méi)問(wèn)題。

React 提供了一個(gè) useReducer hook，可以用它接入你的 Redux 風(fēng)格的 Reducer。這對(duì)不常見(jiàn)的狀態(tài)邏輯、依賴狀態(tài)等內(nèi)容非常有用。

如果你的用例是要將臨時(shí)狀態(tài)裝入單個(gè)組件，也可以使用 Redux 架構(gòu)，但要用 useReducer hook 取代 Redux 來(lái)管理狀態(tài)。

如果你后面需要維持或共享這個(gè)狀態(tài)， 就需要把它保存到Redux里了。

Hooks 并不會(huì)替代傳統(tǒng)的 Redux, 它的出現(xiàn)為我們編寫(xiě)組件提供了更多的靈活性， 更多的可能， 希望各位FEer 都能及時(shí)擁抱這個(gè)新特性， 找到自己最喜歡的開(kāi)發(fā)姿勢(shì)～

行文粗淺， 若有疏漏， 還請(qǐng)指正。

附原文鏈接: https://medium.com/javascript...