从 React 切换到 Nerv

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

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

var React = require('react');
var ReactDOM = require('react-dom');

class MyComponent extends React.Component {
  render() {
    return <div>Hello World</div>;
  }
}

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

只需要在 aliasnervjsreactreact-dom 关联起来即可:

{
  resolve: {
    alias: {
      'react': 'nervjs',
      'react-dom': 'nervjs'
    }
  }
}

使用 Babel

直接单独使用 babel 需要安装一个叫 babel-plugin-module-resolver 的插件,接下来就在 .babelrc 添加以下内容,就可以把 reactreact-domnervjs 关联起来:

{
    "plugins": [
        ["module-resolver", {
            "root": ["."],
            "alias": {
                "react": "nervjs",
                "react-dom": "nervjs"
            }
        }]
    ]
}

使用 Browserify

使用 Browserify 也需要安装一个叫 aliasify 的插件,然后在 package.jsonreactreact-dom 关联到 nervjs

{
    "aliasify": {
        "aliases": {
            "react": "inferno-compat",
            "react-dom": "inferno-compat"
        }
    }
}

results matching ""

    No results matching ""