zoukankan      html  css  js  c++  java
  • react迷惑的点(一)

    在写React的时候,你可能会写类似这样的代码
    import React from 'react'
    
    function A() {
      // ...other code
      return <h1>前端桃园</h1>
    }
    
    

    你肯定疑惑过,上面的代码都没有用到React,为什么要约会React呢?

    
    

    如果你把  import React from ‘react’ 减少掉,将会报以下这样的错误:

    
    

    那么究竟是哪里用到了这个React,导致我们约会React会报错呢,不懂这个原因,那么就是JSX没有搞得太明白。

    
    

    你可以讲上面的代码(忽略导入语句)放到在线babel里进行转化一下,发现babel会把上面的代码转化成:

    
    
    function A() {
      // ...other code
      return React.createElement("h1", null, "前端桃园");
    }
    因为从本质上讲,JSX只是为  React.createElement(component, props, ...children) 函数提供的语法糖。
    为什么要用className而不用class
    1.React一开始的理念是想与浏览器的DOM API保持一直而不是HTML,因为JSX是JS的扩展,而不是代替HTML的,这样会和元素的创建更为接近。在元素上设置  class 需要使用  className 这个API:
      
    const element = document.createElement("div")
    element.className = "hello" 

    2.浏览器问题,ES5之前,在对象中不能使用保留字。以下代码在IE8中将会抛出错误:

     




  • 相关阅读:
    Core Expression
    Linux基础
    express
    C#程序模拟登录批量获取各种邮件内容信息
    Windows Phone 执行模型概述
    Wp8—LongListSelector控件使用
    网页背景图片自然缩放
    Unix sed实用教程系列目录[已完成]
    Unix sed实用教程开篇
    《SpringMVC从入门到放肆》十五、SpringMVC之上传文件
  • 原文地址:https://www.cnblogs.com/lvlvlv/p/12177656.html
Copyright © 2011-2022 走看看