成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

react中react-redux和react-router4.*的配合使用

duan199226 / 994人閱讀

摘要：在一個的項目中，目前來說項目過大，數(shù)據(jù)交互多的情況下選擇使用和是很常見的。

在一個react的項目中，目前來說項目過大，數(shù)據(jù)交互多的情況下選擇使用redux和router是很常見的。下面我就用代碼的展現(xiàn)形式，來舉例：

我們知道在react-redux的實踐中，最外層就是render函數(shù)的使用：

import React from "react";
import {render} from "react-dom";
import App from "./App";
//這里使用render渲染
render(
  ,
  document.getElementById("root")
);

當(dāng)我們使用redux的時候，就會先創(chuàng)建一個store，然后使用react-redux提供的Provider作為父組件包裹App：

render(
  
    
  ,
  document.getElementById("root")
);

當(dāng)搭配router后，這里仍然不需要要改變的。我們只需要將router的配置，放入App里面的需要的組件里面：
routerMap.js:

import React,{Component} from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch
} from "react-router-dom";
import Home from "../containers/Home";
import User from "../containers/User";
import Search from "../containers/Search";
import Detail from "../containers/Detail";
import City from "../containers/City";
import NotFound from "../containers/404Page";
class App extends Component{
  constructor(props, context){
    super(props, context);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate;
  }
  render(){
    return (
      
        

          {/**
           * 這里可以公共的樣式,比如 頭部, 尾部, 等.
           */}
           header
          {/*結(jié)合Switch組件可以匹配到都匹配不到的路勁,404等...*/}
          
            
            
            
            
            
            
          
          footer
        

      
    );
  }
}
export default App;

這時候后，在最外層：

import React from "react";
import {render} from "react-dom";
import App from "./routerMap";
//這里使用render渲染
render(
  
    
  ,
  document.getElementById("root")
);

其實最后router和redux的使用是互不影響的，一切正常使用就好。

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/83278.html

相關(guān)文章

  • react-redux

    摘要：主要用于構(gòu)建，被認(rèn)為是中的視圖。高效通過對的模擬，最大限度地減少與的交互。也就是說，用戶負(fù)責(zé)視覺層，狀態(tài)管理則是全部交給它。該回調(diào)函數(shù)必須返回一個純對象，這個對象會與組件的合并。 React 定義： React 是一個用于構(gòu)建用戶界面的 JAVASCRIPT 庫。React主要用于構(gòu)建UI，React 被認(rèn)為是 MVC 中的 V（視圖）。 特點： 聲明式設(shè)計 ?React采用聲明范式...

    sanyang 評論0 收藏0

  • React技術(shù)棧實現(xiàn)XXX點評App demo

    摘要：項目的架構(gòu)也是最近在各種探討研究。還求大神多指點項目技術(shù)總結(jié)技術(shù)棧項目結(jié)構(gòu)探究初體驗關(guān)于項目中的配置說明項目簡單說明開發(fā)這一套，我個人的理解是體現(xiàn)的是代碼分層職責(zé)分離的編程思想邏輯與視圖嚴(yán)格區(qū)分。前端依舊使用技術(shù)棧完成。 項目地址：https://github.com/Nealyang/R...技術(shù)棧：react、react-router4.x 、 react-redux 、 webp...

    wslongchen 評論0 收藏0

  • react+react-router+react-redux全家桶小項目開發(fā)過程分享

    摘要：項目地址下載完項目然后即可基于的項目，主要是為了學(xué)習(xí)實戰(zhàn)。數(shù)據(jù)都是固定的，從餓了么接口臨時抓的，模擬了一個的異步數(shù)據(jù)延遲，感謝餓了么。詳細(xì)信息可以看上面的官方文檔，我這里就簡單說一下我這個項目的應(yīng)用。 react-ele-webapp 項目地址 ：https://github.com/kliuj/reac... run 下載完項目npm install然后npm run dev 即可 ...

    zzir 評論0 收藏0

  • React構(gòu)建個人博客

    摘要：兄弟組件之間無法直接通信，它們需要利用同一層的上級作為中轉(zhuǎn)站。在兩個地方會用到，一是通過提交后需要拿到里面的數(shù)據(jù)，二是利用監(jiān)聽到發(fā)生變化后調(diào)用它來獲取新的數(shù)據(jù)。 前言 在學(xué)習(xí)react的過程中，深深的被react的函數(shù)式編程的模式所吸引，一切皆組件，所有的東西都是JavaScript。React框架其實功能很單一，主要負(fù)責(zé)渲染的功能，但是社區(qū)很活躍，衍生出了很多優(yōu)秀的庫和工具。個人覺得...

    lyning 評論0 收藏0

  • 從無到有-在create-react-app基礎(chǔ)上接入react-router、redux-saga

    摘要：將所有的需要鑒權(quán)的頁面放在例如下，只有在有微信相關(guān)鑒權(quán)的信息存在，才允許訪問接下來的界面，否則，容器內(nèi)甚至可以直接不渲染接下來的界面。而接下來的則是把路由導(dǎo)向至了一個微信端專用的。 搭建項目框架 新建項目 執(zhí)行如下代碼，用create-react-app來建立項目的基礎(chǔ)框架，然后安裝需要用到的依賴。 $ npx create-react-app my-test-project $ cd...

    褰辯話 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<