美文网首页
整理代码

整理代码

作者: 回忆的花 | 来源:发表于2019-04-29 02:51 被阅读0次

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

    相关文章

      网友评论

          本文标题:整理代码

          本文链接:https://www.haomeiwen.com/subject/uwfenqtx.html