React运用总结

2024年3月21日 197次阅读 来源: YeatsZhang

两种架构

如今运用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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