为何React Native的index.js需导入未显式使用的React？

这是个很多React新手都会碰到的疑惑，我来一步步给你拆解清楚：

核心原因：JSX是React.createElement()的语法糖 #

你代码里的这段JSX：

const RNRedux = () => (
  <Provider store={store}>
    <App />
  </Provider>
);

看起来是HTML-like的语法，但实际上会被Babel这类转译工具转换成原生JavaScript代码，转译后的结果大概是这样：

const RNRedux = () => (
  React.createElement(Provider, { store: store },
    React.createElement(App)
  )
);

看到没？转译后的代码直接调用了React.createElement()，所以如果你的文件里没有导入React，运行时就会找不到这个变量，抛出"Can't find variable: React"的错误。

React Native确实依赖React #

React Native的整个组件渲染体系都是构建在React核心库之上的，JSX本身就是React生态的专属语法（虽然现在其他框架也有类似实现，但RN的JSX处理逻辑完全遵循React的规则），所以RN必然依赖React，这也是为什么你需要导入它的根本原因。

为什么React Native不自动完成导入？ #

这其实和React的版本以及项目的Babel配置有关：

• 在React 17之前，所有使用JSX的文件都必须手动导入React，这是当时的标准要求；
• React 17及之后，官方推出了新的JSX转译器（@babel/plugin-transform-react-jsx的runtime模式），可以自动注入React的相关调用，不需要手动导入了。

如果你的React Native项目还在使用旧的转译配置，或者没有开启这个runtime模式，就还是得手动导入React。你可以检查一下项目的Babel配置文件（比如babel.config.js），看看是否配置了runtime: 'automatic'的JSX插件。

举个开启自动导入的Babel配置示例：

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
    ['@babel/preset-react', { runtime: 'automatic' }]
  ]
};

配置后，你就可以删掉index.js里的import React from 'react';语句了，不会再报错。

内容的提问来源于stack exchange，提问作者sudip