You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
// 规则:react/jsx-closing-bracket-location react/jsx-closing-tag-location// bad<HellolastName="Smith"firstName="John"/>;<HellolastName="Smith"firstName="John"/>;// good 若能在一行中显示, 直接写成一行<HellofirstName="John"lastName="Smith"/>;// good 有多行属性的话, 新建一行关闭标签<HellofirstName="John"lastName="Smith"/>;
// actions/user.jsimport*asusersConstfrom'constants/user';// async actionexportconstlogin=()=>async(dispatch)=>{// login handlereturn{type: loginSuccess,
data
}}// sync actionexportconstloginSuccess=(data)=>({type: usersConst.LOGIN_SUCCESS,
data
})// reducers/user.jsimport{createStore}from'redux';import*asusersConstfrom'constants/user';functionuser(state={},action){switch(action.type){caseusersConst.loginSuccess:
return{ ...action.data};default:
returnstate;}}exportletuser=createStore(user);// constants/user.jsexportconstloginSuccess='LOGIN_SUCCESS';exportconstloginError='LOGIN_ERROR';
...
Redux 写法
建议 尽量使用简写方式,多用箭头函数和... 操作符
// not badexportfunctionlogin(data){returnasyncfunction(dispatch,getState){// do something}}// goodexportconstlogin=(data)=>async(dispatch,getState)=>{// do something}// not badfunctionuser(state={},action){switch(action.type){caseusersConst.loginSuccess:
returnObject.assign({},state,action.data);default:
returnstate;}}// goodfunctionuser(state={},action){switch(action.type){caseusersConst.loginSuccess:
return{...state, ...action.data};default:
returnstate;}}
建议 使用connect时使用简写
// not badimport{connect}from'react-redux'// A functional React componentfunctionApp({ message, onMessageClick }){return(<divonClick={()=>onMessageClick('hello')}>{message}</div>)}// Maps `state` to `props`:// These will be added as props to the component.functionmapState(state){return{message: state.message}}// Maps `dispatch` to `props`:functionmapDispatch(dispatch){return{onMessageClick(message){dispatch({type: 'click', message })}}}// Connect them:exportdefaultconnect(mapState,mapDispatch)(App)// okexportdefaultconnect((state)=>({message: state.message}),(dispatch)=>({onMessageClick: (message)=>{dispatch({type: 'click', message })}}))(App)
简要
JSX规范
建议
对齐方式强制
自关闭标签需要加一个空格建议
能用三元运算符,就不用if else
, 能用&&
就不用三元运算符建议
代码块使用多行注释,语句使用单行注释,参数说明使用代码后注释必须
JSX中属性用""
,js中用''
建议
使用classnames
包替代jsx中的样式处理逻辑组件规范
建议
首字母大写,尽量要求一目了然,可以借鉴CSS BEM的思想,BlockElementModify的命名方式强制
采用ES6class
写法来创建React Component
建议
文件名用jsx后缀建议
每个文件包含一个组件,Stateless Component
可以例外建议
使用prop-types
规定每个可接受属性的类型,并对 propTypes 加以说明,设置默认必须
使用camalCase
来命名props
建议
当props
的值为true
时,省略={true}
建议
React组件内部方法顺序排列方式(统一ES6写法)必须
仅在state
中保留必要的组件运行时状态,保持state
的简洁性必须
仅在实例化生命周期中绑定window事件必须
在组件销毁期解绑window事件建议
使用扩展操作符向子组件传递属性必须
总是在Refs里使用回调函数建议
尽可能不使用context
,绝大多数的应用程序不需要使用context
,它虽然提供了便利可以访问组件树中任一节点的上下文,但是违背了单向数据流和自顶向下的原则。context
一个实验性的API,在将来可能会被废弃掉。关于是否应该使用context
,可以阅读react官方的说法。组件分类
组件主要分为通用组件与业务组件。
通用组件
业务组件:
组件通信
props
给子组件,子组件通过events
给父组件发送信息,遵循单向数据流动与自顶向下的原则。(嵌套太深时,不使用)PubSub
模式(利于解耦)state
提升,通过公用父组件通信PubSub
模式PubSub
模式Flux
实现Redux规范
Redux结构
actions
、reducers
和constants
中建议
一一对应,方便查找与维护。actions 存放同步action和异步action
reducers 存放对应store的CURD操作
constants 存放对应action的常量名词,便于维护与查看
Redux 写法
建议
尽量使用简写方式,多用箭头函数和...
操作符建议
使用connect
时使用简写建议
仅在容器组件中使用connect
,将数据传递给展示组件,权责分明,方便维护优化
使用redux-action
减少样板代码优化
state
范式化,更加合理的规范化state的存储结构。更新时间
v1.0
: 2017/12/11参考
The text was updated successfully, but these errors were encountered: