react迷惑的点

Posted 2021-03-17 lvlvlv

在写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中将会抛出错误：