0%

Overview

首先看一张图:

React-Redux

可以看到入口文件里面引入了这几个模块:

  • Provider
  • connectAdvanced
  • connect

我们就来依次看一下这几个模块

Provider

store 挂在在了 context 上面,给予了子组件访问 store 的能力。

阅读全文 »

技术选型

我们的项目主要选用以下技术开发,再配合一些其它辅助工具。

  • react
  • react-router
  • redux
  • react-redux

开发及线上环境

开发环境

由于项目是前后端分离的,所以我们需要一套完整的开发环境,需要包括以下功能:

  • 数据 Mock
  • Webpack 实施编译刷新
  • 方便前后端联调

基于这些需求,我们基于 Express, Webpack,Webpack-dev-middleware 搭建了这套完整的开发环境。

开发环境

可以看到,浏览器所有的请求都被本地的 Node.js 服务拦截。对于静态资源请求,都委托给 webpack-dev-middleware 来处理,对于接口请求根据不同的环境来决定要做的操作。

本地开发

ENV = 'development' 时,也就是开发环境,那么就直接读取本地的 mock 数据来渲染页面。

前后端联调

ENV = 'api' 时,也就是我们认为的联调环境,这个时候对于接口请求由 node.js 转发到需要联调的真实后端服务地址上,从而避免直接调用所产生的跨域问题。

这样就可以直接用本地开发代码和后端联调,能大大提高效率,省去了每次需要往服务器上构建部署的步骤。

线上环境

阅读全文 »

由于项目使用 React, React-Router, Redux 来开发项目,采取了前端渲染的方式(如果采用 ssr 就不会有这个问题)。

问题

所以每到一个页面,需要发一个初始化的请求来获取页面数据,然后重新渲染页面,所以之前一个页面从请求到加载完毕的流程是这样的:

Route match -> ComponentWillMount ->  render -> ComponentDidMount -> dispatch(init())->  render -> componentDidUpdate 

首先是路由匹配,然后准备加载组件,使用通过 Reducer 里面的初始化 state 进行 render, 然后触发 ComponentDidMount 事件,在这个事件里面去 dispatch 一个执行页面初始化的请求的 Action,请求成功过以后触发组件的重新渲染。

可以看到,展示最终的页面需要组件重新渲染两次。一次是使用写死在前端的reducer 里面的 initialState 数据来渲染,一次是在拿到后端数据进行的渲染。

所以有的时候会出现闪屏的情况,用户体验很不好。

我们的要求是进页面以后就是用从后台获取的最新数据渲染的页面,整个页面只会 render 一次。

那么怎么解决这个问题呢?

解决方案

要解决这个问题,那么必然是加载好数据后,再去挂载页面组件,那么加载数据的时机就显得尤为重要。

阅读全文 »

最近对团队内部 React 组件库(ne-rc)中的 Form 组件进行了重构,记录一下思考的过程。

一些前置定义:

| 名词 | 定义 |
| —- | —- ||
| 表单 | Form 组件 |
| 子表单 | 嵌套在 Form 下面的类似 Input, Select 这样的子组件 |

首先我们看一下,我们的对 Form 组件的需求是什么。

  1. 获取当前变动表单的状态
    • 校验所有必填表单是否填写完成
    • 对外触发具体表单变化的方法 formFieldChange
  2. 暴露对外提供整个表单状态的方法
    • 提供整个表单最新状态的方法 $Form.data
  3. 提交方法
    • 校验表单是否通过校验
    • 对外触发 formSubmit 方法

接着我们从重构前和重构后,看如何来解决这个问题。

Before

获取当前变动表单的状态

如何获取变动的子表单

React 父子通信需要通过 prop 传递方法,对于 Form 下面的类似与 Input 之类的子表单的变化想要通知到父级,如果不借助第三方的事件传递方法,那么就只能通过由父级通过 props 向 Input 传递 formFieldChange(假设就叫这个名字)方法,然后当子组件变化时去调用 formFieldChange 来实现。

那么问题来了,什么时候去传递这个方法呢?

不能在具体页面里面使用的时候再去每条表单里面注册这个方法,那每个用到表单组件的时候就都需要给子表单进行这样的事件绑定,这样太累了。

所以一开始,我选择通过直接递归的遍历 Form 下面的 children,只要发现这个 children 是我想要的表单类型,那么就重新克隆一个带有 formFieldChange 的组件来替换掉原来的组件。

阅读全文 »

resolve.root,resolve.fallback,resolve.modulesDirectories

这些配置项项都被一个单独的配置所替代 resolve.modules. 查看 resolving 了解更多。

resolve: {
- root: path.join(__dirname, "src")
+ modules: [
+ path.join(__dirname, "src"),
+ "node_modules"
+ ]
}
 

resolve.extensions

这个选项已经不在需要传一个空字符串了。它的行为已经被移动到了 resolve.enforceExtension. 查看 resolving 了解更多。

resolve.*

这里修改了很多内容。因为被用到的不是很多,所以就不一一列举出来了。查看 resolving 了解更多。

module.loaders 现在是 module.rules

老的 loader 配置被一个更加强大的 rules 系统所取代了,允许配置 loader 和更多内容。为了保证一致性,旧的 module.loaders 语法依然可以合法且可以使用的。新的命名规范更加易于理解,这是一个使用 module.rules 去升级配置的很好的理由。

  module: {
- loaders: [
+ rules: [
{
test: /\.css$/,
- loaders: [
+ use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
- query: {
+ options: {
modules: true
}
]
},
{
test: /\.jsx$/,
loader: "babel-loader", // Do not use "use" here
options: {
// ...
}
}
]
}
阅读全文 »