使用React改版网站
网站是毕业设计的作品,开发这个网站的目的主要用于记录一些笔记,以及聚合一些资讯信息,也算自己在网络世界中的一块静地吧,可以在这里一些技术上想法的实践。
网站最初前端使用vue
开发,在前段时间由于项目的开发进度已经不是那么紧急,有了一些空闲时间。而对没有使用过React
又一直耿耿于怀,索性就使用React
进行了一次前端的重构。
学习一门新的技术最基本的当然就是阅读相关文档了,作为一个单页面应用前端路由当然是不可能少了,而使用React
如果不使用Reduce
那又感觉发挥不其作用(虽然他们其实也没什么必须的关系)。所以在这里使用了react
,react-router
,react-redux
,以下为在使用React
开发中的一些见闻,有幸被你看到该文,如有不对之处,还望指出,如果你不小心被带入坑,本人概不负责。
首先就是阅读React
的文档了,文档使用大量举例的形式介绍如何使用React
进行开发,如如何设计state
,props
,如何组件间通信,如何设计组件等。文档虽然进行了详细的介绍,但是往往还是需要真正的实践才能发现其中的妙处。如state
,props
的设计,在一个X
组件中拥有Y
,Z
两个组件,假设Y
组件拥有一个输入框,而Z
组件可能需要用到Y
组件输入的值做出一定的变化,当然如果把他们写到一起也不是不可以的,但是考虑到组件复用,功能单一等因素还是拆开比较合理,那么这个值到底应该哪个组件来储存呢?如下两个组件分别为Y
,X
,这样设计明显是不符合state
设计的,拥有太多冗余部分。
- class InputComponent extends Component {
- constructor () {
- super()
- this.state = {
- value: ''
- }
- }
- valInput (e) {
- let value = e.target.value
- this.setState({value})
- this.props.inputChange(value)
- }
- render () {
- return <input onChange={this.valInput.bind(this)}/>
- }
- }
- class ParentComponent extends Component {
- constructor () {
- super()
- this.state = {
- val: ''
- }
- }
- inputChange (val) {
- this.setState({val})
- }
- render () {
- return (
- <section>
- {this.state.val}
- <InputComponent inputChange={this.inputChange.bind(this)}/>
- </section>
- )
- }
- }
如果使用如下的写法或许看起来更好
- class InputComponent extends Component {
- render () {
- let {val, inputChange} = this.props
- // 这里的val并不是必须的,但是当一个值来自非输入控件的时候,如可编辑的div,ace在每次执行render函数的时候都会导致原来输入的值被清空。
- return <input value={val} onChange={inputChange}/>
- }
- }
- class ParentComponent extends Component {
- constructor () {
- super()
- this.state = {
- val: ''
- }
- }
- inputChange (e) {
- this.setState({val: e.target.value})
- }
- render () {
- let val = this.state.val
- return (
- <section>
- {val}
- <InputComponent val={val} inputChange={this.inputChange.bind(this)}/>
- </section>
- )
- }
- }
react-router
提供了前端路由基本的需求,根据需要使用到的功能在项目文档介绍中即可找到具体使用方法。基本的配置和其他框架也是大同小异,但是很多API的使用确有些大相径庭(和vue
相比),还是需要仔细通读文档的,以免在开发中出现问题再去解决浪费时间,如IndexRoute
在vue
中可以在子路由通过''
这样的空字符来作为默认UI
。
- function root () {
- this.path = '/'
- this.component = require('pages/index').default
- }
- function demo () {
- this.path = 'demo'
- this.getComponent = (nextstate, cb) => {
- require.ensure([], (require) => {
- cb(null, require('pages/demo').default)
- })
- }
- }
- const createRoute = (R) => {
- let route = new R()
- route.childRoutes = route.childRoutes && route.childRoutes.map(r => createRoute(r))
- return route
- }
- export default [root, demo].map((route) => createRoute(route))
react-redux
在从表象理解Redux中进行了简单介绍。Redux
的使用减少了开发中思考的时间,同时也避免了一些可能的问题。在使用过程中也发现一些问题,使用Redux
必然导致大量的dispatch
出现在组件中,如何防止业务变得复杂和庞大后导致项目变得难以维护,也是值得思考的。在被改版的网站中使用页面+组件的方式开发,一个页面表示除了跟组件外的最高级组件,可拥有多个组件,只有页面才能向reducer
发起action
,所有多个组件共用的数据则通过在页面中传递到子组件的props
,子组件如果需要更新数据,则通过props
属性调用父组件传入的方法向上传递命令,在页面中使用dispath
来指定action
来调用reducer
进行数据更新,当然有时候也需要在action
中进行处理后在dispath
action
到reducer
(比如网络请求)。值得注意的是每次dispath
一个action
,Redux
都会遍历所有已经注册的reducer
(reducer往往由多个子reducer组成),也就是说所有reducer
都会被调用(从项目中的表现和文档来看是这样的),一下是被改版网站使用的reducer
部分代码。
- export default class ArticleReducer {
- [AAS.ARTICLE_REQUEST_STATE] (state, action) {
- return Object.assign({}, state, {loading: action.loading})
- }
- [AAS.ARTICLE_SEARCH_STATE] (state, action) {
- return Object.assign({}, state, {searching: action.searching})
- }
- }
- const reducers = {}
- const AR = new ArticleReducer()
- const NR = new NewsReducer()
- reducers.articles = (state = initState.article, action) => {
- return AR[action.type] ? AR[action.type](state, action) : state
- }
- reducers.editor = (state = initState.editor, action) => {
- return ER[action.type] ? ER[action.type](state, action) : state
- }
就使用React
后的感觉,由于第一次真正使用Redux
这样的状态管理工具来进行进行开发(虽然也有使用vuex,但是都不是基于整个项目的),开发流程变得更加可控,数据流向变得清晰,而在开发中各个工具耦合性也变得更低,总的来说这是一次不错的尝试。不过个人觉得不管使用什么技术,复杂程度随着业务的增加必定变得更高,而要维持一个项目的稳定,健壮,易于维护将变得更加困难。
最后不得不感叹,良好编程习惯的重要性。
使用React改版网站的更多相关文章
- 使用React改版网站后的一些感想
文章转载:http://www.jianshu.com/p/8f74cfb146f7 网站是毕业设计的作品,开发这个网站的目的主要用于记录一些笔记,以及聚合一些资讯信息,也算自己在网络世界中的一块静地 ...
- React官方网站学习
React官方网站 英文版 https://reactjs.org/tutorial/tutorial.html React官方网站 中文版 https://react.docschina.org ...
- react实现网站换肤功能
一.目标 提供几种主题色给用户选择,然后根据用户的选择改变应用的主题色: 二.实现原理 1.准备不同主题色的样式文件: 2.将用户的选择记录在本地缓存中: 3.每次进入应用时,读取缓存 ...
- React 学习笔记(学习地址汇总)
好的博文地址:http://www.ruanyifeng.com/blog/2015/03/react.html 官网学习地址:http://facebook.github.io/react/docs ...
- React Test相关资料
karma 前端测试驱动器,生产测试报告,多个浏览器 mocha js的测试框架,相当于junit chai,单元测试的断言库,提供expect shudl assert enzyme sinon.j ...
- React入门--------JSX
React学习网站 React官方英文网站:http://reactjs.cn/react/docs/top-level-api.html React官方中文网站:http://www.css88.c ...
- React系列(一):React入门
React简介 1.由来 React是有Facebook开发出来用于构建前端界面的JS组件库,由于其背后的强大背景,使得这款库在技术开发上完全没有问题. 2.React的优势 解决大规模项目开发中数据 ...
- iOS程序员的React Native开发工具集
本文整理了React Native iOS开发过程中有用的工具.服务.测试.库以及网站等. 工具 你可以选择不同的开发环境:DECO.EXPO或者你可以使用Nuclide+Atom,目前我使用EXPO ...
- React设计思想
熟悉一个新技术的关键是熟悉他的特色和理念 React框架本身和我们常用的JavaScript MVC框架,如:AngularJS,Backbone,Ember等,没有直接的可比性.在React的官方博 ...
随机推荐
- http和socket之长连接和短连接区别【转】
转自:https://blog.csdn.net/mengyafei43/article/details/25195445 TCP/IP TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层 ...
- mysql-5.7.13-winx64 免安装版配置方法
1.下载MySQL Community Server 5.7.13 解压MySQL压缩包 2.修改 my-default.ini skip-grant-tables 作用是安装好MySQL后 免密码登 ...
- VUE之搭建脚手架
原文转自http://blog.csdn.net/Shiyaru1314/article/details/54963027 目录(?)[-] 1 安装之前需要检查是否已经安装NodeJS的环境 安装文 ...
- 八、vue使用element-ui组件
element-ui组件 1.引入element import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element- ...
- Java中final关键字概述
使用final修饰过的变量都不可以改变: 1.final修饰变量 恒定不变的属性,可以用final关键字来修饰: 变量名建议全部使用大写 final修饰的变量不能改变,如果程序中重新赋值,编译报错 例 ...
- Ibatis.Net 数据库操作学习(四)
一.查询select 还记得第一篇示例中是如何读出数据库里3条数据的吗?就是调用了一个QueryForList方法,从方法名就知道,查询返回列表. 1.QueryForList 返回List< ...
- LeetCode(19):删除链表的倒数第N个节点
Medium! 题目描述: 给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点. 示例: 给定一个链表: 1->2->3->4->5, 和 n = 2. 当删除了 ...
- java 嵌套接口
接口可以嵌套在其它类或接口中,可以拥有public和"包访问权限"两种可见性 作为一种新添加的方式,接口也可以实现为private 当实现某个接口时,并不需要实现嵌套在其内的任何接 ...
- 图学ES6-4.字符串的扩展
- 1195: [HNOI2006]最短母串
思路:好像以前谁问过我这题... 状个压就好啦, 把包含在其他串中的字符串删掉, 预处理除每两个字符串之间的关系, dp[ state ][ i ] 表示在state的状态下, 最后一个字符串是第i ...