React初学者指南：JSX与组件基础-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_49841234/article/details/123482199

本文是React学习的初步总结，主要探讨JSX语法，包括JSX的便利性、基本语句和属性。同时，介绍了React元素渲染与组件的概念，详细讲解了元素渲染的过程以及类组件和函数组件的创建。对于React新手来说，这是一个很好的入门资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

概述

经过这段时间的 React 学习，自己对这阶段的学习做了一个总结。

JSX语法

在React中使用JSX代替 js；JSX编写模板会更加方便快捷；在刚开始学习 React相关知识时，老是忘记在 script 中添加标签 type=""text/babel,导致代码运行报错；

简单的JSX语句

<script type="text/babel">
	const element = <h1>你好，{name}</h1>
</script>

JSX 语法中，大括号内可以放置任何有效的 JS 表达式

 function formatName(user) {
      return user.firstName + ' ' + user.lastName
    }
    function getUser(user) {
      if (user) {
        return <h1>你好，{formatName(user)}</h1>
      }
      return <h1>Hello Stranger</h1>
    }
const element = (
   <h1>
   	  你好，{formatName(user)}
   </h1>
)

JSX也是一个表达式也就是说，你可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX；
JSX特定属性
- 可以通过使用引号，来将属性值指定为字符串字面量
```
const element = <div tabIndex="0"></div>
```
- 可以在大括号中使用有效的 js表达式，也能在里面调用函数
```
 const element = (
   <h1>
 	 你好，{formatName(user)}
   </h1>
 )
```

其他具体特性可参考React官网 https://react.docschina.org/docs/introducing-jsx.html

元素渲染与组件

元素渲染

在 html 代码中定义一个方式需要渲染元素的容器 --> 默认为一个id为root的div ，与 vue类似；然后利用 == ReactDOM.render== 方法；第一个参数为要渲染的内容，第二个参数为，要渲染的容器；

其渲染机制，就是利用 render构建dom树,如果state或者props发生变化
则其会使用diff算法来进行对比新老dom树，将其有变化的部分重新渲染，而不是在重新将整个页面渲染，提高了效率；

ReactDOM.render(
      <Comment
        date={comment.date}
        text={comment.text}
        author={comment.author}
      />,
      document.getElementById("root")
    )

组件

类组件

首先需要引入

import React, { Component } from 'react'

类组件模板

// rcc
import React, { Component } from 'react'

export default class test extends Component {
  render() {
    return (
      <div>test</div>
    )
  }
}

函数组件

函数组件模板

// rfc
import React from 'react'
export default function test() {
  return (
    <div>test</div>
  )
}

大家可以用这两个代码模板作为自定义的代码块，从而提高自己开发效率，在这篇文章里就先简单的介绍这两种类型组件的写法，至于两者间的区别将会在后面的文章中提到；