Blog

前言

在 Vue 里有一个动态的 class 语法，很好的根据条件动态设置 class。例如：

1

<div class="button" :class="{ active: show }"></div>

就是当 show 为 true 时，此标签被赋予 active 样式。

在 React 要实现这样功能，可能会这样做：

1

<div className={`button ${show ? 'active' : ''}`}></div>

注意到，这里只有一个属性判断，如果有多个时会显得非常麻烦，那么现在使用 ClassNames 这个库来解决这个问题。

随着前端应用体积的扩大，资源加载的优化是我们必须要面对的问题，动态代码加载就是其中的一个方案，webpack 提供了符合 ECMAScript 提案 的 import() 语法 ，让我们来实现动态地加载模块（注：require.ensure 与 import() 均为 webpack 提供的代码动态加载方案，在 webpack 2.x 中，require.ensure 已被 import 取代）。

React.lazy 是什么

在 React 16.6 版本中，新增了 React.lazy 函数，它能让你像渲染常规组件一样处理动态引入的组件，配合 webpack 的 Code Splitting ，只有当组件被加载，对应的资源才会导入 ，从而达到懒加载的效果。

使用 React.lazy

1
2
3
4

// 不使用 React.lazy
import OtherComponent from './OtherComponent';
// 使用 React.lazy
const OtherComponent = React.lazy(() => import('./OtherComponent'))

React.lazy 接受一个函数作为参数，这个函数需要调用 import() 。它需要返回一个 Promise，该 Promise 需要 resolve 一个 defalut export 的 React 组件。

在控制台打印可以看到，React.lazy 方法返回的是一个 lazy 组件的对象，类型是 react.lazy，并且 lazy 组件具有 _status 属性，与 Promise 类似它具有 Pending、Resolved、Rejected 三个状态，分别代表组件的加载中、已加载、和加载失败三种状态。

需要注意的一点是，React.lazy 需要配合 Suspense 组件一起使用，在 Suspense 组件中渲染 React.lazy 异步加载的组件。如果单独使用 React.lazy，React 会给出错误提示。其中在 Suspense 组件中， fallback 是一个必需的占位属性，如果没有这个属性的话也是会报错的。

1
2
3
4
5
6
7
8
9
10
11

// 延迟加载回调 不需要加载效果设置为null maxDuration可以设置最大持续时间 最新版本中已移除了这个属性
const SuspenseComponent = (Component) => (props) => {
  return (
    <Suspense fallback={Math.random() >= 0.5 ? <Loading /> : <SkeletonView />}>
      <Component {...props}></Component>
    </Suspense>
  );
};
...
...
component: SuspenseComponent(OtherComponent),

Redux三大概念

Redux 是JavaScript状态容器，提供可预测化的状态管理

action 普通的JS对象描述发生什么

reducer 只是一个接收 state 和 action，并返回新的 state 的函数

Store — 数据存储中心，同时连接着Actions和Views（React Components）。

1. Store需要负责接收Views传来的Action
2. 然后，根据Action.type和Action.payload对Store里的数据进行修改
3. 最后，Store还需要通知Views，数据有改变，Views便去获取最新的Store数据，通过setState进行重新渲染组件（re-render）。

三大原则

1. 单一数据源

整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。和根级的reducer,拆成多个reducer而不是多个store。

2. State 是只读的

唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

3. 使用纯函数来执行修改

为了描述 action 如何改变 state tree ，你需要编写 reducers。传递数据 payload规范。

当 state 变化时需要返回全新的对象，而不是修改传入的参数。

Error Boundary

Error Boundary可以看作是一种特殊的React组件，新增了componentDidCatch这个生命周期函数，它可以捕获自身及子树上的错误并对错误做优雅处理，包括上报错误日志、展示出错提示，而不是卸载整个组件树。（注：它并不能捕获runtime所有的错误，比如组件回调事件里的错误，可以把它想象成传统的try-catch语句）

React 16.3带来了正式版的context API。让我们来看看有哪些改变，在那些地方可以取代redux吧！