react学起来好头疼,很多概念好像没搞清楚

全家桶
"react":"^16.2.0",
"react-dev-utils":"^5.0.0",
"react-dom":"^16.2.0",
"react-redux":"^5.0.7",
"react-router-dom":"^4.2.2",
"redux":"^3.7.2",
"redux-thunk":"^2.2.0",
这都是什么???
Vue相比之下友好很多,大部分看个教程就能开始用。
状态管理
Vue官方已经分好了4个操作,数据存放以及操作一目了然。然后现在学react跟着某个教程写的
importaxiosfrom'axios';
import{getRedirectPath}from'../util.js';
constREGISTER_SUCCESS='REGISTER_SUCCESS'
constERROR_MSG='ERROR_MSG'
constinitState={
redirectTo:'',
isAuth:false,
msg:'',
user:'',
pwd:'',
type:'',
}
//reducer
exportfunctionuser(state=initState,action){
switch(action.type){
caseREGISTER_SUCCESS:
return{...state,msg:'',redirectTo:getRedirectPath(action.payload),isAuth:true,...action.payload}
caseERROR_MSG:
return{...state,isAuth:false,msg:action.msg}
default:
returnstate
}
}
functionregisterSuccess(data){
return{type:REGISTER_SUCCESS,payload:data}
}
functionerrorMsg(msg){
return{msg,type:ERROR_MSG}
}
exportfunctionregisger({user,pwd,repeatpwd,type}){
if(!user||!pwd||!type){
returnerrorMsg('用户名密码必须输入')
}elseif(pwd!==repeatpwd){
returnerrorMsg('密码和确认密码不同')
}
returndispatch=>{
axios.post('/user/register',{user,pwd,type}).then(res=>{
if(res.status===200&&res.data.code===0){
dispatch(registerSuccess({user,pwd,type}))
}else{
dispatch(errorMsg(res.data.msg))
}
})
}
}
dispatch到底在干嘛?
组件传值
Vue:父向子:子组件数据名="父组件数据名"子向父@子组件传递的事件名="父组件定义的事件"this.$emit('子组件传递的事件名',数据)react:this.props.history.push('/register')你这个props里面存了什么?为什么一下有history函数一下又有this.props.msg这种字符串?
教程引入那么多插件每个插件里导入的函数是做什么的?你告诉我这里用了这个插件的这个函数,但是他到底是干什么的?要解决什么问题?
Vue一些东西一句代码解释清楚了,react想写笔记不知道从哪里下手,一股强耦合的味道我现在总感觉缺了什么东西,概念好像没搞清楚。有大神提点一下嘛?
月关宝盒
浏览 529回答 2
2回答

慕勒3428872

建议跟着官方教程走,国内总结的教程说实在的,有时候上来就全家桶但是又不讲清楚各个都干嘛的是有些头疼。比如里边的redux实际上并不是react独家的东西,它是个JavaScript状态容器,提供可预测化的状态管理,只是对react做了支持而已。router、thunk之类的都是遇到一些场景问题了才需要引入的,刚开始学没必要上来就全齐活。一句即可:npminstall-gcreate-react-app
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript