从 React 切换到 Nerv

优质

小牛编辑

131浏览

2023-12-01

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

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

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

使用 Babel

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

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

使用 Browserify

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

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