快速上手React：从概述到组件与事件处理

た入场券 2023-10-14 14:43 14阅读 0赞

# 前言 #

![在这里插入图片描述][0422b4369a3549b3a39da19588ab88f4.png]  
「作者主页」：[雪碧有白泡泡][Link 1]  
「个人网站」：[雪碧的个人网站][Link 2]  
「推荐专栏」：

> ★[java一站式服务][java] ★  
> ★ [React从入门到精通][React]★  
> ★[前端炫酷代码分享][Link 3] ★  
> ★ [从0到英雄，vue成神之路][0_vue]★  
> ★ [uniapp-从构建到提升][uniapp-]★  
> ★ [从0到英雄，vue成神之路][0_vue 1]★  
> ★ [解决算法，一个专栏就够了][React]★  
> ★ [架构咱们从0说][0]★  
> ★ [数据流通的精妙之道][Link 4]★  
> ★[后端进阶之路][Link 5]★

![请添加图片描述][c7f3e6b8a7624a9eabbea77dbcbca119.jpeg]

### 文章目录 ###

*  前言
 *  一、React概述
 *  在线立即尝试 React
 *   *  脚本方式
     *   *  完整示例
     *  脚手架方式
     *   *  完整代码
 *  二、组件
 *   *  函数方式组件
     *  类方式组件
 *  三.事件
 *   *   *  React处理点击事件
         *  箭头函数
 *  小结

# 一、React概述 #

![在这里插入图片描述][2ddc3b9a1b6343b9befe36fd44fe86e3.png]

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

![在这里插入图片描述][6efea111a1164ec5bf5a4790b1e35748.png]

# 在线立即尝试 React #

[点击跳转地址][Link 6]  
![在这里插入图片描述][57d8b33db4d14f46b3835a4d5efa1ffd.png]

> React框架的书写方式分为两种，**一种是脚本方式**（JavaScript标签引入，练习使用）；**一种是react脚手架方式**（常用）。

## 脚本方式 ##

*  步骤1 ：在页面中引入 react 库 和 react-dom 库；

对于**步骤1**，你可以在页面中使用以下代码来引入react库和react-dom库：

请确保将 `17.0.2` 替换为你想要使用的React版本。

*  **步骤2**：引入 Babel；React中使用的是JSX语法，但是浏览器不识别JSX，我们就需要引入**babel**

对于步骤2，你可以使用以下代码来引入Babel并使用JSX语法：

你还可以选择将Babel作为开发依赖项使用，并使用Babel进行项目构建。这样可以更好地支持ES6+语法和更多的Babel插件。

*  **步骤3** ：创建挂载点。

对于步骤3，你可以在HTML中创建一个带有特定id的div元素，作为React组件的挂载点。例如：

你可以将`root`替换为任何你想要的名称。

完成以上步骤后，你就可以开始编写React组件并将它们渲染到挂载点上了。

### 完整示例 ###

> 这是一个完整的示例代码，包括了引入React库、引入Babel、创建挂载点以及一个简单的React组件：

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>React App</title>
      <script crossorigin src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script>
      <script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.15.8/babel.min.js"></script>
    </head>
    <body>
      <div id="root"></div>
      <script type="text/babel">
        // 创建一个名为Greeting的React组件
        function Greeting(props) {
          
          return <p>Hello, {
          props.name}!</p>;
        }
    
        // 渲染Greeting组件到页面上的根元素
        ReactDOM.render(<Greeting name="John" />, document.getElementById('root'));
      </script>
    </body>
    </html>

在上述代码中，我们引入了React库和ReactDOM库的生产版本，并且使用Babel解析了内嵌的JSX代码。然后，我们在页面中创建了一个id为`root`的div作为React组件的挂载点。

接下来，我们定义了一个名为Greeting的React组件，它通过`props`接收一个名为`name`的属性，并返回一个包含问候语的`p`元素。

最后，我们使用`ReactDOM.render`方法将Greeting组件渲染到页面上的挂载点。在这个例子中，Greeting组件将显示"Hello, John!"。你可以根据需要修改组件的属性值。

## 脚手架方式 ##

**步骤1 - 创建虚拟DOM对象**

// 创建虚拟DOM对象
    const vNode = React.createElement(
      // 标签名
      "div",
      // 属性对象
      {
        
        id: "mydiv",
        className: "cls",
      },
      // 标签内的内容
      "hello react!"
    );

**步骤2 - 获取挂载点**

// 获取挂载点
    const root = document.getElementById("root");

