React

特点

声明式

只需要描述 UI（HTML）看起来是什么样子，就像写 HTML 一样简单，React 内部负责渲染 UI，并在数据变化时自动更新 UI。

const jsx = (
    <div className='app'>
        <h1>Hello World！</h1>
        <p>动态数据：{count}</p>
    </div>
)

组件化

把复杂的页面拆分成一个一个的单元，这些组成页面的基本单元就是组件，通过组合、复用组件来编写复杂界面的方式就是组件化

一次学习，随处可用

相比较于Vue，React强调尽可能的利用JS语言自身的能力来编写UI，而不是通过造轮子增强HTML的功能

JSX 基本介绍

JSX 是什么？

JSX 是 JavaScript XML 的简写，表示可以在 JavaScript 代码中写 XML（HTML） 格式的代码。

优势：声明式语法更加直观，与 HTML 结构相同，降低了学习成本，提高了开发效率，JSX 是 React 的核心之一。

JSX 的基本使用

1. 使用 JSX 创建 React 元素

const title = <h1>Hello JSX</h1>

2. 使用 ReactDOM.render() 方法渲染 React 元素到页面中

ReactDOM.render(title, document.querySelector('#root'))

JSX 是如何工作的JSX

并不是标准的 ECMAScript 语法

1. JSX 需要使用 Babel 编译成 React.createElement() 的形式，然后配合 React 才能在浏览器中使用，而 create-react-app 脚手架中已经内置了 Babel 及相关配置。
2. 编译 JSX 语法的包为：@babel/preset-react，在线体验。

JSX 注意点

1. 必须有 1 个根节点，或者虚拟根节点 <></>、<React.Fragment></React.Fragment>。
2. 属性名一般是驼峰的写法且不能是 JS 中的关键字，例如 class 改成 className，label 的 for 属性改为 htmlFor，colspan 改为 colSpan。
3. 元素若没有子节点，可以使用单标签，但一定要闭合，例如 <span/>。
4. React@16.14 之前需要先引入 React 才能使用 JSX（这个也好理解，因为 JSX 最后还是要被转成 React.createElement() 的形式）。
5. 换行建议使用 () 进行包裹，防止换行的时候自动插入分号的 Bug。