支持 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 的一个真实示例就是用一个次级渲染方法来渲染加载更多按钮。
网友评论