**步骤3 - 渲染页面**

// 渲染页面
    ReactDOM.render(vNode, root);

### 完整代码 ###

完整代码如下所示：

<!DOCTYPE html>
    <html>
    
    <head>
      <title>React 封装演示</title>
      <script src="https://cdn.jsdelivr.net/npm/react/umd/react.development.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.development.js"></script>
    </head>
    
    <body>
      
      <div id="root"></div>
    
      <script type="text/javascript">
        // 步骤1 - 创建虚拟DOM对象
        const vNode = React.createElement(
          // 标签名
          "div",
          // 属性对象
          {
          
            id: "mydiv",
            className: "cls",
          },
          // 标签内的内容
          "hello react!"
        );
    
        // 步骤2 - 获取挂载点
        const root = document.getElementById("root");
    
        // 步骤3 - 渲染页面
        ReactDOM.render(vNode, root);
      </script>
    </body>
    
    </html>

> 以上代码以纯HTML形式呈现，直接在浏览器中打开即可看到渲染后的React组件。在代码中，首先引入了React和ReactDOM的开发版本。然后，在`<div id="root"></div>`标签中设置了挂载点。接下来，使用`React.createElement()`方法创建了虚拟DOM对象，并设置了标签名、属性对象和标签内的内容。最后，通过`document.getElementById("root")`获取到挂载点，并使用`ReactDOM.render()`方法将虚拟DOM对象渲染到挂载点上。这样，页面上就会渲染出一个带有"id"和"className"属性的div标签，内容为"hello  
> react!"。  
> 组件是 React 中非常重要的概念，它负责将页面划分为独立可复用的部分，并且可以根据不同的输入（props）来动态展示内容。

![在这里插入图片描述][777af3b2fd03417383506114346d7294.png]

# 二、组件 #

> 组件，从概念上类似于 JavaScript 函数。它接受任意的入参即（props”），并返回用于描述页面展示内容的 React元素。React 定义组件有两种方式

## 函数方式组件 ##

函数方式组件是 React16.8版本之后新增的语法，它是一种简单、轻量级的定义组件的方式。我们可以使用函数声明一个组件，接收一个参数props，并返回一个React元素来描述页面的展示内容。

下面是一个简单的函数方式组件的示例代码：

function Welcome(props) {
      return <h1>Hello, {props.name}!</h1>;
    }
    
    // 使用该组件
    const element = <Welcome name="John" />;
    ReactDOM.render(
      element,
      document.getElementById('root')
    );

> 上面的代码中，我们定义了一个名为Welcome的函数组件，它接收一个props参数，这个props参数可以包含任意的属性。在组件内部，我们可以使用props对象中的属性来动态展示页面内容。

## 类方式组件 ##

类方式组件是 React 中更为传统和强大的定义组件的方式。我们可以使用类来定义一个组件，这个类继承React.Component，并且实现一个render方法来返回React元素。

下面是一个简单的类方式组件的示例代码：

class Welcome extends React.Component {
      render() {
        return <h1>Hello, {this.props.name}!</h1>;
      }
    }
    
    // 使用该组件
    const element = <Welcome name="John" />;
    ReactDOM.render(
      element,
      document.getElementById('root')
    );

> 在上面的代码中，我们定义了一个名为Welcome的类组件，它继承了React.Component，然后实现了一个render方法来描述组件的展示内容。在render方法中，我们可以通过this.props来获取传入的属性，并使用它们来动态展示内容。

**无论是函数方式还是类方式，组件都是一个接受props参数并返回React元素的函数或类。它们可以根据props的不同来灵活地展示不同的内容，从而实现页面的组件化和重用。**

![在这里插入图片描述][ae451eb07ec94a73a3b8364b9cf10c7b.png]

# 三.事件 #

> React中的事件处理与DOM元素的事件处理非常相似，但有一些语法上的不同之处。React使用小驼峰式（camelCase）的命名方式来定义事件，并需要传入一个函数作为事件处理函数，而不是一个字符串。这样做可以确保事件处理函数在React组件中正确地绑定和执行。

### React处理点击事件 ###

下面是一个使用React处理点击事件的示例代码：

class Button extends React.Component {
      handleClick() {
        console.log('Button clicked');
      }
      
      render() {
        return <button onClick={this.handleClick}>Click me</button>;
      }
    }
    
    ReactDOM.render(<Button />, document.getElementById('root'));

