React總結

1. 搭環境

此處默認各位都是有那么一點前端開發經驗的，所以Node自行安裝。

1.1 腳手架

• 官方推薦 => create-react-app

// install $ npm install -g create-react-app 復制代碼

1.2 起項目

1.2.1 package.json

// setting "scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject" } 復制代碼

1.2.2 start

// start $ npm run start 復制代碼

1.2.3 打包

// start $ npm run build 復制代碼

2. 項目結構

|public |----|favicon.ico |----|index.html |dist |src |----|common | |pages | |statics | |----|img | | |iconfont | |store | |----|index.js | | |reducer.js | | |actionTypes.js | | |actionCreators.js | |App.js | |index.js |package.json |README.md 復制代碼

3. 入口文件

• /src/index

• 指定渲染的文件以及渲染的文件插入的DOM節點（document.getElementById('root')）。

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App';ReactDOM.render(<App />, document.getElementById('root')); 復制代碼

4. 渲染的入口文件

• /src/App.js

• 路由/全局樣式/派發store……

import React, { Component } from 'react'; import { GlobalStyle, RouteStyle } from "./style"; import { FontGlobal } from "./statics/iconfont/iconfont"; import { Provider } from "react-redux"; import { BrowserRouter, Route } from "react-router-dom"; import Home from "./pages/home"; import Detail from "./pages/detail"; import store from "./store"class App extends Component {render() {const providerStyle = {width: "100%",height: "100%"};return (<Provider store={store}><div style={providerStyle}><GlobalStyle /><FontGlobal /><BrowserRouter><RouteStyle><Route path="/" exact component={Home} /><Route path="/detail" exact component={Detail} /></RouteStyle></BrowserRouter></div></Provider>);} }export default App; 復制代碼

4.1 路由

• 依賴包 => react-router-dom

4.1.1 install

$ npm i react-router-dom -S 復制代碼

4.1.2 路由表

import { BrowserRouter, Route } from "react-router-dom";<BrowserRouter><Route path="/" exact component={Home} /><Route path="/detail" exact component={Detail} /> </BrowserRouter> 復制代碼

• exact精確匹配path路徑。

• component表示當前路徑加載組件。

4.1.3 路由傳參

4.1.3.1 通配符

• 刷新頁面參數不會丟失，但很丑

// Route <Route path='/path/:name' component={}/>// Link組件 <Link to="/path/xxx"></Link>// 取參 this.props.match.params.name 復制代碼

4.1.3.2 query

• 好看但會丟失參數

// Route <Route path='/path' component={}/>// Link組件 <Link to="{{ pathname: "/path", query: "queryValue" }}></Link>// 取參 this.props.location.query 復制代碼

4.1.3.3 state

• 同query

// Route <Route path='/path' component={}/>// Link組件 <Link to="{{ pathname: "/path", state: "stateValue" }}></Link>// 取參 this.props.location.state 復制代碼

4.1.4 路由跳轉

4.1.4.1 Link

<Line to="/path"></Link> 復制代碼

4.1.4.2 history.push

this.props.history.push({ pathname:' /user', ……}) 復制代碼

4.2 樣式

• 依賴包 => styled-components

• 將頁面中的標簽等用js封裝成樣式的組件。

4.2.1 全局樣式

// 1. 導出GlobalStyle import styled, { createGlobalStyle } from "styled-components";export const GlobalStyle = createGlobalStyle` html {width: 100%;height: 100%; } `;// 2. 在渲染入口文件中添加 <Provider><div style={providerStyle}><GlobalStyle /><FontGlobal /><BrowserRouter><RouteStyle><Route path="/" exact component={Home} /><Route path="/detail" exact component={Detail} /></RouteStyle></BrowserRouter></div> </Provider> 復制代碼

4.2.2 局部樣式

import styled from "styled-components";export const Img = styled.img.attrs({src: xxx })`width: 100px;height: 100px; `;// 導入使用 <Img/> 復制代碼

4.3 派發store

import { Provicer } from "react-redux"; import store from "./store"<Provicer store={store}>// 組件內都能接收到store </Provicer> 復制代碼

4.3.1 組件內接收

import { connect } "react-redux";class Header extends Component {render() {return (<div onClick={this.props.handleDispach}>Hello</div>this.props.login? <div>Logout</div>: <div>Login</div>)} }const mapStateToProps = (state) => ({// 映射store里面的值login: state.get("login") });const mapDispatchToProps = (dispatch) => {return {// 接受掛載在props上的方法 handleDispach() {// TODOdispatch(action);}} };export default connect(mapStateToProps, mapDispatchToProps)(Heacer); 復制代碼

5. redux

• 依賴包 => redux/react-redux/redux-thunk/immutable/redux-immutable

5.1 redux

• 用于構建store實例

import { createStore ,applyMiddleware, compose } from "redux"; import reducer from "./reducer"; import thunk from "redux-thunk";const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const store = createStore(reducer,composeEnhancers(applyMiddleware(thunk)) );export default store; 復制代碼

5.2 react-redux

• 用于派發store，在頁面中映射state數據等。

• 如上4.3.

5.3 redux-thunk

• 同過redux的中間件使用thunk。

• 用于在actionCreator.js中返回一個函數。

• 異步數據的處理。

// 1. 普通數據 export const handleSwitchList = (value) => ({type: actionTypes.SWITCH_LIST,value });// 2. 異步數據 =》 提供dispatch方法將action傳給頁面供用戶調用。 // mapDispatchToProps(dispatch)會派發action。 export const handleRecommendList = () => {return (dispatch) => {axios.get("/api/recommendList.json").then(res => {res = res.data.data;dispatch(handleRecomList(res));}).catch(err => {throw Error(err);})} }; 復制代碼

5.4 immutable

• 用于將數據結構變成immutable形式，強制修改會報錯。

// reducer.js import { fromJS } from "immutable";const defaultState = fromJS({value: xxxx }) export default (state, action) => {if (action.type ==="xxx") {return state.set("value", state.get("value"));} } 復制代碼

5.5 redux-immutable

• 用于將多個reducer合并。

import { combineReducers } from "redux-immutable"; import { reducer as headerReducer } from "../common/header/store"; import { reducer as homeReducer } from "../pages/home/store"; import { reducer as loginReducer} from "../pages/login/store";export default combineReducers({header: headerReducer,home: homeReducer,login: loginReducer }) 復制代碼

6. 動畫

• 依賴包 => react-transition-group

• 具體上GitHub

7. 生命周期函數

• 官網

轉載于:https://juejin.im/post/5cb738f3e51d456e5a0728e2

總結

以上是生活随笔為你收集整理的总结了点React，咱也不敢说的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。