成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

你可能并不需要 Redux

AZmake / 999人閱讀

摘要：你可能不需要人們經(jīng)常在他們不需要的時(shí)候選擇它。將與不需要指定格式代碼去更新的方法比較是太正常不過，可以得出結(jié)論是復(fù)雜的。保持歷史可撤銷或?qū)崿F(xiàn)可預(yù)見的變化，而不會(huì)對(duì)編寫代碼的方式發(fā)生重大變化。哇你應(yīng)該對(duì)有狀態(tài)的組件做這件事嗎可能不會(huì)。

你可能不需要 Redux

人們經(jīng)常在他們不需要 Redux 的時(shí)候選擇它?！叭绻覀兊膽?yīng)用沒有使用 Redux 怎么擴(kuò)展？”，緊接著，開發(fā)人員對(duì)間接的Redux引入他們的代碼感到不滿?！盀槭裁次冶仨氁萌齻€(gè)文件才能得到一個(gè)簡單的功能？” 為什么呢！

我能夠理解人們責(zé)怪 Redux, React, 函數(shù)式編程，不變性和其他許多事情使他們陷入困境。將 Redux 與不需要“指定格式”代碼去更新 state 的方法比較是太正常不過，可以得出結(jié)論 Redux 是復(fù)雜的。在某種程度上來說是的，但是設(shè)計(jì)如此。

Redux 提供了一個(gè)權(quán)衡，他要求你：

將應(yīng)用程序狀態(tài)描述為普通對(duì)象和數(shù)組

將系統(tǒng)中的變化描述為普通對(duì)象。

將處理更改的邏輯描述為純函數(shù)。

使用 React 或者不適用，這些都不是構(gòu)建一個(gè)應(yīng)用必要的限制。事實(shí)上這些都是很強(qiáng)的限制，在你的應(yīng)用上使用它之前，你應(yīng)該仔細(xì)考慮清楚。

你有這么做的充分理由嗎？

這些限制對(duì)我很有吸引力，因?yàn)樗鼈兛梢詭椭鷺?gòu)建應(yīng)用程序：

將 state 在本地存儲(chǔ)，項(xiàng)目啟動(dòng)開箱即用。

在服務(wù)渲染提前寫入 state 以 HTML 格式發(fā)送到客戶端，在客戶端啟動(dòng)，開箱即用

序列化用戶操作，并將它們與狀態(tài)快照一起附加到自動(dòng)化的bug報(bào)告中，以便產(chǎn)品開發(fā)人員可以重放它們以重現(xiàn)錯(cuò)誤。

通過傳遞 action 對(duì)象以實(shí)現(xiàn)寫作環(huán)境，而不會(huì)對(duì)編寫代碼的方式發(fā)生重大變化。

保持歷史可撤銷或?qū)崿F(xiàn)可預(yù)見的變化，而不會(huì)對(duì)編寫代碼的方式發(fā)生重大變化。

在開發(fā)過程中往來于 state 歷史之間，并在代碼更新時(shí)通過 action 的歷史來決定當(dāng)前的 state

為開發(fā)工具提供全面的檢查和控制能力，以便產(chǎn)品開發(fā)人員能夠?yàn)樗麄兊膽?yīng)用程序定制工具。

在重用大部分業(yè)務(wù)邏輯時(shí)提供可選的 UI。

如果你正在開發(fā)一個(gè)可擴(kuò)展的終端，一個(gè)JavaScript調(diào)試器，或者一些網(wǎng)絡(luò)應(yīng)用程序，那就值得嘗試一下，或者至少考慮一下它的一些想法（順便說一下，它們不是新的?。?/p>

然而，如果你還在學(xué)習(xí) React，不要選擇 Redux 作為你的第一選擇。

相反，學(xué)會(huì)在 React 中思考。如果你真的需要它，或者你想嘗試一些新的東西，就回過頭使用 React。但要謹(jǐn)慎對(duì)待，就像你用任何固執(zhí)己見的工具一樣。

如果你覺得有壓力去做“Redux的方式”，這可能表明你或你的隊(duì)友對(duì)此過于重視。 它只是你工具箱中的一個(gè)工具，一個(gè)瘋狂的實(shí)驗(yàn)。

最后，不要忘記不用Redux就可以應(yīng)用Redux中的思想。例如，考慮具有組件內(nèi)部 state 的React組件:

import React, { Component } from "react";

class Counter extends Component {
  state = { value: 0 };

  increment = () => {
    this.setState(prevState => ({
      value: prevState.value + 1
    }));
  };

  decrement = () => {
    this.setState(prevState => ({
      value: prevState.value - 1
    }));
  };
  
  render() {
    return (
      

        {this.state.value}
        
        
      

    )
  }
}

認(rèn)真重申一遍，看樣子一切都很完美。

組件內(nèi)部 state 沒毛病

Redux提供的折衷方案是增加間接性，將“發(fā)生的事情”與“事情如何變化”分開。

