React使用总结

两种架构

现在使用React的开发模式主要有两种——freeMarker+React以及纯静态React页面开发。本文着重介绍纯静态React页面的开发方式。

freeMarker+React

由于以前是用YUI+freeMarker进行开发,为了保证以前的页面都能够正常访问,当重构老页面时会使用这种开发方式。
在这种开发模式下由java利用freeMarker生成并Render为html,通过browserify将js打包至资源目录并在browser中加载,React将app render至div中。

React纯静态页面

利用browserify使用同构的方式进行开发,直接产出html以及js文件放置到资源文件中通过文件路径访问页面。采用这种方式开发有以下优点:

  • PreRender产出的静态资源文件加载速度快
  • 前后端只通过ajax进行交互,使得前后端分离,各自约定好接口之后就能进行开发。
  • 同构的开发模式使得功能模块可以复用,比如模板、node的一些常用模块等等。

需要注意代码能同时在browser与node环境下执行,否则会出问题。当使用bom对象时,在componentDidMount生命周期中运行,此时node环境下已经完成了first render。

构建方式

在node环境下通过React.renderToString方法生成html,通过这种方式生成的标签会带有data-reactid属性,储存server render结果的校验值。
当在browser中React.render时会检查校验值是否一致,保证node以及browser环境下render的结果一致。因此开发过程中一定要保证render的结果保持一致,如果需要在browser中插入dom节点,可以使用insert等操作。禁止state以及props在两个环境下值不同。
如果通过校验,则React不会重新生成dom,只将事件监听器挂载在对应的节点下。

应用架构

采用flux的思想来组织应用,具体的方案我推荐facebook的flux或者reflux,这也是现在Github中获星最多的flux实现方案。两者的主要区别是reflux不通过Dispatcher来控制action的分发,reflux中使用了较多的magic来使得代码更加简洁高效。

如果项目的复杂程度不高(没有多个互相关联的store),我推荐使用Reflux,一般情况下其实一个store就够了,而且避免了处理store之间的通信问题。

╔═════════╗       ╔════════╗       ╔═════════════════╗
║ Actions ║──────>║ Stores ║──────>║ View Components ║
╚═════════╝       ╚════════╝       ╚═════════════════╝
     ^                                      │
     └──────────────────────────────────────┘

若项目较为庞大,考虑到代码的可控性、直观,以及更好地去控制各store之间的响应逻辑,使用flux更合适。

优点

采用flux来构建应用有以下优势:

  1. 将state在store中统一进行管理,实现业务与组建的分离,代码结构更加清晰。
  2. 由于action在store中进行监听,因此事件不需要再一层层通过props来进行传递,简化代码,而且也更容易将应用拆分成更细粒度的模块。
  3. 尽量使用props的情况下,代码可预测性很强。

组件开发

  1. react认为组件就是一个状态集,尽可能使得组件只拥有props。
  2. 当组件需要有自己的处理逻辑时需要用到state,比如控制input的value,弹出层自动隐藏、显示的逻辑等等。
  3. state并不会随着porps的更新而改变,因此在使用 state 时一定要注意是否有 componentWillReceiveProps。
  4. 业务代码为了方便以及速度可以不写 PropTypes,但是可复用的组件使用 PropTypes 来保证组件的正常运行是必要的,组件中的工具方法可以抽取出来写测试用例。

setState

state为key-value的集合,一般来说value都是基本类型,当state的数据结构层次很深的时候,操作state就会变成很头疼的事情。

深拷贝

// shallow copy
var state = deepCopy(this.state);
state.valueWantChange = vale;
this.setState(state);

深拷贝方法没有问题,但由于deepCopy效率很低,一般都不推荐使用。

forceUpdate

this.state.valueWantChange = vale;
this.forceUpdate(); // this.setState(this.state);

在以下两种情况会用到 forceUpdate

  • 手动更改了 state 之后需要触发 render
  • 做了除更改props和state之外的操作后,需要render。

但是使用forceUpdate 会跳过 shouldComponentUpdate 的过程,会触发子组件的所有lifeCycle方法(包括shouldComponentUpdate)从而造成性能的浪费。因此为了组件更加清晰高效,应该避免使用forceUpdate。

Immutability Helpers

我推荐使用React.addons来管理state
You can alleviate this by only copying objects that need to be changed and by reusing the objects that haven’t changed.

import react from 'react/addons'
var newData = React.addons.update(myData, {
  x: {y: {z: {$set: 7}}},
  a: {b: {$push: [9]}}
});
this.setState(newData);

下面是update的基本语法。如果用过mongo应该对此十分熟悉。

  • {$push: array} push() all the items in array on the target.
  • {$unshift: array} unshift() all the items in array on the target.
  • {$splice: array of arrays} for each item in arrays call splice() on the target with the parameters provided by the item.
  • {$set: any} replace the target entirely.
  • {$merge: object} merge the keys of object with the target.
  • {$apply: function} passes in the current value to the function and updates it with the new returned value.
    原文作者:YeatsZhang
    原文地址: https://segmentfault.com/a/1190000002975959
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