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

資訊專(zhuān)欄INFORMATION COLUMN

使用 hooks 和 connect 訪(fǎng)問(wèn)同一個(gè) store

asce1885 / 1367人閱讀

摘要：距離正式發(fā)布已經(jīng)過(guò)去好幾個(gè)月了，，，也都支持了的用法，那么有沒(méi)有可能用來(lái)實(shí)現(xiàn)一個(gè)同時(shí)支持和訪(fǎng)問(wèn)的呢答案是肯定的。那么我們?cè)诮M件內(nèi)應(yīng)該如何使用呢至此，我們就實(shí)現(xiàn)了基于原生的跨組件通信，和的訪(fǎng)問(wèn)都通過(guò)實(shí)現(xiàn)，默認(rèn)支持了淺比較。

React Hooks 距離正式發(fā)布已經(jīng)過(guò)去好幾個(gè)月了，redux，mobx，也都支持了 Hooks 的用法，那么有沒(méi)有可能用 React Context API & Hooks 來(lái)實(shí)現(xiàn)一個(gè)同時(shí)支持 class component 和 functional component 訪(fǎng)問(wèn)的 store 呢？答案是肯定的。

既然我們是基于 Context Api，那么先來(lái)創(chuàng)建一個(gè) context 對(duì)象

// store.js
import React from "react"

const initialStore = {}
const StoreContext = React.createContext(initialStore)

接著我們來(lái)構(gòu)造兩種訪(fǎng)問(wèn) store 的方法：

Hooks 的方式：

// store.js
import {useReducer, useContext} from "react"

// 聲明 reducer
export const reducer = (state, action) => {
  switch (action.type) {
    case "set":
      return { ...state, ...action.payload }
    case "reset":
      return {}
    default:
      throw new Error(
        `action: "${action.type}" not defined`
      )
  }
}

// 基于原生 Hooks 實(shí)現(xiàn)
export const useStore = () => {
  return useReducer(reducer, useContext(StoreContext))
}

HOC 的方式：
HOC 需要有一個(gè)上下文環(huán)境才可以訪(fǎng)問(wèn) store，所以我們先來(lái)構(gòu)造 provider

// 構(gòu)造一個(gè)根組件 Provider
export const StoreProvider = ({ children }) => {
  const [context, dispatch] = useStore()
  return {children}
}

這個(gè) StoreProvider 可以像 react-redux 的 Provider 一樣，包裹在根組件的最外層

然后來(lái)看 consumer

export const connect = (WrappedComponent) => {
  return class ConnectClass extends React.Component {
    render () {
      return (
        
          {
            state => 
          }
        
      )
    }
  }
}

我們封裝了一個(gè) connect 函數(shù)，作為 HOC，用法和 react-redux的 connect 的單參形式形似。

那么我們?cè)诮M件內(nèi)應(yīng)該如何使用呢? Class Component 
import React from "react"
import { connect } from "store"

export default @connect class Component extends React.Component {
  handleClick = () => {
    this.props.dispatch({type: "set", payload: {a: 1}})
  }

  render() {
    return (

      
{JSON.stringify(this.props)}

      
{JSON.stringify(this.props)}

    
)
  }
}
Functional Component 
import React from "react"
import { useStore } from "store"

export default const Component = () => {
  const [store, dispatch] = useStore()
  const handleClick = () => {
    dispatch({type: "set", payload: {a: 1}})
  }

  return (

      
{JSON.stringify(store)}

      
{JSON.stringify(store)}

    
)
}

至此，我們就實(shí)現(xiàn)了基于 react 原生 api 的跨組件通信，hooks 和 hoc 的訪(fǎng)問(wèn)都通過(guò) context api 實(shí)現(xiàn)，默認(rèn)支持了淺比較。

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

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

