# React 总结
# 路由
自定义路由模块Router.js
//引入react-router-dom 模块
import {
HashRouter,//BrowserRouter
Switch,
Route
} from "react-router-dom"
class Router extends React.Component{
render(){
return(
<HashRouter>
<Switch>
<Route path-"/" component={Home}/>
</Switch>
</HashRouter>
)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
app.js加载路由模块
//引入自定义Router模块
import Router from "./Router"
render(){
return(
<Router/>
)
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
history
location
Match
# 形式1:
Home.js
import {
Switch,
Route,
Link
} from "react-router-dom"
//集成嵌套路由
<Content>
<Switch>
<Route path="/nav1" component={nav 1}/>
<Route path="/nav3" component={nav 3}/>
<Route path="/" component={nav 2}/>
</Switch>
</Content>
//跳转方式
//push
//不带传值
this.props.history.push("/路径")
//传值
this.props.history.push({
pathname:"/路径",
state:{
//将要传递的值
}
})
//Link
<Link to="/路径"> </Link>
<Link to={{
pathname:"/路径",
state:{
}
}}></Link>
//取值
this.props.location.state
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
# 形式2
# 组件传值
# 父传子
属性传值
//传值
<Father>
<Son value={"任何数据类型"}>
</Son>
</Father>
//取值
<Son>
{
this.props.value
}
</Son>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 子传父
回调函数方式和
//Father.js
//父组件定义回调函数
callback = (callbackValue)=>{
}
//将回调函数通过属性传递给子组件
<Father>
<Son callback={this.callback}>
</Son>
</Father>
//Son.js
//在将要传值的位置调用父组件传递过来的函数（点击，事件、请求）
this.props.callback("将要传递到父组的数据")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 生命周期
componentWillMount
componentDidMount
发送网络请求
接受创建阶段传递的数据
componentWillReceiveProps
this.props=props
接受更新阶段传递的数据
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount
# Redux
# 1、改造程序的入口index.js
import {Povider} from "react-redux"
<Povider>
<App/>
</Povider>
1
2
3
4
5
2
3
4
5
# 2、创建store
创建redux入口文件 index.js
//index.js
import {createStore,combineReducers} from "redux"
const rootReducer = combineReducers({
//合并reducer
xxxReducer:xxxReducer
})
const initialState = {};
const store = createStore(rootReducer,initialState);
export default store;
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 3、指定store
//index.js
import store from "./redux/index"
<Povider store-{store}>
<App/>
</Povider>
1
2
3
4
5
2
3
4
5
# 4、创建actionType
定义所有action的type，方便reducer根据type做出相应的处理
# 5、创建action的创建函数
定义函数，通过调用该函数，返回一个action对象
export function addTodoItem(item){
return{
type：'引入的type'，
item:item
}
}
1
2
3
4
5
6
2
3
4
5
6
# 6、定义reducer函数
exprot default function reducer(state,action){
}
1
2
3
2
3
# 7、组件获取数据和提交action
import {connect} from "react-redux"
import {addTodoItem} from "../redux/action"
function mapStateToProps(rootReducer){
return{
data:rootReducer.xxxReducer
}
}
function mapActionToProps(dispatch){
return{
add:(item)=>dispatch(addTodoItem(item))
}
}
export default connect(mapStateToProps,mapActionToProps)("组件名称")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19