A blazing fast React alternative, compatible with IE8 and React 16.

Nerv 提供了比 React 更好的浏览器兼容性和更高的性能，与此同时也不会放弃 React 庞大的生态系统。兼容 React 生态系统是我们开发 Nerv 的重要目标之一。 试过几个脚手架，只是改了别名，都不能用。构建正常，运行报异常。做这个实验的目的是想用taro-ui，可惜的是，连nervjs这关都过不来

1. 找到相同的前置元素和后置元素

     *
     *  A: -> [a b c d] <-
     *  B: -> [a b d] <-
     *

这里我们可以发现前置元素 a, b 和 后置元素 d 都是相同的。所以我们可以将这样的 diff 情况转变为：

     *
     *  A: -> [c] <-
     *  B: -> [] <-
     *

这里我们可以发现 A 和 B 的不同就是多了一个 c 元素，所以只要进行把 c 元素移除这一步可以完成 diff。相反地，如果这步操作 A 为空，B 有多余元素，那么我们就将多余元素插入即可。 这一步 diff 优化最早由 Neil Fraser 提出，实现非常简单（在 Neil 的文章里他提供了 JavaScript，Java，Python 三种实现），优化的力度也非常大，但真正首次应用到前端框架却是十年后的 Bobril，后来号称性能最强的 Inferno 也使用了这一优化。

再来看下一种情况：

     *
     *  A: -> [a b c d e f g] <-
     *  B: -> [a c b h f e g] <-
     *

在这个情况的 diff 中，我们可以应用之前的优化策略把他简化为：

     *
     *  A: -> [b c d e f] <-
     *  B: -> [c b h f e] <-
     *

2. 这时候我们就需要进行第二步：找到需要被删除、插入或移动的元素：

首先我们创造一个数组 P，它代表新数组应该被插入的位置。

     *
     *  A: [b c d e f]
     *  B: [c b h f e]
     *  P: [. . . . .] // . == -1
     *

接下来我们再创建一个索引 I，作为新数组位置的映射（如果新旧数组都很小的话，那我们直接遍历数组即可，反之我们需要一个索引）：

     *
     *  A: [b c d e f]
     *  B: [c b h f e]
     *  P: [. . . . .] // . == -1
     *  I: {
     *    c: 0,
     *    b: 1,
     *    h: 2,
     *    f: 3,
     *    e: 4,
     *  }
     *  last = 0
     *

有了数组 P 和 索引 I 之后，现在我们可以开始遍历旧数组

 *
 *  A: [b c d e f]
 * 	^
 *  B: [c b h f e]
 *  P: [. 0 . . .] // . == -1
 *  I: {
 *    c: 0,
 *    b: 1, <-
 *    h: 2,
 *    f: 3,
 *    e: 4,
 *  }
 *  last = 1
 *

第一步遍历我们可以发现旧数组的 b 元素也在新数组上，所以我们把他在旧数组的位置 0 放到他在数组 P 相对应的位置上。

这里我们同时还要维护一个变量 last，它代表访问过的节点在新集合中最右的位置(即最大的位置)。如果新集合中当前访问的节点比 last 大，说明当前访问节点在旧集合中就比上一个节点位置靠后，则该节点不会影响其他节点的位置，因此不必执行移动操作。只有当访问的节点比 last 小时，才需要进行移动操作。

 *
 *  A: [b c d e f]
 * 	  ^
 *  B: [c b h f e]
 *  P: [1 0 . . .] // . == -1
 *  I: {
 *    c: 0, <-
 *    b: 1,
 *    h: 2,
 *    f: 3,
 *    e: 4,
 *  }
 *  last = 1 // last > 0; moved = true
 *

这里我们访问元素 c 的位置为 0，而 last 为 1，所以我们需要进行移动操作。

这一步实际上也是 React Stack Reconciler（React 16 以下）的核心算法：每次遍历的时候把当前节点在旧集合的位置和 last 进行对比，如果 mountIndex 大于 last，那么就把他添加到差异队列，然后更新 last，全部遍历完毕之后再遍历差异队列，一步一步进行 patch。

（这里如果理解有障碍的话建议把常规的排序算法都撸一遍，可以重点看选择排序和插入排序）

 *
 *  A: [b c d e f]
 *          ^
 *  B: [c b h f e]
 *  P: [1 0 . . .] // . == -1
 *  I: {
 *    c: 0,
 *    b: 1,
 *    h: 2,
 *    f: 3,
 *    e: 4,
 *  }
 *  moved = true
 *

这里元素 d 在新数组当中并不存在，所以它应该被移除掉。

 *
 *  A: [b c d e f]
 *            ^
 *  B: [c b h f e]
 *  P: [1 0 . . 3] // . == -1
 *  I: {
 *    c: 0,
 *    b: 1,
 *    h: 2,
 *    f: 3,
 *    e: 4, <-
 *  }
 *  moved = true

这里把元素 e 在旧数组的位置（3）放到数组 P 上。

 *
 *  A: [b c d e f]
 * 	        ^
 *  B: [c b h f e]
 *  P: [1 0 . 4 3] // . == -1
 *  I: {
 *    c: 0,
 *    b: 1,
 *    h: 2,
 *    f: 3, <-
 *    e: 4,
 *  }
 *  moved = true
 *

这里把元素 f 在旧数组的位置（4）放到数组 P 上。

到了这一步，如果是 React 的算法已经走完了。但不妨思考以下的 diff 情况：

 *
 * A: [a b c d]
 * B: [d a b c]
 *

这里肉眼一看就知道，把旧集合的 d 元素移动到 0 这一步操作就可以完成 diff。但根据前文所述的逻辑走一次，实际上 React 会先把 a, b, c 移动到他们的相应的位置 + 1，一共三步操作。

移动操作也并不是没有副作用，仍然可能会重启动画，focus 丢失，重置滚动条位置等。所以我们还可以进行下一步优化：

3. 找到最小的移动次数。

这里我们需要找到 P 数组的[最长递增子序列(longest increasing subsequence)] 来做动态规划，新集合中不属于这个序列的将会被移动。

还是用我们之前的例子：

 *
 *  A: [b c d e f]
 *  B: [c b h f e]
 *  P: [1 0 . 4 3] // . == -1
 *  LIS:     [1 4]
 *  moved = true
 *

这里我们同时尾部遍历新数组和 LIS 序列，查看元素的位置是否能与 LIS 序列的任何一个值匹配。

 *
 *  A: [b c d e f]
 *  B: [c b h f e]
 *              ^  // new_pos == 4
 *  P: [1 0 . 4 3] // . == -1
 *  LIS:     [1 4]
 *              ^  // new_pos == 4
 *  moved = true
 *

这一步能匹配，e 可以呆在它原来的位置上。

 *
 *  A: [b c d e f]
 *  B: [c b h f e]
 *            ^    // new_pos == 3
 *  P: [1 0 . 4 3] // . == -1
 *  LIS:     [1 4]
 *            ^    // new_pos != 1
 *  moved = true
 *

f 的位置不能匹配，把他移动到 e 之前。

 *
 *  A: [b c d e f]
 *  B: [c b h f e]
 *          ^      // new_pos == 2
 *  P: [1 0 . 4 3] // . == -1
 *          ^      // old_pos == -1
 *  LIS:     [1 4]
 *            ^
 *  moved = true
 *

h 的位置为 -1，把他插入。

 *
 *  A: [b c d e f]
 *  B: [c b h f e]
 *        ^        // new_pos == 1
 *  P: [1 0 . 4 3] // . == -1
 *  LIS:     [1 4]
 *            ^    // new_pos == 1
 *  moved = true
 *

b 能匹配 LIS，可以老老实实呆着。

 *
 *  A: [b c d e f]
 *  B: [c b h f e]
 *      ^          // new_pos == 0
 *  P: [1 0 . 4 3] // . == -1
 *  LIS:     [1 4]
 *          ^      // new_pos != undefined
 *  moved = true
 *

