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

資訊專欄INFORMATION COLUMN

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

duan199226 / 958人閱讀

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

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

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

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

當(dāng)我們使用redux的時(shí)候，就會(huì)先創(chuàng)建一個(gè)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;

這時(shí)候后，在最外層：

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

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

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

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

相關(guān)文章

  • react-redux

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

    sanyang 評論0 收藏0

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

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

    wslongchen 評論0 收藏0

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

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

    zzir 評論0 收藏0

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

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

    lyning 評論0 收藏0

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

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

    褰辯話 評論0 收藏0

發(fā)表評論

0條評論

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