(JavaScript 对象表示法) 学习 JS 模板 学习静态网页生成器 通过JS学习计算机科学 学习前端应用架构 学习数据（例如，JSON）API 的设计 学习 React & Redux 学习渐进式 Web 应用 学习设计 JS API 学习web开发工具 学习命令行的使用 学习 Node.js 学习 JS 模块系统 学习模块加载和打包工具 学习包管理工具 学习版本控制 (JavaScript 对象表示法) 学习 JS 模板 学习静态网页生成器 通过JS学习计算机科学 学习前端应用架构 学习数据（例如，JSON）API 的设计 学习 React & Redux 学习渐进式 Web 应用 学习设计 JS API 学习web开发工具 学习命令行的使用 学习 Node.js 学习 JS 模块系统 学习模块加载和打包工具 学习包管理工具 Introduction 13 2016 前端开发回顾 UI 组件和组件树被用于构建复杂 UI。 组件由单一文件构成，在单个文件中可能同时包含 HTML、CSS 和 JS 不再有违主流开 发思想。 React、Redux、Webpack、ECMAScript 2015（也叫 ES6）和 Babel 被广泛采用。这些 解决方案跃居于最常用技术榜单前列。 开发者意识到，在开发原生应用时，借助 webviews 的

Plugin n 外界资源 新pubspec.yaml 一键命令 模块化开发 业务框架升级之旅 接下来…… n 技术需求（背景） n 现有业务框架 n 现有业务框架的问题与挑战 n redux到tieba_redux 技术需求（背景） 定制版本、 快速开发新app 细粒度模块化 中台能力 一键配置生成 现有业务框架（传统做法） Model Presenter View 消息中心 注册 自定义 拦截/整合 模块间 模块内 现有业务框架的问题与挑战 数据和UI一致性较差 数据本身的变化可控性较差 模块内和模块间代码风格不一致 响应式 tieba_redux 现代 redux Redux的优势与问题 组织代码 n 组件:函数式，class n 数据:props，state n 纯函数 组织思想 n State变化可预期 n 面向action序列编程 n 松耦合调用方式 满足拦截类开发需求 Ø 网络访问添加通用参数 Ø 打印action序列和State，加速问题定位 Ø 改变跳转，热修复 Redux 模块化 tieba_redux n 概念上的『和』与『分』 n 分之后的代码组织与运行 n 细粒度模块化的编码需求 tieba_redux GlobalRedux Tasks Actions Reducers Store State n 皮肤/夜间/暗黑

这篇快速上手指南会教你如何将TypeScript与React结合起来使用。 在最后，你将 学到： 使用TypeScript和React创建工程 使用TSLint进行代码检查 使用Jest和Enzyme进行测试，以及 使用Redux管理状态 我们会使用create-react-app工具快速搭建工程环境。 这里假设你已经在使用Node.js和npm。 并且已经了解了React的基础知识。 安装create-react-app 我们把状 态指定为了 object ，因此使用SFC更简洁。 当在创建可重用的通用UI组件的时 候，在表现层使用组件局部状态比较适合。 针对我们应用的生命周期，我们会审视 应用是如何通过Redux轻松地管理普通状态的。 现在我们已经写好了组件，让我们仔细看看 index.tsx ，把 替换 成 。 首先我们在文件头部导入它： import 用间同步数据的功能。 就React组件而言，数据是通过每个元素上指定的props向子 元素传递。 因为React本身并没有提供内置的state管理功能，React社区选择了Redux和MobX 库。 Redux依靠一个统一且不可变的数据存储来同步数据，并且更新那里的数据时会触 发应用的更新渲染。 state的更新是以一种不可变的方式进行，它会发布一条明确 的action消息，这个消息必须被reducer函数处理。

这篇快速上手指南会教你如何将TypeScript与React结合起来使用。 在最后，你将学到： 使用TypeScript和React创建工程 使用TSLint进行代码检查 使用Jest和Enzyme进行测试，以及 使用Redux管理状态 我们会使用create-react-app工具快速搭建工程环境。 这里假设你已经在使用Node.js和npm。 并且已经了解了React的基础知识。 我们之所以使用create-r object> 我们把状态指定为了 object ，因此使用函 数组件更简洁。 当在创建可重用的通用UI组件的时候，在表现层使用组件局部状态比较适合。 针对我 们应用的生命周期，我们会审视应用是如何通过Redux轻松地管理普通状态的。 现在我们已经写好了组件，让我们仔细看看 index.tsx ，把 替换成 。 首先我们在文件头部导入它： React 但是，React并没有任何在应用间同步数据的功 能。 就React组件而言，数据是通过每个元素上指定的props向子元素传递。 因为React本身并没有提供内置的state管理功能，React社区选择了Redux和MobX库。 Redux依靠一个统一且不可变的数据存储来同步数据，并且更新那里的数据时会触发应用的更新渲染。 state的更新是以一种不可变的方式进行，它会发布一条明确的action消息，这个消息必须被

