开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情
前言
在了解ES6新特性和TypeScript的基本语法特点后，我们就来学习React拉。
关于React安装，创建新应用等操作，直接跟着官网走就好拉。
JSX
在TypeScript中就已经有了JSX的概念。
这是一种嵌入式类似于XML的语法，它能够被转换为合法的JavaScript，他正是因为React而流行起来。
const element = <h1>Hello, world!</h1>;
上面是官方的JSX的例子，可以看到它将平常的DOM标签赋值给一个变量，这种写法就成为JSX，React官方也推荐使用这种写法来进行UI页面的编写，这样能够帮助我们更好关注开发。
PS:官方对于JSX的属性名推荐使用camelCase小驼峰命名方式，因为语法比较接近JS。
基本用法
// 变量使用
const name = 'Tom';
const element = <h1>Hello, {name}</h1>;
let root = ReactDOM.createRoot(
document.getElementById( 'root' )
);
root.render( element )
// 方法使用
function hello(username) {
return "hello Tom"
}
const element = (
<h1>
hello("Tom")
</h1>
);
let root = ReactDOM.createRoot(
document.getElementById( 'root' )
);
root.render( element )
小细节
-
在JSX中我们可以通过引号
""对属性值来指定字符串字面量，或者通过大括号{}来插入JS表达式，但我们不要同时使用这两种方式，同一个属性是不能够同时使用这两个的。 -
在JSX中也是不能够使用if-else这种条件语句的，如果有这种需求，我们可以使用三元运算符表达式来进行替代，例如下面的代码
let i =1 let root = ReactDOM.createRoot( document.getElementById("root") ); root.render( <div> <h1>{i === 1 ? 'True!' : 'False'}</h1> </div>) -
JSX默认就是防止XSS攻击的，他会对用户输入的内容进行转义操作，保证安全性。
元素
在React中元素是最小的UI单位，它的开销极小，组件就是由一个个元素组成的。
const element = <h1>Hello, world</h1>; // 这就是一个元素
需要注意React的元素是不可变对象，即创建之后不能修改它的子元素或者任意一个属性，官方将元素描述为电影中的一帧，代表某个时间的UI。
在React进行dom更新的时候，就是会通过比较元素和之前的值来判断是否需要更新该元素的状态。
function tick() {
const element = (
<div>
{new Date().toLocaleTimeString()}
</div>
);
root.render(element);
}
let root = ReactDOM.createRoot(document.getElementById("root"));
setInterval(tick, 1000);
例如上面这个代码，每秒都会执行root.render进行元素的更新操作。
