React基础与核心概念探索

React简介

起源与设计理念

JSX语法

什么是JSX？

为什么使用JSX？

JSX的转换过程

组件化架构

React组件的概念

分类：函数组件 vs 类组件

状态管理

Props传递

虚拟DOM

高效DOM更新的秘密

工作原理

React简介

起源与设计理念

React，由Facebook开发并维护，自2013年首次开源以来，迅速成为前端开发领域的一颗璀璨明星。React的设计初衷是为了解决Facebook在构建大型Web应用时遇到的性能和维护性问题。其核心设计理念包括声明式编程和组件化。

声明式编程：React鼓励开发者以声明的方式描述UI，即告诉React“你希望界面看起来像什么”，而不是“如何一步步更新DOM”。这种方式使得代码更加清晰、易于理解和维护。
组件化：React将UI拆分成独立的、可复用的组件，每个组件都封装了自己的逻辑、状态和UI。这种模块化的设计方式不仅提高了开发效率，还促进了代码的重用和团队的协作。

JSX语法

什么是JSX？

JSX是JavaScript XML的缩写，是React推荐的一种语法扩展。它允许开发者在JavaScript代码中直接编写类似HTML的标记，这种标记最终会被Babel等编译器转换成React可以理解的JavaScript对象。

为什么使用JSX？

JSX让React的组件更加直观和易于理解。通过直接在JavaScript代码中编写HTML结构，开发者可以更加自然地描述UI布局，同时享受JavaScript的强大功能，如变量、条件渲染和循环等。

JSX的转换过程

JSX本身不是有效的JavaScript代码，因此在浏览器或Node.js环境中直接运行之前，需要通过如Babel这样的工具进行转换。转换过程中，JSX会被转换成React.createElement()的调用，每个HTML元素都会转换为一个JavaScript对象，这些对象最终会被React用来构建DOM树。

组件化架构

React组件的概念

React组件是构建React应用的基本单位，它们可以接受输入（props）并返回React元素树，这些元素树描述了界面的一部分。组件可以是类组件或函数组件，它们都是React应用的积木。

分类：函数组件 vs 类组件

函数组件：接受props作为参数并返回React元素的简单函数。它们没有自己的状态（state）和生命周期方法，但可以使用Hooks来添加这些功能。

代码示例：

import React from 'react';  
  
function Welcome(props) {  
  return <h1>Hello, {props.name}</h1>;  
}  
  
export default function App() {  
  return (  
    <div>  
      <Welcome name="Alice" />  
      <Welcome name="Bob" />  
    </div>  
  );  
}

在这个例子中，我们定义了一个Welcome函数组件，它接收一个props对象作为参数，并返回一个包含问候语的h1元素。然后，在App组件中，我们两次渲染了Welcome组件，分别传递了不同的name属性。

类组件：通过继承React.Component创建的组件，拥有自己的状态（state）和生命周期方法。类组件相对复杂，但在某些场景下（如需要状态管理或复杂的生命周期逻辑时）更为强大。

代码示例：

import React, { Component } from 'react';  
  
class Welcome extends Component {  
  render() {  
    return <h1>Hello, {this.props.name}</h1>;  
  }  
}  
  
export default class App extends Component {  
  render() {  
    return (  
      <div>  
        <Welcome name="Charlie" />  
        <Welcome name="David" />  
      </div>  
    );  
  }  
}

这个示例与上面的函数组件一样，但使用了类组件的语法。Welcome类继承自React.Component，并通过this.props访问传递给它的属性。然后，在App类中，我们渲染了两个Welcome组件实例。

状态管理

React组件的状态（state）是驱动UI更新的关键。无论是类组件中的this.state（类组件中状态管理只能使用state）还是函数组件中的useState Hook（在18版本往后类组件开始摒弃，推荐使用函数组件以及函数组件专有的hook来进行状态管理），状态都允许组件在内部保存数据，并在数据变化时重新渲染界面。