c 不能匹配，把它移动到 b 之前。

走完这一步我们的 diff 算法就完毕了。

这时回头再来看看之前把尾部元素插入到头部的情况，React 需要经过 3 次操作，而经过我们动态规划之后：

 *
 - A: [a b c d]
 - B: [d a b c]
 - P: [3 0 1 2]
 - LIS: [0 1 2]
 *

可以发现 a, b, c 能匹配 LIS，可以呆到天荒地老，我们只要把 d 移动到头部的位置就可以完成 diff。Perfect！

详细代码： https://github.com/NervJS/nerv/blob/patch/packages/nerv/src/vdom/patch.ts

I found a weird bug and I'm not sure what the cause is.

I have the following code:

<div id="app">
	<Header location={this.state.location} />
	<main className="d-flex justify-content-center">
		<HashRouter onLocationChanged={this.handleLocationChanged}>
			<Route key="liked" hash="#/">
				<Liked />
			</Route>
			<Route key="saved" hash="#/saved">
				<Saved />
			</Route>
			<Route key="about" hash="#/about">
				<About />
			</Route>
		</HashRouter>
	</main>
</div>

HashRouter render function:

return this.state.render

In the state, only one child is saved (double checked with console.log and dev tools). However, when I render a different component (so to say, a route change is happening), this happens:

So it seems Nerv is adding the component/a Node to the DOM instead of replacing it. Both <Liked /> and <About /> render a <div>, the latter one with className="...".

Code is here: https://github.com/kurtextrem/Improved-for-Instagram/blob/master/src/components/HashRouter.js#L152 / https://github.com/kurtextrem/Improved-for-Instagram/blob/master/src/components/app.js#L44

nerv-devtools always works well ，but when add the react-router-dom ， it is error !

TypeError: Cannot read property 'type' of null createReactDOMComponent E:/demos/ReactApp/nerv-app/node_modules/nerv-devtools/dist/index.esm.js:74

71 | _currentElement: isText 72 | ? vnode.text 73 | : { 74 | type: vnode.type, 75 | props: normalizeProps(vnode.props) 76 | }, 77 | _renderedChildren: normalizeChildren(vnode.children),

Works well in 1.3.x版本。But broke in 1.4.

