前端性能监控主要分为两种方式，一种叫做合成监控（Synthetic Monitoring，SYN），另一种是真实用户监控（Real User Monitoring，RUM）。合成监控一般会借助工具来做检查例如：lighthouse。而真实用户监控的时候，我们就需要采集一些用户数据。
关于用户数据采集，我们通常会考虑几个问题：

• 使用标准 API 收集数据
• 定义合适的指标
• 上报数据，分析数据

本文我们先主要介绍如何收集数据和定义核心性能指标。

之前的文章我们讲解了数据流的作用，还有 redux 的源码。现在思考，如何将 redux 应用到 react 上面呢？
首先我们想到 store 可能被多个组件依赖和影响，为此我们应当借助 context 来存储 store 数据。将 store 存储在根元素上，通过 context 进行数据的传递。为了实现这一步，react-redux 提供了 <Provider>：

redux 的思想前面已经介绍过了。本文主要简单的看下，redux 的具体实现。redux 主要提供了如下几个功能：

• 创建 store，即：createStore()。
• 创建出来的 store 提供subscribe，dispatch，getState这些方法。
• 将多个reducer合并为一个reducer，即：combineReducers()。
• 应用中间件，即applyMiddleware()。

react 的范式为 UI = render(state)，用户的界面完全取决于数据层。react 中通过管理状态（state）来实现对组件的管理，当 state 发生变更后，react 就会重新渲染界面，组件与组件之间也经常需要共享状态。如果缺乏一个好的状态管理方案，那么共享数据将变得麻烦，同时状态不受控的话会让我们很难跟踪调试程序。

上一篇文章，我们介绍了高阶组件(HOC)，最后也提出了几个关于高阶组件的问题。这里我们接上另一种组件复用模式 render props 亦或是 funtion as child。

render props

本质上，render props 就是在原有的组件上增加一个 prop 来实现不同的渲染情况，从而达到代码复用的目的(即将组件组件做为参数)。举例如下：

组件的复用和组合，可以帮助我们在现有的轮子上扩展新的功能，提高工作效率，避免重复造轮子。React 组件化的开发方式可以很好地实现复用和组合的功能，本章主要围绕高阶组件来讨论下这一问题。

高阶组件（HOC）

高阶组件（HOC）是 React 中用于重用组件逻辑的高级技术。 HOC 本身不是 React API 的一部分。 它们是从 React 构思本质中浮现出来的一种模式。

单页面代码分割

目前单页应用的 bundle.js 一般都会很大，这样的话会对启动时间造成影响。为此我们需要合理拆分 js 文件，然后在需要使用的时候才动态记在。
拆分 js 文件，我们通常会采用手段：

• 基于业务逻辑和依赖库分割
• 基于路由分割
• 基于组件分割

本章主要来探讨一下，RN 的启动过程都做了什么？同时简单的介绍下在 Android 中是如何实现 ReactNative 的。进而引出解决一个重要的问题，ReactNative 的预加载。

前面两篇已经介绍完了 ReactNative 的基础内容：视图，手势等。基本页面开发应该就没问题了，本章我们介绍下 ReactNative 剩下的一些小技巧。

在上篇文章中，我们介绍了 ReactNative 的基础布局，动画相关内容。除此之外，我们还需要和元素有交互才可以。我们看到在 ReactNative 中，有些组件是自带交互事件的，比如 button, Text 就有 onPress 事件。但是我们在普通的 View 上面就没有对应的手势事件。且，向前端那些DOM的手势事件 click等都不存在的。为此，ReactNative 专门提供了几个直接相应处理事件的组件：TouchableHighlight，TouchableNativeFeedback，TouchableOpacity和TouchableWidthoutFeedback。