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

orangegoose 发布于6月前 阅读858次
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.

中文文档

Features

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

️⚔ Battle tested, serve in JD.com 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.

Packages

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

Examples

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 {this.props.name}</div>
  }
}

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

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

  • 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)

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:

require('es5-polyfill');

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

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

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')  {
  require('nerv-devtools')
}
// before Nerv.render()
Nerv.render(<App />, document.getElementById('#root'))

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

License

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

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