【React】为何选择使用JSX呢？
由于逐渐发现在业务中有些部分没有完全理解，所以开始仔细阅读相关文档。
你好，世界。
以下是React的最短示例：将标题“你好，世界！”显示在页面上。
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);
<div id="root">
<!-- This element's contents will be replaced with your component. -->
</div>
引入JSX
const element = <h1>Hello, world!</h1>;
-
- JSXはJavaScriptの構文の拡張。
- JSXはReact要素を生成する。
使用JSX的原因。
React接受了這個事實，即用於表現的邏輯與UI邏輯本質上是相互結合的，這些邏輯包括對事件的響應、隨時間變化的狀態以及為界面準備數據。
React不是通过将标记和逻辑分别写入不同的文件来人为地分离技术，而是通过使用包含标记和逻辑的松散耦合的“组件”单元来实现关注点分离。
在JSX中嵌入表达式
-
- あらゆる有効なJavaScriptの式を、JSX内で中括弧に囲んで使用できる。
2+2、user.firstName、formatName(user)など全て有効なJavaScriptの式。
在下面的例子中，将formatName(user)函数的结果嵌入到
元素中。
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
JSX同样也是一种表达式。
-
- コンパイルの後、JSXの式は普通のJavaScriptの関数呼び出しに変換され。JavaScriptオブジェクトへと評価される。
-
- そのため以下のようなことが可能。
JSXをif文やforループの使用
JSXを変数に代入
JSXを引数として受け取る
JSXを関数から返す
使用JSX来指定子元素。
- タグが空の場合、XMLのように /> タグを閉じることができる
const element = <img src={user.avatarUrl} />;
- JSXのタグは子要素を持つことができる
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
JSX用于防止注入攻击。
JSX具有默认机制来防止特定类型的注入攻击，特别是跨站脚本（XSS）攻击。
注入攻击是一种通过将恶意代码或数据注入到应用程序的输入中，从而导致非法行为的攻击方法。特别是跨站脚本攻击（XSS），是一种在Web应用程序中非常常见的攻击技术，攻击者可以通过嵌入恶意脚本到网页中，窃取其他用户的数据或者引导用户进行非法操作。
- デフォルトでは、React DOMはJSXに埋め込まれた値をレンダー前にエスケープするため、悪意のあるスクリプトが実行されるリスクを低減する。
JSX是对象的表达形式。
Babel 将 JSX 编译为 React.createElement() 的调用。
以下这两个例子是等价的
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
React.createElement（）本质上创建了以下类型的对象。 这些对象被称为React元素，可以将其视为描述要在屏幕上显示的内容的说明书。
React会解析这些对象并构建并维护更新的DOM。
继续
