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中将会抛出错误:

 

 


 



posted @ 2020-01-10 18:47  无忧lv  阅读(141)  评论(0编辑  收藏  举报