网站是毕业设计的作品,开发这个网站的目的主要用于记录一些笔记,以及聚合一些资讯信息,也算自己在网络世界中的一块静地吧,可以在这里一些技术上想法的实践。

网站最初前端使用vue开发,在前段时间由于项目的开发进度已经不是那么紧急,有了一些空闲时间。而对没有使用过React又一直耿耿于怀,索性就使用React进行了一次前端的重构。

学习一门新的技术最基本的当然就是阅读相关文档了,作为一个单页面应用前端路由当然是不可能少了,而使用React如果不使用Reduce那又感觉发挥不其作用(虽然他们其实也没什么必须的关系)。所以在这里使用了reactreact-routerreact-redux,以下为在使用React开发中的一些见闻,有幸被你看到该文,如有不对之处,还望指出,如果你不小心被带入坑,本人概不负责。

首先就是阅读React的文档了,文档使用大量举例的形式介绍如何使用React进行开发,如如何设计stateprops,如何组件间通信,如何设计组件等。文档虽然进行了详细的介绍,但是往往还是需要真正的实践才能发现其中的妙处。如stateprops的设计,在一个X组件中拥有YZ两个组件,假设Y组件拥有一个输入框,而Z组件可能需要用到Y组件输入的值做出一定的变化,当然如果把他们写到一起也不是不可以的,但是考虑到组件复用,功能单一等因素还是拆开比较合理,那么这个值到底应该哪个组件来储存呢?如下两个组件分别为YX,这样设计明显是不符合state设计的,拥有太多冗余部分。

 
  1. class InputComponent extends Component {
  2. constructor () {
  3. super()
  4. this.state = {
  5. value: ''
  6. }
  7. }
  8. valInput (e) {
  9. let value = e.target.value
  10. this.setState({value})
  11. this.props.inputChange(value)
  12. }
  13. render () {
  14. return <input onChange={this.valInput.bind(this)}/>
  15. }
  16. }
 
 
  1. class ParentComponent extends Component {
  2. constructor () {
  3. super()
  4. this.state = {
  5. val: ''
  6. }
  7. }
  8. inputChange (val) {
  9. this.setState({val})
  10. }
  11. render () {
  12. return (
  13. <section>
  14. {this.state.val}
  15. <InputComponent inputChange={this.inputChange.bind(this)}/>
  16. </section>
  17. )
  18. }
  19. }
 

如果使用如下的写法或许看起来更好

 
  1. class InputComponent extends Component {
  2. render () {
  3. let {val, inputChange} = this.props
  4. // 这里的val并不是必须的,但是当一个值来自非输入控件的时候,如可编辑的div,ace在每次执行render函数的时候都会导致原来输入的值被清空。
  5. return <input value={val} onChange={inputChange}/>
  6. }
  7. }
 
 
  1. class ParentComponent extends Component {
  2. constructor () {
  3. super()
  4. this.state = {
  5. val: ''
  6. }
  7. }
  8. inputChange (e) {
  9. this.setState({val: e.target.value})
  10. }
  11. render () {
  12. let val = this.state.val
  13. return (
  14. <section>
  15. {val}
  16. <InputComponent val={val} inputChange={this.inputChange.bind(this)}/>
  17. </section>
  18. )
  19. }
  20. }
 

react-router提供了前端路由基本的需求,根据需要使用到的功能在项目文档介绍中即可找到具体使用方法。基本的配置和其他框架也是大同小异,但是很多API的使用确有些大相径庭(和vue相比),还是需要仔细通读文档的,以免在开发中出现问题再去解决浪费时间,如IndexRoutevue中可以在子路由通过''这样的空字符来作为默认UI

 
  1. function root () {
  2. this.path = '/'
  3. this.component = require('pages/index').default
  4. }
  5. function demo () {
  6. this.path = 'demo'
  7. this.getComponent = (nextstate, cb) => {
  8. require.ensure([], (require) => {
  9. cb(null, require('pages/demo').default)
  10. })
  11. }
  12. }
  13. const createRoute = (R) => {
  14. let route = new R()
  15. route.childRoutes = route.childRoutes && route.childRoutes.map(r => createRoute(r))
  16. return route
  17. }
  18.  
  19. export default [root, demo].map((route) => createRoute(route))
 

react-redux在从表象理解Redux中进行了简单介绍。Redux的使用减少了开发中思考的时间,同时也避免了一些可能的问题。在使用过程中也发现一些问题,使用Redux必然导致大量的dispatch出现在组件中,如何防止业务变得复杂和庞大后导致项目变得难以维护,也是值得思考的。在被改版的网站中使用页面+组件的方式开发,一个页面表示除了跟组件外的最高级组件,可拥有多个组件,只有页面才能向reducer发起action,所有多个组件共用的数据则通过在页面中传递到子组件的props,子组件如果需要更新数据,则通过props属性调用父组件传入的方法向上传递命令,在页面中使用dispath来指定action来调用reducer进行数据更新,当然有时候也需要在action中进行处理后在dispathactionreducer(比如网络请求)。值得注意的是每次dispath一个actionRedux都会遍历所有已经注册的reducer(reducer往往由多个子reducer组成),也就是说所有reducer都会被调用(从项目中的表现和文档来看是这样的),一下是被改版网站使用的reducer部分代码。

 
  1. export default class ArticleReducer {
  2. [AAS.ARTICLE_REQUEST_STATE] (state, action) {
  3. return Object.assign({}, state, {loading: action.loading})
  4. }
  5. [AAS.ARTICLE_SEARCH_STATE] (state, action) {
  6. return Object.assign({}, state, {searching: action.searching})
  7. }
  8. }
 
 
  1. const reducers = {}
  2. const AR = new ArticleReducer()
  3. const NR = new NewsReducer()
  4. reducers.articles = (state = initState.article, action) => {
  5. return AR[action.type] ? AR[action.type](state, action) : state
  6. }
  7. reducers.editor = (state = initState.editor, action) => {
  8. return ER[action.type] ? ER[action.type](state, action) : state
  9. }
 

就使用React后的感觉,由于第一次真正使用Redux这样的状态管理工具来进行进行开发(虽然也有使用vuex,但是都不是基于整个项目的),开发流程变得更加可控,数据流向变得清晰,而在开发中各个工具耦合性也变得更低,总的来说这是一次不错的尝试。不过个人觉得不管使用什么技术,复杂程度随着业务的增加必定变得更高,而要维持一个项目的稳定,健壮,易于维护将变得更加困难。

最后不得不感叹,良好编程习惯的重要性。

使用React改版网站的更多相关文章

  1. 使用React改版网站后的一些感想

    文章转载:http://www.jianshu.com/p/8f74cfb146f7 网站是毕业设计的作品,开发这个网站的目的主要用于记录一些笔记,以及聚合一些资讯信息,也算自己在网络世界中的一块静地 ...

  2. React官方网站学习

    React官方网站  英文版 https://reactjs.org/tutorial/tutorial.html React官方网站  中文版 https://react.docschina.org ...

  3. react实现网站换肤功能

    一.目标   提供几种主题色给用户选择,然后根据用户的选择改变应用的主题色: 二.实现原理   1.准备不同主题色的样式文件:   2.将用户的选择记录在本地缓存中:   3.每次进入应用时,读取缓存 ...

  4. React 学习笔记(学习地址汇总)

    好的博文地址:http://www.ruanyifeng.com/blog/2015/03/react.html 官网学习地址:http://facebook.github.io/react/docs ...

  5. React Test相关资料

    karma 前端测试驱动器,生产测试报告,多个浏览器 mocha js的测试框架,相当于junit chai,单元测试的断言库,提供expect shudl assert enzyme sinon.j ...

  6. React入门--------JSX

    React学习网站 React官方英文网站:http://reactjs.cn/react/docs/top-level-api.html React官方中文网站:http://www.css88.c ...

  7. React系列(一):React入门

    React简介 1.由来 React是有Facebook开发出来用于构建前端界面的JS组件库,由于其背后的强大背景,使得这款库在技术开发上完全没有问题. 2.React的优势 解决大规模项目开发中数据 ...

  8. iOS程序员的React Native开发工具集

    本文整理了React Native iOS开发过程中有用的工具.服务.测试.库以及网站等. 工具 你可以选择不同的开发环境:DECO.EXPO或者你可以使用Nuclide+Atom,目前我使用EXPO ...

  9. React设计思想

    熟悉一个新技术的关键是熟悉他的特色和理念 React框架本身和我们常用的JavaScript MVC框架,如:AngularJS,Backbone,Ember等,没有直接的可比性.在React的官方博 ...

随机推荐

  1. http和socket之长连接和短连接区别【转】

    转自:https://blog.csdn.net/mengyafei43/article/details/25195445 TCP/IP TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层 ...

  2. mysql-5.7.13-winx64 免安装版配置方法

    1.下载MySQL Community Server 5.7.13 解压MySQL压缩包 2.修改 my-default.ini skip-grant-tables 作用是安装好MySQL后 免密码登 ...

  3. VUE之搭建脚手架

    原文转自http://blog.csdn.net/Shiyaru1314/article/details/54963027 目录(?)[-] 1 安装之前需要检查是否已经安装NodeJS的环境 安装文 ...

  4. 八、vue使用element-ui组件

    element-ui组件 1.引入element import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element- ...

  5. Java中final关键字概述

    使用final修饰过的变量都不可以改变: 1.final修饰变量 恒定不变的属性,可以用final关键字来修饰: 变量名建议全部使用大写 final修饰的变量不能改变,如果程序中重新赋值,编译报错 例 ...

  6. Ibatis.Net 数据库操作学习(四)

    一.查询select 还记得第一篇示例中是如何读出数据库里3条数据的吗?就是调用了一个QueryForList方法,从方法名就知道,查询返回列表. 1.QueryForList  返回List< ...

  7. LeetCode(19):删除链表的倒数第N个节点

    Medium! 题目描述: 给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点. 示例: 给定一个链表: 1->2->3->4->5, 和 n = 2. 当删除了 ...

  8. java 嵌套接口

    接口可以嵌套在其它类或接口中,可以拥有public和"包访问权限"两种可见性 作为一种新添加的方式,接口也可以实现为private 当实现某个接口时,并不需要实现嵌套在其内的任何接 ...

  9. 图学ES6-4.字符串的扩展

  10. 1195: [HNOI2006]最短母串

    思路:好像以前谁问过我这题...  状个压就好啦, 把包含在其他串中的字符串删掉, 预处理除每两个字符串之间的关系, dp[ state ][ i ] 表示在state的状态下, 最后一个字符串是第i ...