React基础与实战 | 青训营笔记

You1i
113 阅读6分钟

React特性与简介

React是一个用于构建用户界面的JavaScript库。它由Facebook开发，旨在提高开发人员的生产力和应用程序的性能。React使用组件化编程模型，使开发人员能够将应用程序拆分为小的、可重用的部分，从而更轻松地管理和维护代码。React还使用虚拟DOM（Document Object Model）来提高应用程序的性能，因为它可以在不实际更新DOM的情况下更新组件。这意味着React可以更快地更新应用程序的用户界面，从而提高应用程序的性能和响应能力。

React的主要特性有：

  • 组件化编程模型：React使用组件化编程模型，使开发人员能够将应用程序拆分为小的、可重用的部分，从而更轻松地管理和维护代码。组件可以是类组件或函数组件，它们都可以接受输入（称为“props”）并返回React元素的层次结构。
  • 虚拟DOM：React使用虚拟DOM（Document Object Model）来提高应用程序的性能，因为它可以在不实际更新DOM的情况下更新组件。这意味着React可以更快地更新应用程序的用户界面，从而提高应用程序的性能和响应能力。
  • 单向数据流：React使用单向数据流来管理组件之间的数据传递。这意味着数据只能从父组件传递到子组件，而不能反过来。这有助于减少应用程序中的错误和不一致性。
  • JSX：React使用JSX语法来描述组件的外观和行为。JSX是一种JavaScript扩展，它允许您在JavaScript代码中嵌入HTML标记。这使得编写React组件更加直观和易于理解。
  • 生命周期方法：React组件具有生命周期方法，这些方法允许您在组件的不同阶段执行操作。例如，您可以使用componentDidMount方法在组件加载后执行初始化操作，或者使用componentWillUnmount方法在组件卸载前执行清理操作。

等待资源加载时间和大部分情况下浏览器单线程执行是影响web性能的两大主要原因。

在等待资源加载时间方面，React使用React.Lazy、React.Suspense、ErrorBoundar来解决。在单线程执行方面，React使用异步更新、时间切片、React Fiber来解决。

lazy和suspense

Lazy是一个高阶组件，它允许您延迟加载组件，直到它们实际需要渲染为止。这对于减少初始加载时间和减少JavaScript包的大小非常有用。要使用Lazy，您可以使用React.lazy函数来动态导入组件。

Suspense是另一个新功能，它允许您在组件树中等待异步操作完成。这对于在渲染之前获取数据非常有用。要使用Suspense，您可以将其包装在需要等待异步操作的组件周围，并使用fallback属性指定一个加载状态。

import React, { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}

ErrorBoundary

错误边界是React中的一个概念，它可以帮助您更好地处理组件中的错误，从而提高应用程序的健壮性。

function withErrorBoundary(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false };
    }

    static getDerivedStateFromError(error) {
      return { hasError: true };
    }

    componentDidCatch(error, errorInfo) {
      console.error(error, errorInfo);
    }

    render() {
      if (this.state.hasError) {
        return <div>Something went wrong.</div>;
      }

      return <WrappedComponent {...this.props} />;
    }
  };
}

function MyComponent() {
  throw new Error('Error!');
}

const MyComponentWithErrorBoundary = withErrorBoundary(MyComponent);

更新流程

React的更新流程可以分为两个阶段：调和和提交。

在调和阶段，React会比较新旧虚拟DOM树的差异，并尝试最小化DOM操作。React使用一种称为“协调”的算法来完成此操作。协调算法会递归地比较新旧虚拟DOM树的节点，并确定哪些节点需要更新、删除或添加。一旦协调完成，React会生成一个更新队列，其中包含需要进行的所有DOM操作。

在提交阶段，React会将更新队列中的所有DOM操作应用于实际的DOM。这是通过调用ReactDOM.render()或ReactDOM.hydrate()方法来完成的。React会将更新队列中的所有操作一次性应用于DOM，以最小化DOM操作的数量。

React基础

React是一个用于构建用户界面的JavaScript库。它可以用来开发web页面等。

组件

React的组件分为class组件和函数组件。

class组件

class组件是React中的一种组件类型，它是通过ES6的class语法来定义的。与函数组件不同，class组件可以使用state和lifecycle方法。

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

  componentDidMount() {
    console.log('Component mounted');
  }

  componentDidUpdate() {
    console.log('Component updated');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

函数式组件

React 的函数式组件是一种使用纯函数(Pure Function)编写的组件，它们接受输入并返回输出，而不依赖于外部状态。这种组件可以更好地组合和复用，并且更容易进行测试。

import React from 'react';

function MyComponent(props) {
  return (
    <div>{props.message}</div>
  );
}

export default MyComponent;

Hook的规则和原理

Hook是React中一种新的组件重用方式，它可以让我们通过函数式组件来复用一些通用的功能。在传统的组件化开发中，我们通常需要编写很多重复的代码来实现相同的功能，例如处理用户输入、更新组件状态等。而使用Hook可以将这些重复的代码封装成一个函数，然后将这个函数暴露给其他组件使用，从而实现代码的复用和解耦。

规则

  1. Hook必须是一个函数，接收一个对象作为参数，返回一个纯函数。
  2. Hook必须使用useEffect、useState、useContext或useReducer等特定的前缀来声明。
  3. Hook必须从React中导入，并且在函数组件中使用。
  4. Hook不能访问组件的状态(state)或生命周期方法(lifecycle methods)。
  5. Hook必须使用函数式组件的形式进行定义，即使用箭头函数或者类形式。

原理

  1. Hook会创建一个闭包，保存当前组件的上下文信息，例如状态(state)、生命周期方法(lifecycle methods)等。这样就可以在后续的调用中获取到这些信息，避免了重复编写相同的代码。
  2. Hook会将当前组件的上下文信息作为参数传递给封装的函数中，这样就可以在函数中访问到组件的状态(state)和生命周期方法(lifecycle methods),从而实现通用功能的复用。
  3. Hook会在组件挂载和卸载时自动执行相应的函数，这样就可以在组件的状态发生变化时及时更新渲染结果，提高性能和用户体验。
  4. Hook会使得组件更加灵活和可定制化，因为我们可以通过自定义Hook来实现一些特定的功能，例如权限控制、数据请求等。
avatar
文章
阅读
粉丝