03 JSX

JSX语法

可以在 JavaScript 代码中可以直接写 HTML，本质是动态创建组件的语法糖。

const name = 'Lisi'
const element = <h1>Hello, {name}</h1>

const name = 'Lisi'
const element = React.createElement(
  'h1',
  null,
  'Hello, ',
  name
)

JSX的使用

JSX本身使用表达式

const element = <p>age: {10 + 8}</p>

在属性中使用表达式

<MyComponent age={10 + 8} />

延展属性

const props = {firstName: 'Joe', lastName: 'Lee'}
const person = <Person {...props} />

子元素是表达式

const element = <li>{props.message}</li>

JSX的优点

1. 直观：声明式创建界面
2. 灵活：代码动态创建界面

3. 成本低：无需学习新的模板语言

   JSX的约定

   自定义组件以大写字母开头

4. React默认小写的tag是原生DOM节点，大写字母开头的为自定义组件

5. JSX可以直接使用属性语法，如，此时不强制大写字母开头