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