何时使用import React from react？React组件使用场景疑问

嘿，好问题！让我一步步帮你理清这两个关键点：

首先得从JSX的本质说起：

• JSX是最常见的触发导入的原因：你写的JSX代码，比如 <Button text="Click" />，在编译后会被转换成 React.createElement(Button, { text: "Click" })。如果没有提前导入React，这个React全局变量就不存在，浏览器会直接报错。
• 那如果组件完全不用JSX呢？比如纯手写React.createElement的函数组件，你依然需要导入React——因为你直接用到了React对象本身。举个例子：

import React from 'react';

function PlainComponent(props) {
  return React.createElement('div', null, `Hello ${props.name}`);
}

• 不过在React 17及以后的版本，官方更新了JSX转换规则，现在你不用手动写import React from 'react'也能正常用JSX了！新的转换会自动在编译阶段引入必要的React函数，省去了手动导入的步骤。但如果你的项目还在使用React 16或更早版本，还是必须手动导入。
• 另外，如果你需要直接使用React提供的API（比如useState、useEffect这些Hook，或者React.memo、React.Fragment），不管用不用JSX，都得导入React（当然也可以用解构导入，比如import { useState, memo } from 'react'，这样更简洁）。

没错，这就是类组件最初被设计出来的核心场景！

• 在React 16.8（Hook推出）之前，类组件是唯一能拥有组件内部状态（state）和使用生命周期钩子（比如componentDidMount、componentDidUpdate）的方式。当时如果要做状态管理或者处理副作用，只能用类组件。
• 但现在有了Hook之后，函数组件也能通过useState、useEffect等Hook实现完全相同的逻辑，甚至写法更灵活简洁。所以现在大部分新的React项目都会优先选择函数组件+Hook，类组件的使用场景已经大大减少。
• 当然也有少数例外，比如维护老项目、使用一些仅支持类组件的第三方库，或者需要实现错误边界（不过现在也有第三方Hook可以实现类似功能），但从最佳实践来说，新代码里如果不需要类组件的特定特性，都推荐用函数组件。

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