React 全家桶环境搭建 · 初始化项⽬目 npm init -y · 创建项⽬目⽬目录 · 安装 react、react-dom、redux、react-redux npm i react react-dom redux react-redux -S · 安装 geektime-builder-webpack npm i geektime-builder-webpack -D 安装依赖

● 不允许在 JSX 参数 (props) 中传入 JSX 元素 ● 不能在 JSX 参数中使用对象展开符 同时也支持大部分 React 第三方生态库，目前已支持使用原生 react-redux。彻底 抹平各端的差异，无论是 MRN、Flutter、小程序、Webview 的自定义组件都可以 直接当成 React 组件引入，小程序原生自定义组件也无需配置 usingComponents。 逻辑复用模式设计图如上，我们按照图片标注的序号进行一一解读： 1) 逻辑复用接口实例：在小程序的页面容器中，通过注入的方式获取逻辑层复用的接 口实例，通过这个实例便可以调用接口实现获取、更改、监听 Redux 的状态，实质 上就达到了逻辑复用的效果。 2) 页面复用组件集：页面可以自由使用复用组件，复 用组件可大可小，可以虽然拼装布局，保留了组件模式良好的灵活性。 3) 小程序原 生组件：页面既 Store，便可以和逻辑层自动绑定上。因为 RN 组 件本身就是基于 Redux 的，所以复用过程相对容易。 6) 业务逻辑层：最右侧的业 务逻辑层可以简单理解成 3 块，一块是基于 Redux Store 的数据层，这里存放整个 页面模块所有的数据和操作、监听数据的接口，一块是包含页面内所有网络请求的 网络层，另外就是用来流转状态和处理复用的 Reducer、Redux-Saga，以及配套 的各种工具类。业务逻辑层可以根据双端的差异把

PbCodec Channel Log NetworkImage Refresh Report … RichText 开发框架 业务 逻辑 ReBLoC框架： Redux + BLoC 驱动 状态更新 Redux：界面状态管理 BLoC：界面逻辑解耦合 开发框架 ReBLoC框架： 控件使用InheritedWidget包装 1.减少树状结构的节点刷新。 2.避免setState泛滥

引入，不打入 bundle 中 方法：使用 html-webpack-externals- plugin 进一步分包：预编译资源模块 思路：将 react、react-dom、redux、react-redux 基础包和业务基础包打包成一个文件 方法：使用 DLLPlugin 进行分包，DllReferencePlugin 对 manifest.json 引用 使用 DLLPlugin

JavaScript ，依然⽆无法搞定 • 我们尝试 OO，⽐比如 extjs • 我们最终还是找个中间格式 JSX 单纯的 React 只是 view 层⾯面的，还不⾜足以应⽤用，于是⼜又有 Redux。核⼼心概念： Actions、Reducers 和 Store，简单点说就是状态控制，然后再结合打包加壳，变 成 app 或可执⾏行⽂文件。iOS、Android 上⽤用 Cordova，PC 上使⽤用 上使⽤用 Electron。 当下流⾏行玩法 medis 技术点 • 使⽤用 Node.js 模块 • 使⽤用 Webpack 构建 • 使⽤用 React（视图） Redux（控制逻辑） • 使⽤用 Electron 加壳打包 亲，你看到未来了么？ 讲了node⼯工具，前端4阶段， hybrid，各种跨平台，⺫⽬目前就是为了 介绍Node全栈的各种可能，下⾯面讲

Kraken 关于 Flutter for Web 并不是完全鸡肋，适合其只适合非 C 端业务场景 中国可能是全球最关注 Flutter 的国家 我们的目标：能直接运行吗？ Demo Redux Mobx Rxjs Lodash Underscore Moment graphql Immutablejs Ramda Validator.js … Npm Yarn babel