React(1)基础入门-EW帮帮网

React(1)基础入门

Author: Once Day Date: 2025年4月10日

一位热衷于Linux学习和开发的菜鸟，试图谱写一场冒险之旅，也许终点只是一场白日梦…

漫漫长路，有人对你微笑过嘛…

全系列文章可参考专栏: FullStack开发_Once-Day的博客-CSDN博客

参考文章:

快速入门 – React 中文文档

React 官方中文文档

React 前端框架全面教程：从入门到进阶_react框架-CSDN博客

React 教程 | 菜鸟教程

最顺滑的react基础入门教程 - 知乎

React 入门实例教程 - 阮一峰的网络日志

文章目录

React(1)基础入门

1. 概述

1. 1 React概述

React是一个用于构建用户界面的流行JavaScript库。它由Facebook开发，于2013年5月开源。React 的主要特点包括:

声明式编程模型：React允许用声明式的方式描述用户界面，当状态变化时，React会高效地更新UI。
基于组件：React鼓励创建可复用的UI组件，让代码易于复用和维护。一个React应用通常由多个组件嵌套组成。
虚拟DOM：React使用Virtual DOM来提升性能。当数据变化时，React会在内存中重新渲染一个Virtual DOM树，通过Diff算法计算出需要更新的最小变更，再批量应用到实际DOM上。这大大提升了UI更新效率。
JSX语法：React使用了一种称为JSX的JavaScript语法扩展，可以在JavaScript代码中直接写类似HTML的标记。JSX让组件的结构和行为能够在一个文件中定义。
单向数据流：React中的数据流是单向的，从父组件流向子组件。这让应用状态更易于维护和理解。子组件可以通过回调函数的方式与父组件通信。
生命周期方法：React组件有着完善的生命周期，可以利用不同的生命周期方法在组件的不同阶段执行特定的逻辑。

总的来说，React通过组件化、声明式编程和Virtual DOM等概念，让开发者能够更高效、更可维护地构建用户界面。它的生态也非常丰富，社区活跃，资源和工具链完善。

学习React需要对HTML、CSS和现代JavaScript(ES6+)有一定的了解。

1.2 React、Vue和HTTP+CSS+JS原生开发

React和Vue都是现代化的JavaScript框架，它们的出现旨在解决原生JavaScript开发大型应用时的痛点，如代码的可维护性、可复用性和性能优化等问题。

React的核心概念是组件化和虚拟DOM。它鼓励开发者将UI拆分成独立的、可复用的组件，并使用JSX语法来编写声明式的UI代码。React使用虚拟DOM来优化性能，通过在内存中比较新旧虚拟DOM树的差异，最小化地更新实际DOM，从而提升渲染效率。React的生态系统也非常丰富，适用于各种场景下的Web开发。

Vue在很多方面与React相似，同样支持组件化和虚拟DOM。但Vue更加注重易用性和灵活性，它提供了更加友好的模板语法和API。Vue的响应式系统让数据绑定和状态管理变得简单直观。Vue也提供了丰富的工具库，如路由、状态管理等，让开发者能够快速构建完整的应用。

相比之下，原生JavaScript开发虽然灵活，但在大型项目中容易导致代码难以维护，且性能优化也需要手动处理。不过，对于一些简单的项目或者需要高度定制的场景，原生开发仍然是一个不错的选择。

1.3 JavaScript/typeScript与ES5/ES6

JavaScript和TypeScript是两种编程语言，而ES5和ES6是JavaScript的两个重要版本。

JavaScript是一种动态类型的语言，变量的类型是在运行时确定的。而TypeScript是JavaScript的超集，它增加了可选的静态类型和类型注解，在编译时进行类型检查。TypeScript最终会被编译为JavaScript，因此它可以在任何JavaScript运行的环境中执行。

特性	JavaScript	TypeScript
类型	动态类型	静态类型
语法	JavaScript语法	JavaScript + 类型注解
编译	无需编译，直接运行	需要编译为JavaScript
生态	丰富，大量第三方库	与JavaScript共享生态
适用场景	所有JavaScript适用的场景	大型项目,需要类型检查和提示的场景

ES5和ES6是JavaScript语言的两个重要版本。ES6(也称为ES2015)引入了许多新的语法特性，如let和const关键字、箭头函数、类、模块、Promise等，这些特性大大提高了JavaScript的表达能力和可读性。ES6的许多特性已经成为现代JavaScript开发的标配。

特性	ES5	ES6
发布时间	2009	2015
变量声明	var	let, const
函数	函数声明和函数表达式	箭头函数
类和模块	通过函数和原型模拟	class, import, export
异步编程	回调函数	Promise, Generator, async/await
数组方法	indexOf, forEach等	find, findIndex, Array.from等

TypeScript支持所有JavaScript的特性，并且可以与ES5、ES6和更高版本的JavaScript一起使用。

1.4 HelloWorld示例

下面是一个使用React的基本示例，它展示了如何在HTML页面中引入React，并使用JSX语法创建一个简单的React组件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入react依赖库,注意顺序,当前版本: v18.2.0 -->
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.2.0/umd/react.production.min.js"></script>
    <script
        src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
    <!-- 引入babel库,用于解析jsx语法
    # https://www.babeljs.cn/setup#installation
  -->
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <!-- 这里不是原生的javascript语法,而是特殊的jsx(javascript+xml)语法,需要用babel解析. -->
    <script type="text/babel">
        // 使用函数组件
        const HelloWorld = () => {
            const msg = 'hello,world!';
            return (
                <div>
                    {msg}
                </div>
            );
        };
        // 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
        ReactDOM.render(<HelloWorld />, document.getElementById('root'));
    </script>
</body>

</html>

在HTML文件中，通过script标签引入了React的核心库(react.production.min.js)和ReactDOM库(react-dom.production.min.js)。

为了支持JSX语法，引入了Babel库(babel.min.js)。Babel会将JSX语法转换为标准的JavaScript代码。

在script标签中，使用了type="text/babel"属性，表示这段脚本需要经过Babel的转换。

定义了一个HelloWorld组件，它继承自React.Component，并实现了render方法。render方法返回了一个JSX元素。React 组件必须以大写字母开头，而 HTML 标签则必须是小写字母。

通过ReactDOM.render方法，将HelloWorld组件渲染到id为root的DOM元素中。

2. 语法介绍

2.1 JSX语法

JSX 是一种在 React 中使用的标签语法，它将 JavaScript 和 HTML-like 标签融合，让开发者能更直观地构建 UI。

（1）基本使用：标签语法类似 HTML，但比 HTML 更严格。所有标签都必须闭合，例如<br />；组件返回的标签必须包裹在一个共享父级中，可使用<div>...</div>或空的<></>（React.Fragment 的缩写）。

（2）嵌入 JavaScript：使用大括号{}在 JSX 中嵌入 JavaScript 表达式，可用于展示数据、设置属性值等。例如<h1>{user.name}</h1>展示变量user.name；<img src={user.imageUrl} />读取变量user.imageUrl作为src属性值，还能进行字符串拼接等复杂表达式操作。

JSX中必须把注释部分变成表达式作用域再注释，如下所示：

class HelloWorld extends React.Component {
      render(){
        return (
          <div className={'danger large'}>
            { /* className和class属性是一样的,而且必须是驼峰 */ }
            { arr }
          </div>
        )
      }
    }

（3）样式设置：通过className属性指定 CSS 类，与 HTML 的class属性作用相同，如<img className="avatar" />。也可使用style属性设置内联样式，样式值是一个 JavaScript 对象，如<img style={{width: user.imageSize, height: user.imageSize}} /> 。

style形式为**{{…}}**，因为首先需要定义一个js表达式作用域，然后style属性接收一个对象类型。样式名需要转换为驼峰形式.

在JSX中，属性不应该采用关键词，比如class，if，for等，样式应该书写在 className中。

