React项目的最佳实践
项目代码 从零开始简书项目? 从我第一次接触 ? 第一次看 因为可能写 ? 但是正在写课程代码里面 用了大量的这样的库,我在学的过程里面,感觉不太理解这些库的内部实现,这一点感觉到react上面的一些吃力的地方,还有待学习吧,目前只能是入门了react,感觉现在的前端开发,不是会 本次总结的重点,总结老师的项目架构,数据与数据与视图的完全解耦,是一个非常完美的开发方式,同时具备灵活性,但是非常万金油,项目这样搭建,非常易于维护 看一些最后的效果图 使用到的技术栈react react-dom redux redux-thunk immutable 保证数据的不可变性,配合 styled-components 使用js的方式写 react-transition-group react里面比较好用的动画库 axios 支持 mockjs 数据模拟库 使用他将不在需要在接触第三方去生成接口 react-loadable 让 react-router-dom 使用的技术比较多,是很完成的项目开发方式 页面与redux的交互 pages - index - store - index.js store的出口 - reducer.js 组件中数据的创建于修改 - actiontypes.js 定制统一的type值,用于修改reducer里面的值 - actionCreators.js 生成action,触发reducer,去进行数据修改 - index.js 视图 - style.js styled css 每个页面结构都是这样的,在最外面的 页面中的
项目结构变得非常清楚,非常利于维护 修改一个数据的流程
const mapState = state => ({ title: state.detail.get(‘title‘),// immutable数据 获取state树中的detail分支下的title content: state.detail.get(‘content‘) }) const mapDispatch = dispatch => ({ getDetail(id) { // 视图中触发该方法 方法内部触发dispatch 获取由actionCreators生成的action,交给reducer //.. 发送dispatch 操作reducer } }) export default connect( mapState,mapDispatch )(withRouter(Detail))
const mapDispatch = dispatch => ({ getDetail(id) { // 视图中触发该方法 方法内部触发dispatch 获取由actionCreators生成的action,交给reducer reducer dispatch(actionCreators.getDetail(id)) } })
import { actionType } from ‘./index‘ // 所有数据来源于index中 import axios from ‘axios‘ import { fromJS } from ‘immutable‘ function _getDetail(data) { // 私有方法 return { type: actionType.GET_TEXT_DETAIL,//action后返回出去 视图中的dispatch action data: fromJS(data) } } // function getDetail (id) { return dispatch => { //携带动态参数 // axios.get(`/textdetail?id=${id}`) axios.get(`/textdetail`) .then(res => { console.log(res.data); dispatch(_getDetail(res.data)) }) .catch(res => { console.log(res); }) } } export default { getDetail // 暴露出去改视图调用 } 这里就一定看看 import actionCreators from ‘./actionCreators‘ import actionType from ‘./actionType‘ import reducer from ‘./reducer‘ export { reducer,actionType,actionCreators } 很简单,就是将单个 上面的 所以我们看看 export default { GET_TEXT_DETAIL: "get_text_detail" } 对,就是action的type的仓库,现在dispatch已经得到了action,reducer里面的就会接收到dispatch发送的action import { actionType } from ‘./index‘ import { fromJS } from ‘immutable‘ const defaultState = fromJS({ title: ‘‘,content: ``,}) export default (state = defaultState,action) => { switch (action.type) { case actionType.GET_TEXT_DETAIL: console.log(action.data); return state.merge({ title: action.data.get(‘title‘),content: action.data.get(‘content‘) }) default: return state } } 这里就是匹配type,我们的type都从一个地方获取的,保证了代码出现失误的几率,通过 state.merge() 改变多条数据,页面发生变化,这就完成了数据的变化 虽然过程很复杂,但是明显感觉到,代码耦合性非常低,决定了这样会的项目结构可以完成比较大型的项目, 这里说的可能不是很清楚 可以看 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |