支持 JSX的环境搭建好后，我们就可以深入学习基础的示例：生成 div 元素。
以下代码展示了如何用
React的 createElement 函数创建 div 元素：
React.createElement('div')
以下是 JSX写法：
<div />
它看起来很像普通的 HTML。
最大的区别在于我们将标记写在了.js文件中，值得注意的是，JSX仅仅是语法糖，在浏览器
中运行前需要转译成 JavaScript。 实际上，运行 Babel时会将<div />转换成 React.createElement('div')，编写模板时 要始终牢记这一点。
2.DOM元素与 React组件
有了 JSX后，我们既可以创建 HTML元素，也可以创建 React元素；唯一的区别在于它们是 否以大写字母开头。
例如，渲染 HTML按钮元素时使用<button />，而渲染 Button 组件时使用<Button />。
根元素 ---有多个同级元素，需要强制将它们封装在一个父元 素中
3.布尔值属性
在 JSX中定义布尔值属性前，还需要了解一些基础知识。如果设置某个属性却 没有赋值，那么 JSX会默认其值是 true，这意味着如果要将属性值设置为 false，则需要显式地声明
这一开始会让人感到疑惑，因为我们认为遗漏属性值应该为 false，而实际并非如此。在使 用 React时，我们应当始终显式地声明，以避免发生混淆。
4. 展开属性 ---来源于 ECMAScript
可以使用 JSX 展开属性 来合并现有的 props 和其它值：
扩展运算符（...）的用途
1.展开属性
展开语法(Spread syntax), 可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。(译者注: 字面量一般指 [1, 2, 3] 或者 {name: “mdn”} 这种简洁的构造方式)可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开
Redux 的一个真实示例就是用一个次级渲染方法来渲染加载更多按钮。
网友评论