TypeError: Cannot read property 'forEach' of undefined

  34 | 
  35 |   it(`somehow throw error`, () => {
> 36 |     const component = renderIntoDocument(<Campaign campaignProps={mockCampaign.events} />)
     |                       ^
  37 |     const componentDom = findDOMNode(component, 'swiperContent')
  38 |     const items = componentDom.querySelectorAll('.swiperImage')

  at forEach (node_modules/nervjs/src/hooks.ts:123:11)
  at renderComponent (node_modules/nervjs/dist/index.js:1702:5)
  at renderComponent (node_modules/nervjs/src/lifecycle.ts:98:20)
  at ComponentWrapper.mountComponent [as init] (node_modules/nervjs/src/full-component.ts:47:17)
  at init (node_modules/nervjs/src/vdom/create-element.ts:27:47)
  at createElement (node_modules/nervjs/src/lifecycle.ts:69:10)
  at mountVNode (node_modules/nervjs/src/lifecycle.ts:107:28)
  at ComponentWrapper.mountComponent [as init] (node_modules/nervjs/src/full-component.ts:47:17)
  at createElement (node_modules/nerv-test-utils/node_modules/nervjs/dist/index.js:1333:29)
  at mountVNode (node_modules/nerv-test-utils/node_modules/nervjs/dist/index.js:1454:12)
  at Object.render (node_modules/nerv-test-utils/node_modules/nervjs/dist/index.js:1729:15)
  at renderIntoDocument (node_modules/nerv-test-utils/src/index.ts:16:16)

感谢nerv团队努力！

我使用create-react-app和react-router V4建了一个项目，修改react-scripts中关于webpack的alias配置，打包出来后，ie9, ie10都可以正常使用(在修改alias配置前试过打包项目运行，原生react在ie9和ie10下均无法使用)，ie8下报了“缺少标识符”错误。

检查了一下，是service worker的问题，去掉后，ie8下报"对象不支持此操作"错误

各位nerv开发大佬你们好。

SSR

我看到有提供nerv-server包，提供了字符串模板输出(包括Prefetching这些？)。 但如果用next.js也没问题吧。

路由

路由是沿用社区react-router，还是说后期你们会出一个官方nerv-router？

性能

目前nerv应用在了jd.com，我看源码是服务端渲染+客户端交互渲染？ 需要写两份代码吗，server/clinet各一份？ 还是说nerv ssr方案自带组件反解？

希望大佬能百忙之中抽空解答，不胜感激。

I am using 1.2.4-beta.1

When I am using react-inform and nerv-server - it crashes the render.

state.values seems to be undefined, so values[name] is crashing in this file: https://github.com/theadam/react-inform/blob/master/src/form.js

However when I render this in browser - everything is working as expected.

I'm not using anything fancy with react-inform so you should be able to reproduce this with basic example, but if not - I may try to isolate the issue out of my project and make a repo out of it.

Reproduction link https://codesandbox.io/s/qlpj0071qw Steps to reproduce 1.在手机或者Chrome手机模拟器打开测试页面 2.下拉页面，并松手

期望结果： 页面弹回 实际结果： 页面没有弹回

补充信息： 控制台打印出了对后一次render时候的style，对比实际dom上的style，不一致。

用react创建了一个一样的demo是正常的： https://codesandbox.io/s/kx1ox76y5o

//.babelrc配置
"plugins": [
    [
      "transform-react-jsx",
      {
        "pragma": "Nerv.createElement"
      }
    ],
    [
      "module-resolver", 
      {
      "root": ["."],
      "alias": {
          "react": "nervjs",
          "react-dom": "nervjs",
          "create-react-class": "nerv-create-class"
      }
    }]
  ]

// page/index.js
import React from 'react'

export default () => <div>Welcome to next.js!</div>

unmount callbacks should be called before removing DOM. See https://jsfiddle.net/Luotcj1f/ for React behavior. at least this line in wrong: https://github.com/NervJS/nerv/blob/master/packages/nerv/src/vdom/patch.ts#L95-L96

Didn't check any other places.

Fixing:

Could not find a declaration file for module 'nervjs'. 
'./default/node_modules/nervjs/index.js' implicitly has an 'any' type. 
Try `npm install @types/nervjs` if it exists 
or add a new declaration (.d.ts) file containing `declare module 'nervjs';

版本：

"nerv-devtools": "^1.5.7", "nerv-test-utils": "^1.5.7", "jest": "^25.1.0",

问题描述：

ReactTestUtils.findRenderedDOMComponentWithClass(wrapper,'.sp-alert_close_icon'); 这个方法在查找元素时候，查不到，jest测试报错

查看源码

上图里面查找的result为空数组

Version: nervjs 1.5.7 现象：使用 TS 时，nervjs 类型无法正常提示 原因：

package.json 中指定的 typings 路径为 index.d.ts：

{
  "name": "nervjs",
  "version": "1.5.7",
  "description": "A react-like framework based on virtual-dom",
  "main": "index.js",
  "module": "dist/index.esm.js",
  "jsnext:main": "dist/index.esm.js",
  "typings": "index.d.ts",
  "unpkg": "dist/nerv.js",
}

npm包中实际的typing路径为 dist/index.d.ts

├── CHANGELOG.md
├── README.md
├── dist
│   ├── index.d.ts # d.ts
│   ├── index.esm.js
│   ├── index.esm.js.map
│   ├── index.js
│   ├── index.js.map
│   ├── index.prod.js
│   ├── nerv.js
│   ├── nerv.js.map
│   ├── nerv.min.js
│   └── packages
├── index.js
└── package.json