亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

使用 hooks 和 connect 訪問同一個 store

asce1885 / 1421人閱讀

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

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

既然我們是基于 Context Api，那么先來創(chuàng)建一個 context 對象

// store.js
import React from "react"

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

接著我們來構(gòu)造兩種訪問 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 實現(xiàn)
export const useStore = () => {
  return useReducer(reducer, useContext(StoreContext))
}

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

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

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

然后來看 consumer

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

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

那么我們在組件內(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)}

    
)
}

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/109863.html

相關(guān)文章

  • react與redux通信之hook

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

    lemon 評論0 收藏0

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

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

    tommego 評論0 收藏0

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

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

    derek_334892 評論0 收藏0

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

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

    Shihira 評論0 收藏0

  • 精讀《Function Component 入門》

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

    Scholer 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<