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>
		)
 }
}

app.js加载路由模块

//引入自定义Router模块
import Router from "./Router"

render(){
	return(
		<Router/>
	)
}

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

形式2

组件传值

父传子

属性传值

//传值
<Father>
	<Son value={"任何数据类型"}>
	
	</Son>
</Father>

//取值
<Son>
{
	this.props.value
}
</Son>

子传父

回调函数方式和

//Father.js

//父组件定义回调函数
callback = (callbackValue)=>{

}

//将回调函数通过属性传递给子组件
<Father>
	<Son callback={this.callback}>
	
	</Son>
</Father>


//Son.js
//在将要传值的位置调用父组件传递过来的函数（点击，事件、请求）

this.props.callback("将要传递到父组的数据")

生命周期

componentWillMount

componentDidMount

发送网络请求

接受创建阶段传递的数据

componentWillReceiveProps

this.props=props

接受更新阶段传递的数据

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

componentWillUnmount

Redux

1、改造程序的入口index.js

import {Povider} from "react-redux"

<Povider>
	<App/>
</Povider>

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;

3、指定store

//index.js
import store from "./redux/index"
<Povider store-{store}>
	<App/>
</Povider>

4、创建actionType

定义所有action的type，方便reducer根据type做出相应的处理

5、创建action的创建函数

定义函数，通过调用该函数，返回一个action对象

export function addTodoItem(item){
	return{
			type：'引入的type'，
			item:item
	}
}

6、定义reducer函数

exprot default function reducer(state,action){
	
}

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)("组件名称")