> 在上面的代码中，我们创建了一个Button组件，并在组件的render方法中返回一个 `<button>` 元素。在 `<button>`  
> 元素上，我们通过onClick属性将一个函数 `this.handleClick` 作为点击事件的处理函数。
> 
> 当按钮被点击时，事件处理函数 `handleClick` 会被调用，并输出一个日志消息。
> 
> 需要注意的是，在React中，事件处理函数会自动绑定到组件实例上。所以在事件处理函数中可以使用 `this` 来引用组件实例。

另外还有一种使用箭头函数的方式，在事件处理函数中访问组件实例。

### 箭头函数 ###

下面是一个使用箭头函数的事件处理的示例代码：

class Button extends React.Component {
      handleClick = () => {
        console.log('Button clicked');
      }
      
      render() {
        return <button onClick={this.handleClick}>Click me</button>;
      }
    }
    
    ReactDOM.render(<Button />, document.getElementById('root'));

> 在上面的代码中，我们使用了类属性的方式去定义事件处理函数，这样做可以确保箭头函数内部的 `this` 与组件实例保持一致。

总结一下，React中的事件处理与DOM元素的事件处理语法上有一些区别，但整体思想非常相似。我们可以通过使用小驼峰式的命名方式和传入函数作为事件处理函数，来实现在React组件中处理各种用户交互的事件。

# 小结 #

> 在本篇文章中，我们**首先**介绍了React的概述，它是一个用于构建用户界面的JavaScript库。我们还介绍了使用脚本方式和脚手架方式来安装和运行React的方法。
> 
> **其次**，我们讨论了React组件的概念和两种定义组件的方式：函数方式和类方式。函数方式是React16.8版本之后新增的语法，它更为简单和轻量级。而类方式是React中传统和强大的定义组件的方式，它继承React.Component并实现render方法来描述组件的展示内容。
> 
> **最后**，我们学习了React中处理事件的方法。React的事件处理与DOM元素的事件处理相似，但有一些语法上的不同。React事件的命名采用小驼峰式，需要传入一个函数作为事件处理函数。  
> ![在这里插入图片描述][e4d5f0b7b6734db4b55c2629b5bdd86d.png]

[0422b4369a3549b3a39da19588ab88f4.png]: https://img-blog.csdnimg.cn/0422b4369a3549b3a39da19588ab88f4.png
[Link 1]: https://blog.csdn.net/Why_does_it_work?spm=1011.2415.3001.5343
[Link 2]: https://sprite.inscode.cc/
[java]: https://blog.csdn.net/why_does_it_work/category_12379581.html
[React]: https://blog.csdn.net/why_does_it_work/category_12381051.html
[Link 3]: https://blog.csdn.net/why_does_it_work/category_12378617.html
[0_vue]: http://t.csdn.cn/X1kpw
[uniapp-]: https://blog.csdn.net/why_does_it_work/category_12363697.html
[0_vue 1]: https://blog.csdn.net/why_does_it_work/category_12376654.html
[0]: https://blog.csdn.net/why_does_it_work/category_12381055.html
[Link 4]: https://blog.csdn.net/why_does_it_work/category_12381058.html
[Link 5]: https://blog.csdn.net/why_does_it_work/category_12397959.html?spm=1001.2014.3001.5482
[c7f3e6b8a7624a9eabbea77dbcbca119.jpeg]: https://img-blog.csdnimg.cn/c7f3e6b8a7624a9eabbea77dbcbca119.jpeg
[2ddc3b9a1b6343b9befe36fd44fe86e3.png]: https://img-blog.csdnimg.cn/2ddc3b9a1b6343b9befe36fd44fe86e3.png
[6efea111a1164ec5bf5a4790b1e35748.png]: https://img-blog.csdnimg.cn/6efea111a1164ec5bf5a4790b1e35748.png
[Link 6]: https://codesandbox.io/s/woeos7?file=/App.js&utm_medium=sandpack
[57d8b33db4d14f46b3835a4d5efa1ffd.png]: https://img-blog.csdnimg.cn/57d8b33db4d14f46b3835a4d5efa1ffd.png
[777af3b2fd03417383506114346d7294.png]: https://img-blog.csdnimg.cn/777af3b2fd03417383506114346d7294.png
[ae451eb07ec94a73a3b8364b9cf10c7b.png]: https://img-blog.csdnimg.cn/ae451eb07ec94a73a3b8364b9cf10c7b.png
[e4d5f0b7b6734db4b55c2629b5bdd86d.png]: https://img-blog.csdnimg.cn/e4d5f0b7b6734db4b55c2629b5bdd86d.png