React CheatSheet

0x00. 前言

备注:由于目前没有上 React 的打算,本文暂时太监

之前一直使用 VueJS 进行开发,心血来潮想换换口味,于是就借着自己的一个开源的项目尝试一下 ReactJS , 代码分为两部分,如下:

1
2
TODO:

本文目录

  • 前端、单页与 React 开发
  • 官网的 Tutorial / Guide 要点
  • Dva 下使用 React JS 的要点

0x00. 前端、单页与 React 开发

0.1. 前端

前端开发,是最近几年才出现的独立工种。

在我的印象中,以前的人很少会区分前端和后端,现在的前端的职责往往是由后端的人顺手做掉的。当然,这种界面一般情况下都比较丑。

后来,随着浏览器的功能越来越强大,性能越来越好,用户对于界面要求也就越来越高。甚至到后来,对于用户界面的操作的复杂程度要求也越来越高。 传统的后端渲染 Template + 简单的 Ajax 不能满足要求了。

要界面,要交互,要复杂

于是便出现了单页应用。

0.2. 单页

单页完全可以当做一个性能不是很强的,运行在浏览器中的,使用 HTML CSS JS 来编写的小型客户端。

写单页和写客户端基本一致的情况下,于是在这种情况下,前端开发在使用单页后,直接可以 Mock 数据,接着编写界面,接着调通页面的状态和操作,最后发布。

0.3. ReactJS

为什么选用 ReactJS 呢?

个人认为,框架是用于改善代码组织的一种约束。

不管是 Web 应用开发的早期的 HTML in PHP OR PHP in HTML, 还是中期的 MVC MTV, 还是后来的 富 AJAX 操作,还是现在的 SPA, 出现的各种框架无非就是为了解决代码组织的问题。

对后端而言,后端 WEB 框架的设计,都是为了单个模块职责过重而出现的一种解决方案:

  • HTML IN PHP 拼接代码简单暴力,可是如果拼接太多,每个文件就很职责重,代码阅读性差,不方便调试,就显得很杂乱。
  • PHP in HTML 相比上一个解决方案好很多。可是,嵌入过多 PHP 代码,代码阅读性差,不方便调试,则会显得比较混乱。
  • MVC 与 MTV 把渲染的变量独立出来放到 Controller 中,然后把需要渲染的 HTML 模板放到 Template 中,并且在 Template 中来完成模板的拼接。最后调用 Render 进行渲染。是不是这样问题就解决了呢?不是,如果把业务逻辑放在 Model 层,则 Model 职责过重。那就必须要添加一个 Serivce 层来封装业务逻辑。是不是封装了一个

如果业务逻辑简单到令人发指,HTML IN PHP 可以给人最大的灵活性。

  1. 尝试一下新技术。保持对技术的敏感性。
  2. React 是 FB 出的一套前端框架。大厂支持,不会轻易太监掉。
  3. 写了一段时间 VueJS 换换口味。

当我们讨论一个框架的时候,除了基本的框架之外还必须要有大量的社区资源,那么对 React 而言,除了 ReactJS 之外,还有什么?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
后台系统
- ant.design
打包构建
- webpack
路由和状态管理
- react-router
- react-router-redux
- redux
- redux-saga
为了更好的管理路由和状态,还是使用 dva 来管理比较好。
- [dva](https://github.com/dvajs/dva)
- [dva-cli](https://github.com/dvajs/dva-cli)
开发构建工具
- [roadhog](https://github.com/sorrycc/roadhog)

0x01. 官网的 Tutorial / Guide

官网的要点

0x02. 在 dva 下,编写 React 组件的正确姿势

编写 React 的时候,我选用了 dva 框架配合 ReactJS 来编写单页。

参考 FB 的这篇教程后,梳理了我编写组件的步骤 https://facebook.github.io/react/docs/thinking-in-react.html :

  1. 先构思出原型 (或者拿到 UI 图)
  2. Mock 出假数据
  3. 分解页面 OR 组件为 组件树
  4. 编写静态组件树
  5. 确定最小表达 UI (加上满足要求的样式)
  6. 确定什么时候需要什么状态(网络请求,键盘输入,位置变化等等)
  7. 收尾美化
  8. 在发现问题的时候进行优化

0x03. 在 dva 下,编写 React 组件的正确姿势


ChangeLog:

  • 2017-07-17 重修文字