项目代码 从零开始简书项目

​ 从我第一次接触vue这个框架已经过了快一年的时间,陪伴我从前端小白到前端工程师,前端时间也是使用了 ts+vue这样的组合写代码,明显感觉vue与ts似乎没有产生比较好的化学反应,而vue这一块,也算是比较熟练了,对底层也有一些了解,我开始了react的产生了一些兴趣

​ 第一次看react慕课网上的一个免费课程React 16实现订单列表及评价功能,还不错,让我大致了解了react也就是jsx的一些代码风格

因为可能写vue的时间比较久了,转到react还没有我想象的的难度那么大,一切似乎都顺风顺水,后面我就开始看慕课网的React 16.4 开发简书项目 从零基础入门到实战,老师将前面基础讲的比较全面,虽然没有过api,但是讲了 react的周边 redux, redux-thunk, redux-saga react-redux ,等等,老师是很有水平

​ 但是正在写课程代码里面 用了大量的这样的库,我在学的过程里面,感觉不太理解这些库的内部实现,这一点感觉到react上面的一些吃力的地方,还有待学习吧,目前只能是入门了react,感觉现在的前端开发,不是会js,就能写出代码的了,要学习各种各样的各种库的API,只会用,不了解其原理,今年是这个库,明年是哪个库,已经不是前端开发者了 是前端框架使用者学习成本过高,陷入到一种比较迷茫的阶段,有点不知所措,

本次总结的重点,总结老师的项目架构,数据与数据与视图的完全解耦,是一个非常完美的开发方式,同时具备灵活性,但是非常万金油,项目这样搭建,非常易于维护

看一些最后的效果图

使用到的技术栈

react react-dom react项目开发必备


redux react的数据管理工具

redux-thunk redux的中间件,让reduxdispatch支持异步操作

immutable 保证数据的不可变性,配合PureComponent使用,效果拔群


styled-components 使用js的方式写css,是比less,更加好用的工具

react-transition-group react里面比较好用的动画库


axios 支持Promiseajax

mockjs 数据模拟库 使用他将不在需要在接触第三方去生成接口


react-loadablereact可以异步加载组件的插件


react-router-dom react的路由处理库react-router和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

每个页面结构都是这样的,在最外面的reducer里面进行每个页面中的reducer的合并,这样做达到了

页面中的视图数据的完全解耦

页面页面之前的数据完全解耦

项目结构变得非常清楚,非常利于维护

修改一个数据的流程

  1. 在组件的视图中, 通过 react-redux里面的connent获取state dispatch,库帮我们将state dispatch 挂载到了this.props中,
  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))
  1. 导入当前文件夹下的store/actionCreaters.js ,在mapDispatch里面发送action给reducer
 const mapDispatch = dispatch => ({
getDetail(id) {
// 视图中触发该方法 方法内部触发dispatch 获取由actionCreators生成的action,交给reducer
reducer dispatch(actionCreators.getDetail(id))
}
})
  1. actionCreators.js中已经异步操作,或者直接发放action
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 // 暴露出去改视图调用
}

这里就一定看看store/index.js是这么协调数据的

import actionCreators from './actionCreators'
import actionType from './actionType'
import reducer from './reducer' export { reducer, actionType, actionCreators }

很简单,就是将单个store的入口统一了

上面的actionCreators.js导入了actionType

所以我们看看store/actionType写了什么数据

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() 改变多条数据,页面发生变化,这就完成了数据的变化

虽然过程很复杂,但是明显感觉到,代码耦合性非常低,决定了这样会的项目结构可以完成比较大型的项目,

这里说的可能不是很清楚 可以看github上面的项目代码从零开始简书项目

