关于React, 想说几点

没有干货, 只有感想. 没有源码分析, 只有需求实现.

React跟Vue对比

之前写过一篇vue后台系统开发实践

那时候主要写vue, 有时间也会关注下React相关内容, 但没有实际开发经验.

最近终于从vue转向了React

虽说两者都是MVVM框架, 都是数据驱动型, 但是两者区别还真的很明显.

曾经看过一段话, 大概是这么一个意思

vue就是帮你封装了所有东西, 比如数据监听、指令、模板渲染等等

写起来就像是一门新的语言一样,你只要按照他的语法, 你就能很轻易的写出一套系统.

而React只提供了最基础的东西, 比如vnode, dom渲染等, 其余得都要靠自己去组合实现. 写起来就跟写原生JavaScript没什么区别. 可以玩出很多花样.

我是很赞同这个说法

在刚开始写React时候, 时不时都会带上vue的思想去写

耳边偶尔会响起一句话 '怎么React这么麻烦, 我用vue一下子就能完成的东西, 在这里要写半天'

例子? Form表单的双向绑定就是一个例子.

初探React

刚开始写, 由于不太熟练, 就选择了Antd作为UI框架.

但其实我是不太喜欢使用第三方库的

在刚开始写vue时候, 也是选择ElementUI, 后面熟练之后也逐步抛弃, 改用自己实现的组件

除了几个特别麻烦的, 比如 DataPicker . 我还是选择使用第三方.

我也写过一个固定表格组件, 个人感觉挺良好. 666

那么对于React, 我也选择了同样的入手方式, 先从第三方库用起, 后续逐步替代.

当然, Antd 用起来也是很麻烦, 花了几天勉强搭起了一个简单功能的后台.

当时的想法就是, 这么几个页面, 用vue一天就搞定, 这个react花了我几天.

可能当时也是太年轻了.

后来开发第二个系统, 就开始结合上文所说的vue后台实践 所提到的几个要点去重新写系统

React的router选择

react的路由选择目前有两种, 一种是官方的react-router, 另一个是刚出不久的reach-router.

而react-router也是从v3升级到了v4, 这次升级可以说是颠覆了传统的声明式路由

改成了路由组件化, 而不是传统的配置形式。

对于, reach-router可以说是麻雀虽小五脏俱全， 可以满足基本的路由功能,, API和路由组件使用起来也是比较简单的。

刚搭建项目时候，我从v3和v4中做过选择， 最后决定使用v4, 因为我个人喜欢用新不用旧。

在开发过程中，可能由于自己对React还不够熟悉， 在使用Router上也遇到不少问题。

比如最简单的路由跳转

v3只需要直接调用api即可完成跳转

/* react-router v3*/
import { browserHistory } from 'react-router'
browserHistory.push('/some/path')

v4需要引入高阶组件后才能从props中调用api.

/* react-router v3*/
import React from 'react'
import { withRouter } from 'react-router'
class Component extends React.Component {
  // ...
  push() {
    this.props.history.push('/some/path')
  }
  // ...
}
export default withRouter(Component)

但是v4也有优点, 就是路由配置很灵活, 在需要用到的地方引入Route即可。

但是中途用着不爽，我就直接换成了reach-router。

这会reach-router用起来可爽了, 简单直接。

可是由于还不足够的成熟, 用了一段时间后，我又很无耻的改回了react-router

不过我个人还是很欣赏reach-router, 希望后续能真正的发展起来。

React+mobx结合

一般看到React, 一般也会伴随着Redux。

而我从vue和vuex那套过来的，不是很喜欢Redux那套复杂的规则和写法。

当然，也有很多成熟的解决方案，比如dva, rematch等, 轮子可不少啊。

但是我个人更偏向于使用mobx，或者跟vuex脱不了干系吧。

使用多store组合，或许能让组件更加的灵活。而且使用简单，不需要复杂的流程。

React在项目中使用

主要是根据以往的vue开发实践，将其搬到react中来。

• 用户登录态管理
• router的钩子
• 列表页的数据加载，数据展示流程控制
• 列表页查询参数与url查询参数双向绑定
• 部分组件的实现

...后续再补