React学习总结

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:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NVM490UZ-1576496165202)(/Users/zhaotianwei/Desktop/20191212083530.jpg)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FYdH0Dpj-1576496165203)(/Users/zhaotianwei/Desktop/20191212090140.jpg)]

组件传值

父传子

属性传值

//传值
<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)("组件名称")
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值