(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

that there are more advanced ways to manage data, which include the Context API and libraries like Redux, but those introduce more complexity and 90% of the time using those 2 ways I just explained are plain CSS or Styled Components. Learn how to manage state using the Context API, useContext and Redux. Learn how to interact with forms. Learn how to use React Router. Learn how to test React applications

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