React项目的最佳实践的更多相关文章

  1. React服务器渲染最佳实践

    源码地址:https://github.com/skyFi/dva-starter React服务器渲染最佳实践 dva-starter 完美使用 dva react react-router,最好用 ...

  2. 我们编写 React 组件的最佳实践

    刚接触 React 的时候,在一个又一个的教程上面看到很多种编写组件的方法,尽管那时候 React 框架已经相当成熟,但是并没有一个固定的规则去规范我们去写代码. 在过去的一年里,我们在不断的完善我们 ...

  3. SpringBoot系列: Spring项目异常处理最佳实践

    ===================================自定义异常类===================================稍具规模的项目, 一般都要自定义一组异常类, 这 ...

  4. TypeScript在react项目中的实践

    前段时间有写过一个TypeScript在node项目中的实践. 在里边有解释了为什么要使用TS,以及在Node中的一个项目结构是怎样的. 但是那仅仅是一个纯接口项目,碰巧赶上近期的另一个项目重构也由我 ...

  5. go项目dockerfile最佳实践

    1. 前言 2. 不需要cgo情况下的最佳实践 3. 依赖cgo情况下的最佳实践 1. 前言 这几天在构建golang编写的web项目中,关于dockerfile编写的一些总结 可能是单纯我比较菜(大 ...

  6. React 代码共享最佳实践方式

    任何一个项目发展到一定复杂性的时候,必然会面临逻辑复用的问题.在React中实现逻辑复用通常有以下几种方式:Mixin.高阶组件(HOC).修饰器(decorator).Render Props.Ho ...

  7. 《React设计模式与最佳实践》笔记

    书里的demo都是15.3.2以下版本的,有些demo用最新的react 16.x版本会报错,安装包的时候记得改一下版本   第一章 React 基础 命令式编程描述代码如何工作,而声明式编程则表明想 ...

  8. 编写React组件的最佳实践

    此文翻译自这里. 当我刚开始写React的时候,我看过很多写组件的方法.一百篇教程就有一百种写法.虽然React本身已经成熟了,但是如何使用它似乎还没有一个"正确"的方法.所以我( ...

  9. vue项目缓存最佳实践

    需求 在开发vue的项目中有遇到了这样一个需求:一个视频列表页面,展示视频名称和是否收藏,点击进去某一项观看,可以收藏或者取消收藏,返回的时候需要记住列表页面的页码等状态,同时这条视频的收藏状态也需要 ...

随机推荐

  1. bootstrap-table 分页增删改查之一(增加 删除)

    先上效果图 引入js文件 <!--js jquery --> <script type="text/javascript" src="${pageCon ...

  2. Sublime Text 3.1 3170正式版+Patch注册机

        Sublime Text 是一款轻量级的代码编辑器,也是HTML和散文先进的文本编辑器.Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等. ...

  3. Struts 2 官方文档中文版

    最近正在学 Struts 2 ,咱英文水平不行啊,找到了<Struts 2 官方文档中文版>,虽然翻译的不全,有总比没有强. 地址:https://cwiki.apache.org/con ...

  4. Jmeter————监控服务器性能

    1. 下载jmeter插件 上面2个是jmeter插件,第3个要放在监控的服务器中. 2. 解压压缩包 找到解压包中的JAR文件,并拷贝到jmeter的lib/ext目录下,这里下载的1.4版本的插件 ...

  5. 实战:Nginx如何让用户通过用户名和密码认证访问WEB站点

    有时我们会有这么一种需求,就是你的网站并不想提供一个公共的访问或者某些页面不希望公开,我们希望的是某些特定的客户端可以访问.那么我们可以在访问时要求进行身份认证,就如给你自己的家门加一把锁,以拒绝那些 ...

  6. SQL server reporting service - rsReportServerNotActivated error solution

    描述: 今天在原有的数据库版本上增加了Reporting Service 功能,数据库完成安装后,没有发现ReportServer和 ReportServerTemp 两个数据库 于是从其他服务器上, ...

  7. 深入浅出VisualStudio——使用NuGet来安装AjaxControlToolKit

    使用NuGet可以加速配置Visual Studio 2010的开发环境. 1.创建一个空的ASP.NET web站点项目. 2.右键单击此web 站点,选择Manage NuGet Packages ...

  8. T-SQL批处理

    批处理简介 批处理是作为一个逻辑单元的T-SQL语句.如果一条语句不能通过语法分析,那么不会运行任何语句.如果一条语句在运行时失败,那么产生错误的语句之前的语句都已经运行了. 为了将一个脚本分为多个批 ...

  9. Python中readline()函数 去除换行符

    从Python中readline()函数读取的一行内容中含有换行符\n,很多时候我们需要处理不含有换行符的字符串,此时就要去掉换行符\n. 方法是使用strip()函数. 例子如下: f = open ...

  10. 原生JS实现轮播图的效果

    原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...