（4）条件渲染：利用 JavaScript 的if语句、条件?运算符或逻辑&&语法实现条件渲染。如if语句：

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

条件?运算符在 JSX 内部使用：<div>{isLoggedIn ? <AdminPanel /> : <LoginForm />}</div>；逻辑&&语法用于不需要else分支的情况：<div>{isLoggedIn && <AdminPanel />}</div> 。

（5）渲染列表：依赖 JavaScript 的map()函数将数组转换为组件列表。例如：

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];
const listItems = products.map(product => 
  <li key={product.id}>
    {product.title}
  </li>
);
return (
  <ul>{listItems}</ul>
);

列表项需设置key属性，用于唯一标识元素，帮助 React 高效更新列表。

（6）属性和事件：可以给元素添加属性，如className、style、src等。事件可以通过在元素上添加on前缀的属性来绑定，如onClick、onMouseEnter等。属性值可以是字符串、数字或JavaScript表达式。

例如：<button onClick={handleClick}>Click me</button>、<div style={{ color: 'red', fontSize: '16px' }}></div>等。

2.2 元素渲染

在React中，元素是构建用户界面的最小单位。元素描述了在屏幕上想看到的内容。与浏览器的DOM元素不同，React元素是创建开销极小的普通对象。React DOM会负责更新真实的DOM来与React元素保持一致。

通过ReactDOM.render()方法，可以将React元素渲染到页面上的指定容器节点中，从而更新用户界面。

ReactDOM.render(element, container[, callback])

element: 要渲染的React元素。可以是一个React组件或一个普通的JSX表达式。
container: 要将元素渲染到的目标DOM节点。
callback: (可选)渲染完成后的回调函数。

当首次调用ReactDOM.render()时，容器节点里的所有DOM元素都会被替换为React元素所描述的内容。在后续的渲染中，React会使用DOM差分算法(DOM diffing algorithm)来高效地更新页面，只修改必要的部分。

需要注意的是，ReactDOM.render()只会修改容器节点的子节点，而不会修改容器节点本身。这意味着我们可以将React组件插入到已有的DOM结构中，而不会影响其他部分。

另外，React元素是不可变的(immutable)。一旦被创建，就无法更改它的属性或子元素。如果需要更新UI，唯一的方式是创建一个新的元素，并将其传入ReactDOM.render()。

React会将新的元素与之前的元素进行比较，并且只会进行必要的更新，以使DOM达到预期的状态。这种高效的更新机制是React性能优越的关键原因之一。

下面是一个示例，演示了如何通过定时器不断地重新渲染React元素，实现一个简单的倒计时效果:

class HelloWorld extends React.Component {
  render() {
    return (
      <div className={'danger large'}>
        <h2>倒计时</h2>
        {/* className和class属性是一样的,但在JSX中必须使用驼峰式命名 */}
        <span>{new Date().toString()}</span>
      </div>
    );
  }
}

setInterval(() => {
  // 通过调用ReactDOM.render()方法,将HelloWorld组件渲染到id为'root'的容器节点中
  ReactDOM.render(<HelloWorld />, document.getElementById('root'));
}, 1000);

在这个例子中，定义了一个HelloWorld组件，它会显示当前的时间。通过setInterval定时器，每隔1秒钟就会重新调用ReactDOM.render()方法，传入新的HelloWorld元素，从而更新页面上的时间显示。

React会智能地比较新旧元素的差异，并且只修改必要的部分，而不是每次都完全重新渲染整个组件，这样可以保证高效的性能。

2.3 生命周期

参考网站：React lifecycle methods diagram

React的生命周期是指组件从创建到销毁的整个过程，它包含了一系列的方法，这些方法会在特定的时机被自动调用。了解和掌握React的生命周期是开发React组件的重要基础。

组件的生命周期可分成三个状态：

Mounting(挂载)：已插入真实 DOM
Updating(更新)：正在被重新渲染
Unmounting(卸载)：已移出真实 DOM

