从 React 切换到 Nerv

Nerv 提供了比 React 更好的浏览器兼容性和更高的性能，与此同时也不会放弃 React 庞大的生态系统。兼容 React 生态系统是我们开发 Nerv 的重要目标之一。

假设我们有这样一段代码：

  1. var React = require('react');
  2. var ReactDOM = require('react-dom');
  4. class MyComponent extends React.Component {
  5.   render() {
  6.     return <div>Hello World</div>;
  7.   }
  8. }
  10. ReactDOM.render(<MyComponent />, node);

我们迁移的目标就是更改一些配置，但是不用改变代码本身任意一行。

目前支持的特性

react

  • React.createElement
  • React.cloneElement
  • React.Component
  • React.PureComponent
  • React.Children
  • React.isValidElement

  • componentDidCatch (React 16)

    react-dom

  • ReactDOM.render

  • ReactDOM.unmountComponentAtNode
  • ReactDOM.findDOMNode
  • ReactDOM.createPortal (React 16)

    使用 Webpack

只需要在 alias 把 nervjs 和 react、react-dom 关联起来即可：

  1. {
  2.   resolve: {
  3.     alias: {
  4.       'react': 'nervjs',
  5.       'react-dom': 'nervjs'
  6.     }
  7.   }
  8. }

使用 Babel

直接单独使用 babel 需要安装一个叫 babel-plugin-module-resolver 的插件，接下来就在 .babelrc 添加以下内容，就可以把 react、react-dom 和 nervjs 关联起来：

  1. {
  2.     "plugins": [
  3.         ["module-resolver", {
  4.             "root": ["."],
  5.             "alias": {
  6.                 "react": "nervjs",
  7.                 "react-dom": "nervjs"
  8.             }
  9.         }]
  10.     ]
  11. }

使用 Browserify

使用 Browserify 也需要安装一个叫 aliasify 的插件，然后在 package.json 把 react 和 react-dom 关联到 nervjs：

  1. {
  2.     "aliasify": {
  3.         "aliases": {
  4.             "react": "inferno-compat",
  5.             "react-dom": "inferno-compat"
  6.         }
  7.     }
  8. }

原文: https://nervjs.github.io/docs/guides/switching-to-nerv.html