理解react框架| 青训营笔记

人走茶凉13
127 阅读3分钟

React 是一个由 Facebook 开发并开源的 JavaScript 前端框架，用于构建用户界面和单页面应用程序（SPA）。React 提供了一种声明式的编程方式，使得开发者可以更方便地描述应用程序的状态变化，并能够更高效地渲染 UI 组件。

React 的核心思想是组件化，开发者可以将整个应用程序拆分成多个小组件，每个组件都负责自己的功能和状态，从而使得整个应用程序更易于维护和扩展。

React 采用虚拟 DOM 技术来提高渲染性能，它能够自动比较新旧虚拟 DOM 树之间的差异，从而只更新需要更新的部分，减少了重复渲染和浪费性能的情况。

另外，React 还支持使用 JSX 语法编写组件，这使得组件的开发和调试变得更加直观和方便。

React 的更新流程主要分为两个阶段：Reconciliation 和 Commit。

在 Reconciliation 阶段，React 会比较新旧虚拟 DOM 树之间的差异，并记录需要更新的部分。这个过程包括以下几个步骤：

  1. Diff 算法：React 会使用一种高效的算法比较新旧虚拟 DOM 树之间的差异，并标记需要更新的部分。
  2. 生命周期调用：对于需要更新的组件，React 会依次调用它们的生命周期方法，包括 shouldComponentUpdate、getDerivedStateFromProps、getSnapshotBeforeUpdate 等。
  3. Render：对于需要更新的组件，React 会重新调用它们的 render 方法，生成新的虚拟 DOM 树。

在 Commit 阶段，React 会将需要更新的部分渲染到浏览器的实际 DOM 中，这个过程包括以下几个步骤：

  1. Pre-commit 阶段：在实际更新 DOM 前，React 会触发一些钩子函数，包括 componentWillMount、componentDidUpdate、getSnapshotBeforeUpdate 等。
  2. 实际更新 DOM：React 会将需要更新的部分渲染到浏览器的实际 DOM 中。
  3. Post-commit 阶段：在实际更新 DOM 后，React 会触发一些钩子函数，包括 componentDidMount、componentDidUpdate 等。

在 React 中，class 组件是一种用于创建用户界面的 JavaScript 类，它可以通过继承 React.Component 或 React.PureComponent 来定义。

class 组件通常包含以下几个部分：

  1. constructor：构造函数，在创建组件实例时被调用。可以用来初始化组件的状态（state）和绑定事件处理函数。
  2. state：组件的状态，即一个包含组件数据的 JavaScript 对象。
  3. render：用于渲染组件的方法，返回一个 React 元素或组件树。
  4. 生命周期方法：包括 componentWillMount、componentDidMount、componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、componentDidUpdate 和 componentWillUnmount 等，用于处理组件的各个生命周期阶段。

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

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

在上面的代码中，MyComponent 继承了 React.Component，其中 constructor 方法初始化了组件的 state 和绑定了 handleClick 方法，render 方法返回一个包含计数器和按钮的组件树。当用户点击按钮时，handleClick 方法会更新 state 中的 count 值，从而触发组件的重新渲染。

函数式组件是 React 中定义组件的一种方式，它是一个简单的 JavaScript 函数，接受一些属性作为输入并返回一个 React 元素作为输出。与类组件不同，函数式组件不需要继承 React.Component 类，也不需要使用 this 关键字来引用组件的状态和属性。

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

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}
avatar
文章
阅读
粉丝