React（一）：初识React、类组件、jsx的基础语法

起什么名字好呢！

于 2025-08-05 17:26:01 发布

阅读量890

点赞数 23

CC 4.0 BY-SA版权

分类专栏： React.js 文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/qq_51234063/article/details/149780661

React（一）

一、初识React

1. 简单介绍

1、React是什么？用于构建用户界面的 JavaScript 库
2、React的官网文档：https://react.docschina.org/
3、React的特点：
（1）声明式编程：声明式编程是目前整个大前端开发的模式：Vue、React、Flutter、SwiftUI；
在这里插入图片描述

（2）组件化开发
（3）多平台适配

2. React的三个依赖

1、react：包含react所必须的核心代码
2、react-dom：react渲染在不同平台所需要的核心代码
3、babel：将jsx转换成React代码的工具

3. 依赖的引入方式

1、直接引入CDN连接
2、下载后添加本地依赖
3、脚手架npm引入

前期的学习中先在html中使用CDN引入（引入React18）

<!-- 引入三个依赖的库 -->
<!-- 1.引入react核心代码库 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<!-- 2.引入渲染核心代码库 -->
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<!-- 3.引入将jsx转换成react代码的工具库 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

4. Hello React案例

同样作为MVVM结构的框架，React在渲染DOM的时候也有自己的方式
这里要注意，在React18版本前后，我们的写法是不一样的：

React18之前使用 ReactDOM.render(html结构或组件，容器)
React18之后使用 ReactDOM.createRoot(容器).render(html结构或组件)

<!-- 准备好一个容器 -->
<div id="root"></div>

<script type="text/babel">
    //渲染Hello World
    //React18之前使用ReactDOM.render
    // ReactDOM.render(<h2>Hello World</h2>, document.querySelector('#root'));
    //React18之后
    const root = ReactDOM.createRoot(document.querySelector('#root'));
    root.render(<h2>Hello World</h2>);
</script>

接下来是我们的点击按钮切换信息的Hello React案例完整版

<!-- 准备好一个容器 -->
<div id="root"></div>

<script type="text/babel">
    //渲染Hello World
    //1.定义一个变量来存储信息
    let message = 'Hello Word!';

    //React18之前使用ReactDOM.render
    //ReactDOM.render(<h2>Hello World</h2>, document.querySelector('#root'));
    //React18之后
    //2.定义容器
    const root = ReactDOM.createRoot(document.querySelector('#root'));
    //3.先调用一次渲染函数,渲染页面
    rootRender();
    
    //下面是预先定义好的函数
    //函数一：渲染函数
    function rootRender() {
   
   
        root.render(
            <div>
                <h2>{
   
   message}</h2>
                <button onClick={
   
   changeMsg}>点击修改信息</button>
            </div>
        );
    }

    //函数二：按钮的点击事件触发函数
    function changeMsg() {
   
   
        message = 'Hello React!';
        console.log(message); //函数调用了,但是没有重新渲染
        rootRender(); //修改完后重新渲染页面
    }
</script>

总结，这里和Vue对比有几个不一样的地方：
1、定义容器并渲染的过程，重新渲染要自己调用渲染函数，不像Vue会自动更新页面
2、读取变量使用单括号{ name }，不像Vue用双括号{ {}}
3、html的结构要作为参数传到render函数中，不像Vue直接编辑html结构
4、点击事件使用onClick={函数名}，而Vue是v-on:click=“函数名”

二、类组件（补）

在React中有两种定义组件的方式，一种是类组件，另一种是函数组件，这里我们使用ES6的类来声明组件，把刚才的Hello React案例用组件的方式呈现出来。

1. 定义类组件并渲染

1、定义类组件，继承React.Component，并继承父类的属性

<!-- 准备好一个容器 -->
<div id="root"></div>

<script type="text/babel">
  //1.定义类组件
  class App extends React.Component {
   
   
      constructor() {
   
   
      	 super();
      }
   }
</script>

2、添加一个state属性，用来存储数据，名字必须叫state

<!-- 准备好一个容器 -->
<div id="root"></div>

<script type="text/babel">
  //1.定义类组件
  class App extends React.Component {
   
   
      constructor() {
   
   
      	 super();
      	 this.state = {
   
   
      	 	message: 'hello world',
      	 }
      }
   }
</script>

3、定义一个render渲染函数，名字必须叫render，当我们拿到容器渲染组件时，就会自动调用这个函数，返回相应的html节点

<!-- 准备好一个容器 -->
<div id="root"></div>

<script type="text/babel">
  //1.定义类组件
  class App extends React.Component {
   
   
      constructor() {
   
   
      	 super();
      	 this.state = {
   
   
      	 	message: 'hello world',
      	 }
      }
		
		render()