普通JSX与React JSX的差异及React是否扩展其语法的技术问询

Great question! Let's break down the differences between generic JSX (the core syntax proposal) and React's specific implementation, plus the extensions React has built on top of the base JSX syntax.

核心差异点 #

1. 编译目标不同 #

JSX is just syntactic sugar that gets compiled to JavaScript function calls, but the target functions differ:

• Generic JSX (like what Babel compiles for non-React frameworks) typically outputs calls to a generic h() function (common in lightweight libraries like Preact):

  // Input
  <div class="greeting">Hello</div>
  // Compiled output
  h('div', { class: 'greeting' }, 'Hello')
  

• React JSX uses React's own factory functions. Before React 17, it required React.createElement(); 17+ uses auto-imported jsx()/jsxs() functions:

  // React 17- compiled output
  React.createElement('div', { className: 'greeting' }, 'Hello')
  // React 17+ compiled output
  jsx('div', { className: 'greeting', children: 'Hello' })
  

2. DOM属性名适配 #

React JSX adjusts attribute names to fit JavaScript's naming rules, while generic JSX stays closer to native HTML:

• Native class becomes className in React JSX (generic JSX often allows class directly)
• Native for becomes htmlFor in React JSX (most generic JSX keeps for)
• Event attributes use camelCase exclusively (e.g., onClick, onMouseOver) — some generic JSX implementations also support kebab-case like on-click

3. Component vs. Native Element Rules #

React enforces a strict convention that's now widely adopted but originated with React:

• Lowercase tags are parsed as native HTML elements (e.g., <p>, <input>)
• Uppercase tags are treated as custom React components (e.g., <UserCard>)
  While many generic JSX implementations follow this, React strictly enforces it — a lowercase custom component will be incorrectly interpreted as a native element.

4. Special Prop Handling #

React JSX adds unique props that aren't part of the core JSX spec:

• key: Used to identify list items for React's Diff algorithm optimization. It's not passed to the component as a regular prop.
• ref: For accessing DOM elements or component instances, paired with React APIs like useRef and createRef.
• dangerouslySetInnerHTML: A safe(r) way to inject raw HTML, designed to mitigate XSS risks — generic JSX usually uses simpler props like innerHTML.

React's Extensions to JSX #

Beyond the differences above, React has expanded JSX functionality in meaningful ways:

• Fragment Short Syntax: React pioneered the <></> shorthand for rendering multiple elements without a wrapping parent node. While now supported in some generic JSX implementations, it started with React.
• Auto JSX Imports: React 17+ eliminates the need for import React from 'react' at the top of every file — the compiler handles importing the necessary JSX functions automatically.
• Synthetic Event Binding: JSX event props (like onClick={handleClick}) tie into React's synthetic event system, which normalizes cross-browser behavior (unlike generic JSX that often binds native DOM events directly).
• Null/False Rendering: React JSX skips rendering false, null, undefined, and true entirely. Some generic JSX implementations may render true as the text "true" instead.

In short, while the core JSX syntax is universal, React has tailored it to fit its rendering model and web development best practices, adding features that make it more powerful and intuitive for React-specific workflows.

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