React 基础知识

简介与特性

React 是一个由 Facebook 开发的 JavaScript 库，用于构建用户界面。它提供了一种声明式的方式来创建可复用的组件，使得代码更加模块化、可维护和易于理解。

React 的主要特点包括：

组件化开发：React 将 UI 拆分为独立的、可复用的组件，使得代码更加模块化、可维护和易于理解。
虚拟 DOM：React 通过虚拟 DOM 提高了渲染性能，避免了每次修改都需要重新渲染整个页面的问题。
单向数据流：React 的数据流动是单向的，将状态提升到尽可能高的层级，使得逻辑更加清晰。
JSX：React 使用 JSX 语法来描述用户界面，可以将 HTML 和 JavaScript 写在同一个文件中，提高了开发效率。

更新流程

React 的更新流程如下：

当组件的状态(state)或属性(props)发生改变时，React 会重新执行 render() 方法得到新的虚拟 DOM。
React 会将新的虚拟 DOM 和旧的虚拟 DOM 进行比较，找到差异。
React 只会更新有差异的部分，而不是重新渲染整个页面，提高了性能。
React 将有差异的部分渲染到页面上，完成更新。

class 组件和函数组件

React 中有两种定义组件的方式：class 组件和函数组件。

class 组件

class 组件是继承于 React.Component 类的 ES6 类，它必须包含一个 render() 方法来描述该组件要渲染的内容。class 组件可以使用 state 和 props 来存储和传递数据。

下面是一个简单的 class 组件示例：

javascriptCopy Code
import React from "react";

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

export default Greeting;

函数组件

函数组件是一个只接收 props 参数并返回一个 React 元素的纯函数，用于描述该组件要渲染的内容。函数组件没有 state，但可以使用 hooks 来实现一些类组件的功能。

下面是一个简单的函数组件示例：

javascriptCopy Code
import React from "react";

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

export default Greeting;

总结

React 是一个用于构建用户界面的 JavaScript 库，提供了组件化开发、虚拟 DOM、单向数据流、JSX 等特性。React 的更新流程包括重新执行 render() 方法得到新的虚拟 DOM，比较新旧虚拟 DOM 的差异，更新有差异的部分，并渲染到页面上。React 中有两种定义组件的方式：class 组件和函数组件，它们分别继承于 React.Component 类和采用纯函数的方式来描述组件要渲染的内容。

React基础 | 青训营笔记