react簡書

開發項目以前的準備

https://www.chromefor.com/  登陸此網站 下載相關crx react插件 否則要FQ

下載 React Developer Tools 谷歌插件
下載 Redux DevTools 插件

npm install axios  // 安裝axios

npm install --save styled-components  安裝 css.js

npm install react-transition-group --save 安裝動畫插件

npm install --save redux 安裝redux 

npm install --save react-redux 安裝react-redux 方便在react中使用redux

npm install --save-dev redux-devtools-extension  增長Redux-DevTools調試

npm install immutable  用來輔助state的 不改變state的原始值

npm install redux-immutable 用來進階輔助 不改變state的原始值

npm install redux-thunk  安裝redux 中間件 用來發送請求

npm install --save react-router-dom  安裝路由

npm install react-loadable --save  異步加載組件

 

安裝 react 腳手架
npm install -g create-react-app

而後建立一個 目錄 

create-react-app '項目名稱'

精簡目錄

 在src下 建立store

index.js中

  

reducer.js中

 

 

 在App.js 中 將store 與全部組件進行關聯 (

react-redux 的做用

)

組件中如何鏈接

 

 

增長Redux-DevTools調試

輔助不改變state的值 

進階state寫法

 

而後就是 store的拆分.

 大筆記本

index

reducer

各個小筆記本

index

reducer

actionCreators

const

 

 

 header頁面 

// 請求 axios 因此不能用無狀態組件

先安裝 redux-thunk  

npm install redux-thunk

配置

下面是官網

引入路由

 

 

 

//性能調優  防止因redux改變 底部組件重複渲染 在用了 immutable的前提下沒有坑 全部的Component都改爲PureComponent

若是沒有用的話 性能調優就須要用到  

shouldComponentUpdate 來作存儲對象是否變化 的判斷 是否從新渲染