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. 生命周期函数

• 官网