Skip to content

Latest commit

 

History

History
268 lines (191 loc) · 7.04 KB

README_CN.md

File metadata and controls

268 lines (191 loc) · 7.04 KB
Raw

Build Status License Coverage Status Downloads Build Status Sauce Test Status

Nerv是一款基于虚拟DOM技术的JavaScript（TypeScript）库，它提供了与React 16一致的使用方式与API，并且拥有更高的性能表现、更小的包大小以及更好的浏览器兼容性

English

特性

⚛ 与React保持一致的API，不需要 nerv-compat

️⚔ 久经战斗洗礼，已经应用于京东PC首页 与 京东旗下TOPLIFE

⚡️ 强劲的性能

🤣 IE8兼容

🎯 更小尺寸, 9Kb gziped

🌗 支持客户端与服务端同构渲染

💫 支持React 16的新特性, 例如错误处理, Portals, 自定义DOM属性等等.

相关NPM包

本项目采用Lerna对多个NPM包进行维护管理，包括：

NPM包 介绍
nervjs Nerv库
nerv-redux Nerv与Redux结合，类似react-redux
nerv-devtools 提供对React Developer Tool的支持
nerv-server 提供服务端渲染支持
nerv-test-utils Nerv应用测试套件
nerv-utils Nerv内部帮助方法集
nerv-shared Nerv内部shared方法集
nerv-create-class createClass API支持

快速开始

CodeSandbox Playground是最简单的开始使用Nerv的方式。并且如果你已经使用过React，你就已经知道如何来使用Nerv了。

安装

当然我们推荐使用 Webpack 和 Babel 来使用Nerv。首先你需要安装Nerv

With npm

$ npm install --save nervjs

With yarn

$ yarn add nervjs

使用

然后就可以引入Nerv了，Nerv同时提供了作为命名空间默认导出和多个方法导出两种使用方式

默认导出作为命名空间：

import Nerv from 'nervjs'
class HelloMessage extends Nerv.Component {
  render() {
    return <div>Hello {this.props.name}</div>
  }
}

Nerv.render(
  <HelloMessage name="Nerv" />,
  document.getElementById('app')
)

多个方法单独导出：

import { Component, render } from 'nervjs'
class HelloMessage extends Component {
  render() {
    return <div>Hello {this.props.name}</div>
  }
}

render(
  <HelloMessage name="Nerv" />,
  document.getElementById('app')
)

☝️ 更多信息请移步到官方 开发文档

示例

从React切换成Nerv

从React切换成使用Nerv非常方便，只需要将react 和 react-dom 重命名成 nervjs，而不需要任何的代码变动。

使用Webpack

在你的 webpack.config.js 文件增加一个 alias 配置:

{
  // ...
  resolve: {
    alias: {
      'react': 'nervjs',
      'react-dom': 'nervjs',
      // 除非你想使用 `createClass`，否则这一条配置是没有必要的
      'create-react-class': "nerv-create-class"
    }
  }
  // ...
}

使用Babel

通过安装这个babel插件来进行重命名

$ npm install --save-dev babel-plugin-module-resolver

并且在 .babelrc 中进行配置

{
  "plugins": [
    ["module-resolver", {
      "root": ["."],
      "alias": {
        "react": "nervjs",
        "react-dom": "nervjs",
        // 除非你想使用 `createClass`，否则这一条配置是没有必要的
        "create-react-class": "nerv-create-class"
      }
    }]
  ]
}

使用Browserify

安装重命名转换工具

$ npm i --save-dev aliasify

然后在你的 package.json 文件中加入配置

{
  "aliasify": {
    "aliases": {
      "react": "nervjs",
      "react-dom": "nervjs"
    }
  }
}

适配React

当前Nerv支持的React API与特性

react

  • React.createClass (legacy)
  • React.createElement
  • React.cloneElement
  • React.Component
  • React.PureComponent
  • React.PropTypes
  • React.Children
  • React.isValidElement
  • Error Boundaries (React 16)

react-dom

  • React.unstable_renderSubtreeIntoContainer (legacy)
  • ReactDOM.render
  • ReactDOM.unmountComponentAtNode
  • ReactDOM.findDOMNode
  • ReactDOM.hydrate (React 16)
  • ReactDOM.createPortal (React 16)

IE8兼容

首先, 安装 es5-polyfill

npm install --save es5-polyfill

然后在你的代码文件中引用它

require('es5-polyfill')

最后如果你使用 babel 的话，配置 .babelrc

{
  "presets": [
    ["env", {
      "spec": true,
      "useBuiltIns": false
    }],
    ["es3"]
  ],
  ...
}

开发者工具Developer Tools

Nerv提供了一个开发者工具模块来帮助你使用React Chrome Developer Tools 插件。

使用Nerv时开启开发者工具，需要安装 nerv-devtools 包，然后在初始化的 Nerv.render() 方法调用之前引用这个包 require('nerv-devtools')。

if (process.env.NODE_ENV !== 'production')  {
  require('nerv-devtools')
}
// 在 Nerv.render()调用之前
Nerv.render(<App />, document.getElementById('#root'))

nerv-devtools

Change Log

特别鸣谢

凹凸实验室（京东-多终端研发部）

License

FOSSA Status