react学习记录-JSX原理

最新推荐文章于 2024-01-02 12:54:18 发布

秃头指非官

最新推荐文章于 2024-01-02 12:54:18 发布

阅读量402

点赞数

文章标签： react

本文链接：https://blog.csdn.net/qq_40340478/article/details/106964163

版权

本文介绍了JSX在React中的作用，它使得JavaScript能方便地描述HTML结构。JSX在编译后转化为JavaScript对象，通过React.createElement创建DOM元素。JSX的存在允许在不直接操作DOM的情况下更新UI，提高了性能。React的diff算法用于找出最小变更，避免频繁的页面重排。文章还包含关于JSX的小结和一道React渲染标题的课后习题及解答。

摘要由CSDN通过智能技术生成

JSX 原理

JSX的设计是为了能够方便用JavaScript来描述HTML标签，React.js 把 JavaScript 的语法扩展了一下，让 JavaScript 语言能够支持，这种直接在 JavaScript 代码里面编写类似 HTML 标签结构的语法，这样写起来就方便很多了。

编译的过程会把类似 HTML 的 JSX 结构转换成 JavaScript 的对象结构。

比如说下面一份React代码：

import React, {
    Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class Header extends Component {
   
  render () {
   
    return (
      <div>
        <h1 className='title'</