相關(guān)文章

  • react與redux通信之hook

    摘要：新方案隨著的發(fā)布，功能正式投入使用。那么，如果我們使用了，又該如何跟通信呢針對(duì)于這個(gè)問(wèn)題，業(yè)界有人提供了一個(gè)取代的新插件。提供的創(chuàng)建上下文，返回該對(duì)象。可以預(yù)見(jiàn)的是，當(dāng)你使用了，會(huì)在項(xiàng)目中逐漸把消滅，最后跟語(yǔ)法糖告別，回歸函數(shù)的世界。 react和redux建立通信的方式 有2種方案： 老方案connect 新方案hook 老方案connect 曾經(jīng)，我們會(huì)使用connect建立r...

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

  • Hooks + Context：狀態(tài)管理的新選擇

    摘要：用戶(hù)點(diǎn)擊改變?nèi)譅顟B(tài)崔然渲染整顆組件樹(shù)有沒(méi)有解決方案呢當(dāng)然有創(chuàng)建一個(gè)只接收的新組件，并將組件中的邏輯都移到組件中。最終的示例使用全局狀態(tài)和生成全局狀態(tài)和崔然完整示例見(jiàn)結(jié)論在和出現(xiàn)之前，缺乏自帶的全局狀態(tài)管理能力。 React 16.3 版本，正式推了出官方推薦的 context API —— 一種跨層級(jí)的數(shù)據(jù)傳遞方法。React 16.8 版本，推出了全新的 hooks 功能，將原本只...

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

  • 可能是基于 Hooks 和 Typescript 最好的狀態(tài)管理工具

    摘要：接上一篇我理想中的狀態(tài)管理工具之前說(shuō)，對(duì)于我個(gè)人來(lái)而言，理想的狀態(tài)管理工具只需同時(shí)滿(mǎn)足兩個(gè)特點(diǎn)簡(jiǎn)單易用，并且適合中大型項(xiàng)目完美地支持未能找到一個(gè)完美滿(mǎn)足這兩點(diǎn)的，所以我決定自己造了一個(gè)叫。把分為和兩類(lèi)是很好的實(shí)踐。 接上一篇：我理想中的狀態(tài)管理工具 之前說(shuō)，對(duì)于我個(gè)人來(lái)而言，理想的狀態(tài)管理工具只需同時(shí)滿(mǎn)足兩個(gè)特點(diǎn)： 簡(jiǎn)單易用，并且適合中大型項(xiàng)目 完美地支持 Typescript 未...

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

  • 精讀《怎么用 React Hooks 造輪子》

    摘要：可以看到，這樣不僅沒(méi)有占用組件自己的，也不需要手寫(xiě)回調(diào)函數(shù)進(jìn)行處理，這些處理都?jí)嚎s成了一行。效果通過(guò)拿到周期才執(zhí)行的回調(diào)函數(shù)。實(shí)現(xiàn)等價(jià)于的回調(diào)僅執(zhí)行一次時(shí)，因此直接把回調(diào)函數(shù)拋出來(lái)即可。 1 引言 上周的 精讀《React Hooks》 已經(jīng)實(shí)現(xiàn)了對(duì) React Hooks 的基本認(rèn)知，也許你也看了 React Hooks 基本實(shí)現(xiàn)剖析（就是數(shù)組），但理解實(shí)現(xiàn)原理就可以用好了嗎？學(xué)的是...

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

  • 精讀《Function Component 入門(mén)》

    摘要：比如就是一種，它可以用來(lái)管理狀態(tài)返回的結(jié)果是數(shù)組，數(shù)組的第一項(xiàng)是值，第二項(xiàng)是賦值函數(shù)，函數(shù)的第一個(gè)參數(shù)就是默認(rèn)值，也支持回調(diào)函數(shù)。而之所以輸出還是正確的，原因是的回調(diào)函數(shù)中，值永遠(yuǎn)指向最新的值，因此沒(méi)有邏輯漏洞。 1. 引言 如果你在使用 React 16，可以嘗試 Function Component 風(fēng)格，享受更大的靈活性。但在嘗試之前，最好先閱讀本文，對(duì) Function Com...

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

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

0條評(píng)論

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