学习目标

  • jsx表达式
  • ReactDOM.render

React Jsx 优点


  • jsx执行更快，编译为JavaScript代码时进行优化
  • 类型更安全，编译过程中如果出错就不能编译，及时发现错误（解释型编译）。
  • JSX编写模版简单快捷。

React Jsx 缺点


  • JSX必须有根节点(root)
  • 正常的普通HTML元素要小写。如果是大写，则默认为组件。

ReactDOM.render 是 React 的最基本方法用于将模板转为 HTML 语言，并插入指定的 DOM 节点。 ReactDOM.render(template,targetDOM) 方法接收两个参数：

  • 第一个是创建的模板，多个 dom 元素外层需使用一个标签进行包裹，如 <div>；
  • 第二个参数是插入该模板的目标位置。

ReactDOM.render 实例一

import React from 'react';
import ReactDOM from 'react-dom';

let element = (
  <div>
    <h1>Hello World.</h1>
    <h2>{1+1}</h2>
  </div>
)

ReactDOM.render(
  element,
  document.getElementById('root')
)

element为HTML模板，root是HTML文档的根元素。页面最终结果如图所示：

React JSX表达式学习_html

React JSX表达式学习_html_02

ReactDOM.render 实例二 (字符串拼接：{str+time})

mport React from 'react';
import ReactDOM from 'react-dom';
let time = new Date().toLocaleTimeString();
let str = '当前时间是：'
let element = (
  <div>
    <h1>Hello World.</h1>
    <h2>{str+time}</h2>
  </div>
)
ReactDOM.render(
  element,
  document.getElementById('root')
)

React JSX表达式学习_react_03

ReactDOM.render 实例三 (字符三元运算符)

import React from 'react';
import ReactDOM from 'react-dom';
let man = '发热';
let element2 = (
  <div>
    <h1>今天是否隔离</h1>
    <h2>{man = "发热"?"隔离":"不隔离"}</h2>
  </div>
)
ReactDOM.render(
  element2,
  document.getElementById('root')
)

React JSX表达式学习_html_04

ReactDOM.render 实例四 (jsx对象（按钮）)

import React from 'react';
import ReactDOM from 'react-dom';
let man = '发热';
let element2 = (
  <div>
    <h1>今天是否隔离</h1>
    <h2>{man = "发热"?<button>隔离</button>:"不隔离"}</h2>
  </div>
)
ReactDOM.render(
  element2,
  document.getElementById('root')
)

React JSX表达式学习_模版_05

JSX表达式小结

  • 由html元素构成
  • 中间如果需要变量用{}
  • {}中间可以使用表达式
  • {}中间表达式可以使用JSX对象
  • 属性和html内容一样都是用{}来插入内容