在这里插入图片描述

当组件的props或state发生变化时，组件就会更新。组件更新的生命周期调用顺序如下:

getDerivedStateFromProps(nextProps, prevState)，在调用render方法之前调用，无论是在初始挂载还是后续更新时都会被调用。它应返回一个对象来更新state，如果返回null则不更新任何内容。通过比较nextProps和prevState，可以判断组件是否需要更新。
shouldComponentUpdate(nextProps, nextState)，当props或state发生变化时，它会在渲染执行之前被调用。它接收nextProps和nextState作为参数，可以比较当前props和state与下一个props和state,以决定组件是否需要更新。

默认行为是返回true，即始终执行更新。如果返回false，则不会触发后续的render、getSnapshotBeforeUpdate和componentDidUpdate。

通过合理地编写shouldComponentUpdate()，可以避免不必要的渲染，提高组件的性能。
render()，render()方法是class组件中唯一必须实现的方法。它会在每次组件更新时被调用，用于返回要渲染的React元素。render()方法应该是一个纯函数，不应该在其中执行副作用操作，如修改组件状态或与浏览器交互。
getSnapshotBeforeUpdate(prevProps, prevState)，在最近一次渲染输出(提交到DOM节点)之前调用。它使得组件能在发生更改之前从DOM中捕获一些信息(例如，滚动位置)。此生命周期方法的任何返回值将作为参数传递给componentDidUpdate()。
componentDidUpdate(prevProps, prevState, snapshot)，在更新后会被立即调用，首次渲染不会执行此方法。可以在此方法中执行DOM操作或进行其他副作用操作。如果组件实现了getSnapshotBeforeUpdate()生命周期，则它的返回值将作为第三个参数传递给componentDidUpdate()。

除了上述的更新阶段生命周期方法，React还提供了其他生命周期方法，如:

componentDidMount(): 在组件挂载后(插入DOM树中)立即调用，常用于执行一些初始化操作，如发送网络请求、订阅事件等。
componentWillUnmount(): 在组件卸载及销毁之前直接调用，常用于执行一些清理操作，如取消定时器、解绑事件等。

2.4 组件

在React中，组件是构建用户界面的基本单元。组件可以将UI划分为独立、可复用的部分，并且可以相互组合形成复杂的页面。

React提供了两种定义组件的方式：类组件(Class Component)和函数组件(Function Component)。

类组件(Class Component)：类组件是使用ES6的class语法定义的组件。它是一个继承自React.Component的JavaScript类，并且必须实现render()方法。

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

类组件具有以下特点:

可以维护自身的内部状态(state)，通过this.state访问，并且可以通过this.setState()方法更新状态。
可以使用生命周期方法，如componentDidMount()、componentDidUpdate()等，来执行特定的操作。
可以接收来自父组件传递的props，通过this.props访问。
需要使用this关键字来引用组件实例。

函数组件(Function Component)：函数组件是使用JavaScript函数定义的组件。它接收props作为参数，并返回要渲染的React元素。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

函数组件具有以下特点:

是一个纯函数，根据传入的props返回要渲染的内容。
没有自身的状态(state)，只能接收来自父组件传递的props。
没有生命周期方法，但可以使用React Hooks(如useState、useEffect等)来实现类似的功能。
代码更加简洁，易于理解和测试。

在React 16.8版本引入了React Hooks，使得函数组件也能够拥有状态(state)和生命周期的功能，大大提高了函数组件的能力和灵活性。

import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

使用React Hooks，函数组件可以拥有状态(通过useState)、执行副作用操作(通过useEffect)等，使得函数组件的能力与类组件相当。

目前类组件(Class Component)已经不被推荐使用了，函数组件(Function Component)提供的功能和解耦能力更加强大。

2.5 事件处理

在React中，事件处理是指当用户与组件交互时(如点击按钮、提交表单等)，如何响应和处理这些事件。React采用了与HTML类似的事件处理方式，但有一些语法上的区别。

