react迷惑的点（一）

2020-01-10 18:51:01 阅读：289 来源： 互联网

标签：React ... 代码 react className 迷惑 createElement JSX

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

标签：React,...,代码,react,className,迷惑,createElement,JSX
来源： https://www.cnblogs.com/lvlvlv/p/12177656.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react迷惑的点（一）