React中name与{name}有何区别？导入时大括号{}有什么作用？

这个区别存在于JSX语法场景中，JSX本身是React.createElement的语法糖，两种写法的解析逻辑完全不同：

• 直接书写的name：会被解析为普通字符串文本，直接原样渲染到页面上，不会读取当前作用域下同名变量的值。哪怕你已经在组件里定义了const name = '测试值'，写<p>name</p>最终页面只会显示「name」四个字符。
• 大括号包裹的{name}：是JSX的插值语法标记，大括号内部会被当作标准JavaScript表达式执行，会主动查找当前作用域下name变量的实际值，把表达式计算后的结果渲染到页面。同样定义const name = '测试值'，写<p>{name}</p>最终页面显示的是「测试值」。

举个直观的对比例子：

function UserInfo() {
  const name = "李四"
  return (
    <div className="container">
      {/* 直接书写，页面渲染结果：用户名：name */}
      <p>用户名：name</p>
      {/* 大括号插值，页面渲染结果：用户名：李四 */}
      <p>用户名：{name}</p>
    </div>
  )
}

这个规则不止适用于标签内部的文本，标签属性的写法也遵循同样逻辑：比如<Link to="/home">里的to属性值是字符串/home，如果写to={homePath}，就会读取变量homePath的值作为跳转地址。

你贴的导入示例里的大括号，和上面JSX插值的大括号完全是两套独立语法，属于ES6模块化的原生规则，要不要加括号完全取决于对应模块的导出方式：

// 注：第一行常规规范写法是大写React，你贴的小写react属于不规范写法
import React from 'react';
import { Link } from 'react-router-dom';

• 不加{}的导入：对应模块的默认导出（export default）。一个JS模块最多只能有一个默认导出，导入的时候可以自定义变量名，不需要和导出名一致，只是惯例上会和官方约定的命名保持一致，比如React模块的默认导出我们统一命名为React。
• 加{}的导入：对应模块的命名导出（直接用export修饰的导出）。一个模块可以有任意多个命名导出，导入的时候必须在大括号内写和导出时完全一致的名称（也可以用as关键字重命名）。比如react-router-dom里除了Link组件，还导出了Routes、Route、useNavigate等组件和方法，这些都是命名导出，导入时都需要写在大括号里。

可以用一个简单的模块例子理解对应关系：

// 自定义模块 utils.js
// 默认导出，一个模块最多一个
export default function mainUtil() {
  return '默认导出内容'
}
// 命名导出，可以写多个
export const appName = '我的应用'
export function formatTime() {
  return '2024-01-01'
}

// 其他文件导入时
import customName from './utils' // 拿到默认导出的mainUtil，名字可以自定义
import { appName, formatTime } from './utils' // 拿到命名导出的两个变量，名字必须和导出时匹配

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