2.4.3　惰性加载

2.2.1节介绍了惰性求值的内容。惰性求值和实际编码中常常使用的惰性加载功能类似，它们的目的都是通过改变代码执行顺序，减少运行不需要执行的代码。

在React的项目里，我们常会用到惰性加载，如代码清单2-11所示。

代码清单2-11　惰性加载和惰性求值

// 惰性加载
// pages/OverviewPage.js
// React.lazy形式引入依赖
const OverviewMatrix = React.lazy(() => import('./overview/OverviewMatrix'))
// 配合Suspense惰性加载组件
<Suspense fallback={<div>Loading</div>}>
    <OverviewMatrix />
</Suspense>

// 惰性求值中的thunk概念
// redux-thunk的引入使得Redux的Action可以使用函数进行dispath异步操作
// pages/index.js
import { createStore, applyMiddleware } from 'redux'
import reducer from '../redux/reducer'
import thunk from 'redux-thunk'

const newStore = createStore(
  reducer,
  applyMiddleware(thunk)
);

// redux/action.js
const changePuzzleSid = (puzzleSid) => dispatch => {
  const dispatchObj = {
    type: 'PUZZLESID',
    json: { puzzleSid },
    receivedAt: Date.now(),
  }
  return dispatch(dispatchObj);
};

export {
  // 省略其他action
  changePuzzleSid,
};

现在，我们使用一些前端语言特性，完成了部分通用开发和业务需求，比如第1章和第2章示例中的优化软件性能和实现系统全局变量。

如果没有这些语言特性，开发者就需要等待编程语言标准进化后提供更多编译环境能力。这些语言特性还可以衍生出更多编程上的偏好，这些偏好就是我们将在第3章介绍的函数式思维和前端特征。