Nerv – 一个快速的React替换,兼容IE8和React 16

orangegoose 发布于2月前 阅读486次
0 条评论

Nerv – A fast React alternative, compatible with IE8 and React 16

Nerv is a virtual-dom based JavaScript (TypeScript) library with identical React 16 API, which offers much higher performance and better browser compatibility.



⚛ Identical React API, no 'nerv-compat' is needed

️⚔ Battle tested, serve in home page

:zap:️ High performance

�� IE8 compatibility

:dart: Tiny size, 9Kb gziped

:last_quarter_moon: Isomorphic rendering on both client and server

:dizzy: Support React 16 features, Error Boundaries, Portals, custom DOM attributes, etc.


This repository is a monorepo that we manage using Lerna . That means that we actually publish several packages to npm from the same codebase, including:

Package Description
nervjs The core of Nerv
nerv-redux Nerv binding for Redux
nerv-devtools Provides support for React's Dev Tools for Nerv
nerv-test-utils Suite of utilities for testing Nerv applications
nerv-utils Internal Helpers functions for Nerv
nerv-shared Internal shared functions for Nerv
nerv-create-class The legacy createClass API for Nerv


The easiest way to get started with Nerv is using CodeSandbox Playground , If you use React, you already know how to use Nerv.

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

  <HelloMessage name="Nerv" />,

More example:

Switching to Nerv from React

Switching to Nerv from React is easy, just aliasing nervjs in for react and react-dom , without any code changes.

Usage with Webpack

Add an alias in your webpack.config.js :

  // ...
  resolve: {
    alias: {
      'react': 'nervjs',
      'react-dom': 'nervjs',
      // Not necessary unless you consume a module using `createClass`
      'create-react-class': "nerv-create-class"
  // ...

Usage with Babel

Install the babel plugin for aliasing: npm install --save-dev babel-plugin-module-resolver In .babelrc :

    "plugins": [
        ["module-resolver", {
            "root": ["."],
            "alias": {
                "react": "nervjs",
                "react-dom": "nervjs",
                // Not necessary unless you consume a module using `createClass`
                "create-react-class": "nerv-create-class"

Usage with Browserify

Install the aliasify transform: npm i -D aliasify , then in your package.json :

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

Compatible with React

Nerv currently support React API and features:


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


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

Internet Explorer 8 (or below) compatibility

First, install es5-polyfill :

npm install --save es5-polyfill

Then insert the code into the beginning of your entry file:


At last, setting .babelrc if you are using babel :

  "presets": [
    ["env", {
      "spec": true,
      "useBuiltIns": false

Developer Tools

Nerv has a development tools module which allows you to inspect the component hierarchies via the React Chrome Developer Tools plugin.

To enable the Nerv development tool you must install the nerv-devtools module and then require('nerv-devtools') before the initial Nerv.render() .

if (process.env.NODE_ENV !== 'production')  {
// before Nerv.render()
Nerv.render(<App />, document.getElementById('#root'))

Nerv – A fast React alternative, compatible with IE8 and React 16


查看原文: Nerv – A fast React alternative, compatible with IE8 and React 16

  • purplesnake
  • beautifulduck
  • smallladybug
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。