React事件的命名采用驼峰式写法(camelCase)，而不是HTML中的小写。例如，HTML中的onclick对应React中的onClick，onchange对应onChange等。
在React中，事件处理函数需要直接绑定到元素上，而不是像HTML中那样使用字符串。事件处理函数可以是一个函数引用，也可以是一个箭头函数。

<button onClick={handleClick}>Click me</button>
// 或者
<button onClick={() => handleClick()}>Click me</button>

在React中，事件处理函数会自动接收一个合成事件对象(SyntheticEvent)作为参数，而不是原生的DOM事件对象。合成事件对象提供了与原生事件对象相同的接口，如preventDefault()、stopPropagation()等方法。合成事件对象是React合并之后的事件对象，具有更好的跨浏览器兼容性和性能。

function handleClick(event) {
  event.preventDefault(); // 阻止默认行为
  console.log(event.target.value); // 获取目标元素的值
}

在类组件中，事件处理函数内部的this默认指向undefined，需要手动绑定this指向组件实例。可以在构造函数中使用bind()方法绑定this，或者使用箭头函数定义事件处理函数。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this); // 正确绑定到组件实例
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}
// 或者
class MyComponent extends React.Component {
  handleClick = () => {
    console.log(this); // 正确绑定到组件实例
  };

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

如果需要向事件处理函数传递额外的参数，可以使用箭头函数包装事件处理函数，并传入所需的参数。

<button onClick={() => handleClick(id)}>Delete</button>
// 或
<button onClick={this.handleClick.bind(this, id)}>Delete</button>

React的事件处理机制提供了一种声明式的方式来处理用户交互，使得组件的逻辑与视图更加分离。通过合理地使用事件处理函数，可以实现各种交互效果，如表单提交、数据筛选、页面导航等。

2.6 Props属性

Props(Properties的简称)是React组件的一个重要概念。Props是一种将数据从父组件传递给子组件的机制，使得组件的可复用性和灵活性大大提高。通过Props，可以将组件配置化，使其能够适应不同的场景和需求。

在父组件中，通过给子组件标签添加属性的方式来传递Props。Props可以是任意类型的数据，如字符串、数字、布尔值、对象、数组、函数等。

<ChildComponent name="John" age={25} isStudent={true} />

在子组件中，通过函数组件的参数或类组件的this.props来接收传递的Props。在函数组件中，Props作为函数的第一个参数传入。

function ChildComponent(props) {
  return <h1>Hello, {props.name}!</h1>;
}

在类组件中，Props可以通过this.props访问。

class ChildComponent extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

Props是只读的，子组件不能直接修改Props的值。如果需要根据Props的值来修改组件的行为，可以将Props作为初始化状态(state)的依据。

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: props.initialCount,
    };
  }

  // ...
}

可以使用PropTypes库对组件的Props进行类型检查，以确保传递的数据类型符合预期。PropTypes可以在开发阶段捕捉潜在的错误，提高代码的可靠性。

import PropTypes from 'prop-types';

function ChildComponent(props) {
  // ...
}

ChildComponent.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
  isStudent: PropTypes.bool,
};

可以通过设置defaultProps来为组件的Props指定默认值。当父组件没有传递对应的Props时，默认值会生效。

function ChildComponent(props) {
  // ...
}

ChildComponent.defaultProps = {
  name: 'Anonymous',
  age: 18,
};

Props是React组件通信的重要方式，通过Props可以将数据和行为从父组件传递给子组件，实现组件间的数据流动和交互。Props应该是单向数据流，即从父组件流向子组件。子组件不应该直接修改Props，而是应该通过回调函数或状态提升等方式与父组件进行通信和数据更新。

Alt

Once Day

也信美人终作土，不堪幽梦太匆匆......

如果这篇文章为您带来了帮助或启发，不妨点个赞👍和关注，再加上一个小小的收藏⭐！

(｡◕‿◕｡)感谢您的阅读与支持~~~

React(1)基础入门