這總是一件好事嗎？ 不，這是一個(gè)折衷方案。

例如，我們可以從我們的組件中提取一個(gè) reducer：

import React, { Component } from "react";

const counter = (state = { value: 0 }, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { value: state.value + 1 };
    case "DECREMENT":
      return { value: state.value - 1 };
    default:
      return state;
  }
}

class Counter extends Component {
  state = counter(undefined, {});
  
  dispatch(action) {
    this.setState(prevState => counter(prevState, action));
  }

  increment = () => {
    this.dispatch({ type: "INCREMENT" });
  };

  decrement = () => {
    this.dispatch({ type: "DECREMENT" });
  };
  
  render() {
    return (
      

        {this.state.value}
        
        
      

    )
  }
}

注意我們?nèi)绾卧诓贿\(yùn)行npm install的情況下使用Redux。 哇！

你應(yīng)該對(duì)有狀態(tài)的組件做這件事嗎？ 可能不會(huì)。 也就是說，除非你有計(jì)劃從這種額外的間接中受益。 按照我們這個(gè)時(shí)代的說法，制定計(jì)劃是

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95848.html

相關(guān)文章

  • 深入redux技術(shù)棧

    摘要：另外，內(nèi)置的函數(shù)在經(jīng)過一系列校驗(yàn)后，觸發(fā)，之后被更改，之后依次調(diào)用監(jiān)聽，完成整個(gè)狀態(tài)樹的更新?？偠灾袷剡@套規(guī)范并不是強(qiáng)制性的，但是項(xiàng)目一旦稍微復(fù)雜一些，這樣做的好處就可以充分彰顯出來。 這一篇是接上一篇react進(jìn)階漫談的第二篇，這一篇主要分析redux的思想和應(yīng)用，同樣參考了網(wǎng)絡(luò)上的大量資料，但代碼同樣都是自己嘗試實(shí)踐所得，在這里分享出來，僅供一起學(xué)習(xí)(上一篇地址:個(gè)人博客／s...

    imingyu 評(píng)論0 收藏0

  • 深入redux技術(shù)棧

    摘要：另外，內(nèi)置的函數(shù)在經(jīng)過一系列校驗(yàn)后，觸發(fā)，之后被更改，之后依次調(diào)用監(jiān)聽，完成整個(gè)狀態(tài)樹的更新?？偠灾?，遵守這套規(guī)范并不是強(qiáng)制性的，但是項(xiàng)目一旦稍微復(fù)雜一些，這樣做的好處就可以充分彰顯出來。 這一篇是接上一篇react進(jìn)階漫談的第二篇，這一篇主要分析redux的思想和應(yīng)用，同樣參考了網(wǎng)絡(luò)上的大量資料，但代碼同樣都是自己嘗試實(shí)踐所得，在這里分享出來，僅供一起學(xué)習(xí)(上一篇地址:個(gè)人博客／s...

    VPointer 評(píng)論0 收藏0

  • 談?wù)凴eact那些小事

    摘要：在如今的前端框架界，三分天下的時(shí)代已經(jīng)到來，而曾經(jīng)一統(tǒng)天下的局面已一去不復(fù)返。三分天下，前端雖亂，但美其名曰繁榮。那些小事俗話說千里之堤毀于蟻穴，在開發(fā)中我們不能忙于進(jìn)度而忽視了細(xì)節(jié)。 前言 說起React，那也是近一年多時(shí)間火起來的前端框架，其在Facebook的影響力和大力推廣下，已然成為目前前端界的中流砥柱。在如今的前端框架界，React、Vue、Angular三分天下的時(shí)代已經(jīng)...

    Berwin 評(píng)論0 收藏0

  • 【譯】Redux 還是 Mobx，讓我來解決你的困惑！

    摘要：我現(xiàn)在寫的這些是為了解決和這兩個(gè)狀態(tài)管理庫之間的困惑。這甚至是危險(xiǎn)的，因?yàn)檫@部分人將無法體驗(yàn)和這些庫所要解決的問題。這肯定是要第一時(shí)間解決的問題。函數(shù)式編程是不斷上升的范式，但對(duì)于大部分開發(fā)者來說是新奇的。規(guī)模持續(xù)增長的應(yīng) 原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...

    txgcwm 評(píng)論0 收藏0

  • 實(shí)例講解Redux

    摘要：實(shí)例講解示例代碼地址在這里你可以通過命令到本地，也可以直接下載。之后便可以通過執(zhí)行示例代碼。下面結(jié)合實(shí)例中的內(nèi)容理解上述概念。更改應(yīng)用的狀態(tài)通過方法將發(fā)送到函數(shù)中，進(jìn)行狀態(tài)的更新。分別用來處理頁面和頁面狀態(tài)的更新。 實(shí)例講解Redux 示例代碼地址在這里 ,你可以通過git clone命令clone到本地，也可以直接下載。 然后通過執(zhí)行npm install 安裝所依賴的模塊 。之后便...

    roland_reed 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<