首先

当在HTML中指定类名或内联样式时，可以按照以下方式进行编写。

<div class="your-name" style="color: #FF0000;">
  Hello World!
</div>

在 React (JSX) 中，可以这样表达。

<div className="your-name" style={{ 'color': '#FF0000' }}>
  Hello World!
</div>

在公式文件中，也提到了在 React 和 HTML 中有几个属性的行为是不同的。

从上面可以看出，React的className属性和style属性与HTML不同，因此可以说它们是React的扩展。

除了onChange属性外，还有许多与HTML行为不同的属性，如select/textarea标签的value/defaultValue属性。

JSX是React的功能，那么是否应该称其为JSX扩展而不是React呢？这可能是正确的。

不是React，而是DOM的扩展？

然而，据说在 React 中不仅仅是字符串，还可以用className这样的名称或内联样式进行指定，这是 JavaScript 本身就具备的特性。

document.querySelectorAll('div')[0].style.color = '#00FF00';
document.querySelectorAll('div')[0].className = 'another-class-name';

这意味着它们不是 React 的扩展吗？为了进行调查，让我们看一下 JSX 的转译结果。（需要注意的是，这个例子使用的是 React 17.0.2，而没有使用 React 17 的新功能_jsx和_jsxs。根据环境的不同，可能会出现这样的转换结果。）

l.createElement(
  "div",
  {
    className: "your-class-name",
    style: {color:"#FF0000"}
  },
  "Hello World!"
),

l.createElement 可能是指 React.createElement。然而，此 createElement 方法与 JavaScript 的 DOM 中原有的同名方法不同，因此从这个意义上说，它可以被称为是 React 的功能（或 JSX 的功能）。

总结

在React中，存在一些与HTML的行为不同的属性，如className属性和style属性。此外，JavaScript的createElement方法并没有指定这些属性的功能。因此，可以说这些属性是React（JSX）的扩展。（这是个人观点）

给你个小礼物。

最后，我们将附上HTML和各种框架的比较。从这个角度来看，可以发现DOM和React的设计非常相似。

指定课程名称和内联样式

HTML – HyperText Markup Language 是一种用于创建网页的标记语言。

<div class="your-name" style="color: #FF0000;">
  Hello World!
</div>

DOM（文档对象模型）

element.className 是一个字符串，所以它的格式与 React 相同。
然而，不能直接将对象赋值给 element.style 并应用样式。

const element = document.querySelectorAll('div')[0];

element.style.color = '#00FF00';
element.className = 'another-class-name';

React / JSX 反应/ JSX

似乎Vue+JSX的写法几乎相同。

<div className="your-class-name" style={{ 'color': '#FF0000' }}>
  Hello World!
</div>

Vue.js – 只需要一个选项的原生中文释义：Vue.js

在Vue中，您可以使用v-bind：来编写JavaScript代码，也可以使用与常规HTML相同的写法。

<div class="your-name" style="color: #FF0000">
  Hello World!
</div>
または
<div v-bind:class="dynamicClass"
     v-bind:style="{ color: dynamicColor }">
  Dynamic Attributes!
</div>

表单元素

HTML (超文本标记语言) 可以用来创建和组织网页内容。

<select>
  <option value="apple">りんご</option>
  <option value="orange" selected>みかん</option>
</select>
<textarea>Hello World</textarea>
<input type="checkbox" checked />チェックボックス

DOM – 文档对象模型

const selectElement = document.querySelectorAll('select')[0];
const textareaElement = document.querySelectorAll('textarea')[0];
const checkboxElement = document.querySelectorAll('input[type="checkbox"]')[0];

selectElement.value = "apple";
textareaElement.value = "Enjoy JavaScript!";
checkboxElement.checked = false;

React / JSX 反应/简单 JavaScript XML

<select value={myFruit}>
  <option value="apple">りんご</option>
  <option value="orange">みかん</option>
</select>
<textarea value={myText} />
<input type="checkbox" checked={isChecked} />チェックボックス

Vue

<select v-bind:value="myFruit">
  <option value="apple">りんご</option>
  <option value="orange">みかん</option>
</select>
<textarea v-bind:value="myText" />
<input type="checkbox" v-bind:checked="isChecked" />チェックボックス

另外，您也可以使用v-model来实现双向数据绑定，而不是使用v-bind。

事件处理程序

将以下内容用中文表述，只需要一个选项：

HTML

<form action="./submit"
      onSubmit="console.log('submit'); return false;">
  <input type="text"
         onChange="console.log('change')"
         onInput="console.log('input')" />
  <button type="submit">送信</button>
</form>

DOM (Document Object Model) 是一种程序接口，提供了对 HTML 和 XML 文档的结构化表达和操作方法。

如果使用addEventListener，则不能使用return false来取消处理。

const formElement = document.querySelectorAll('form')[0];
const inputElement = document.querySelectorAll('input[type="text"]')[0];

inputElement.addEventListener("change", () => { console.log('change'); }); 
inputElement.addEventListener("input", () => { console.log('input'); }); 
formElement.addEventListener("submit", (e) => {
  console.log('submit');
  e.preventDefault();
}); 

React / JSX 反应 / JSX

返回 false; 不能停止表单提交的特点与 DOM 规范类似。但是，作为参数传递的不是在 DOM 中实现的 Event，而是被称为合成事件的东西。即使如此，您仍然可以使用 e.preventDefault() 或 e.stopPropagation() 等方法。

另外，在文本框中的onChange行为与JavaScript的onInput类似，每输入一个字符就会调用事件处理程序。

<form action="./submit"
      onSubmit={(e) => { console.log('submit'); e.preventDefault(); }}>
  <input type="text"
         onChange={() => { console.log('change'); }} />
  <button type="submit">送信</button>
</form>

Vue

可以使用.prevent()函数来模拟e.preventDefault()。

<form action="./submit"
      v-on:submit.prevent="log += 'submit!'">
  <input type="text"
         v-on:change="log += 'change!'"
         v-on:input="log += 'input!'" />
  <button type="submit">送信</button>
  <p>{{ log }}</p>
</form>