来源 Redux作者入门教程 combineReducers js 简单实现 const combineReducers = (reducers) =>{ return (state = {}, action) =>{ return Object.Keys(reducers).reduce( (nextState, key) =>{ nextState[key] = reducers[key]( state[key], action ); return nextState; }, {}) }; };

中间件模式（middleware） 是一种很常见、也很强大的模式，被广泛应用在 Express、Koa、Redux 等类库和框架当中。 如果你能在自己的代码中也使用灵活这种模式能给你的程序带来更大的便利性和灵活性。 简单来说，中间件就是在调用目标函数之前，你可以随意插入其他函数预先对数据进行处理、过滤，在这个过程里面你可以打印数据、或者停止往下执行中间件等。 数据就像水流一样经过中间件的层层的处理、过滤，最终到达目标函数。请你模拟一个中间件模式，可以达到以下效果： const app = { callback (ctx) { console.log(ctx) }, use (fn) { /* TODO */ }, go (ctx) { /* TODO */ } } app.use((ctx, next) => { ctx.name = 'Lucy' next() }) app.use((ctx, next) => { ctx.age = 12 next() }) app.use((ctx, next) => { console.log(`${ctx.name} is ${ctx.age} years old.`) // => Lucy is 12 years old. next() }) // . ...

实例 我们用一个实例，发现，原生与 react事件 冲突 JS Bin on jsbin.com 原生事件 document.body.addEventListener('click', e =>{ this.setState({s1:!this.state.s1}) alert('body',e.target.alt,e.target.value) console.log('body',e.target.alt,e.target.value) }) react事件 onSubmit(e){ alert('onsubmit', e.target.value) this.setState({s1:!this.state.s1}) } //... <input id='qr' value='二维码' type="button" onClick={this.onSubmit} /> 点击二维码 可以看到，事件从body开始，div.qr ->div.root 实例的功能是 点击二维码按钮，可以显示／隐藏，照片 在，照片显示时 1.点击非照片区域，可以隐藏， 2.点击照片，没有变化 但是 可以看到，点击，显示照片，事件顺序 body -> div.code -> div.root 由此说来，body,的优先级很大啊 但是 可以看到console面板，我留在，body事件的输出语句 二维码 是 div.qr 的 value 值。 img 是 div.code的 alt 值。 以此可以看出，原生body事件是，触发了， 而 e.target 是 二维码按钮的实例. ...

ory 的 editer 用于网页的编辑器，Online 应该说，这是高级应用了 我的目标，也就是这极限了。 看了下源码，真的看晕了 react, typescript, material-ui, redux, bootstrap 单独一二项，看的明白，混在一起的. 科科 虽然说，用react框架省去了些，步骤，redux做全局，meterial-ui 做 UI ，bootstrap 做 布局 部分，代码文件，后缀名是，.js 但是，应该是，用工具转代码的， 因为，变量数据格式，太凸显 ， 还是说用了其他的方式。 editor/packages/renderer/src/index.js v0.2.10 line-8 const gridClass = (size: number = 12): string => `ory-cell-sm-${size}ory-cell-xs-12` eslint 总 显示红线， 这个是ts的书写 啊，一坨的红线。 作者造搞了，自己的数据格式，主要通过 cells Raws 状态是一个规范的JSON对象，不涉及HTML。 也是为了，免xss威胁。 行 列 去区分，显示 editor/examples/src/content.js export default [ { "id": "1", "cells": [ { "id": "5ac89ec4-7536-4120-a072-8eedad0a48ff", "inline": null, "size": 12, "rows": [ { "id": "c440df91-52c5-44cf-9ac2-f5b15ff61b13", "cells": [ { "id": "39417572-f976-44b7-97b2-9a7e00fd66f2", "inline": null, "size": 12, 用来对，服务器渲染，静态 ...

继承 复制下面代码 - 点击https://babeljs.io/repl/ class b { constructor(c,d){ c = c+'1111'; console.log(c,d); } start(){ console.log('ba ba') } } class a extends b { constructor(c,b){ super(c,b); c = c+'222222'; console.log(1,c,2,b); return this.start; } start(){ console.log('son'); } } var o1 = new a('first', 'second'); console.log('------------------'); console.log(o1.toString()); -为了实现，相当于 类的 继承 问题，js 给 大众 一个 ， 丑陋的 写法，构造，与原型，的，概念. 增加，初学者的入门，难度, 不过，好在， TypeScript babel 语法实现 coffeeScript 太极端了， 一堆空格。 有人说 它像 python, 拜托，一段的空格，哪来的格式美感。 让我们不在需要，对，继承, ...

react-router v4 react 的路由解决方案 而我却更，想讲讲，本地测试 与 发布 在 react-router 的世界 <Route path="/" component={App} /> 注意这个 ／ 比如我的 域名 llever.com 当应用直接放在 llever.com/ 的时候，会实用。 但是 如果我想 放在 llever.com/about/ 也正是我想做的. 但是，本地测试 在 ／ :localhost:3000 而， 我要放的地方在 /about/, 万一，我想放在 /user/ 又去改，源码。妖 资源路径 · 请求- 资源- 的 路径 确保，刷新网页后， 要是，服务器渲染，资源要对上啊。 用 绝对路径 ，当我没说, 那还是用吧。（不用服务器渲染，真的好慢-首页） 有没有，谁能 告诉我， 代码放哪，路由跟哪 的方法