React高级特性

sym001
61 阅读4分钟

本篇总结React高级特性相关知识点，包含：函数组件、非受控组件、Protals、context、异步组件（懒加载）。废话不多说，下面我们就开始。

一、函数组件

函数组件没有实例，也不能监听各个生命周期，也无法扩展属性和方法。只是输入props，输出jsx，纯函数。函数组件通常比类组件更简洁，易于理解和维护。

函数组件只接收一个 props 参数，并返回一个 React 元素。例如：

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

在上面的例子中，Greeting 是一个函数组件，它接收一个 props 参数，然后返回一个 h1 元素，其中包含了 props.name 的值。

函数组件可以使用 React 的钩子函数来实现状态和副作用。例如，useState 钩子可以用来在函数组件中定义状态：

import React, { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }

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

在上面的例子中，Counter 是一个函数组件，它使用 useState 钩子来定义状态。count 是状态变量，setCount 是更新状态的函数。当用户点击按钮时，handleClick 函数会调用 setCount 函数来更新状态。

二、非受控组件

非受控组件是指表单元素的值不受React组件的状态控制，而是由DOM元素自身维护。这种组件一般使用ref来获取表单元素的值，而不是通过state来控制表单元素的值。非受控组件适用于一些简单的表单场景，比如单选框、复选框、文本框等。由于非受控组件的值不受React控制，所以在处理表单数据时需要通过其他方式获取表单元素的值，比如通过ref来获取。同时，非受控组件也不支持表单元素的验证和错误提示等功能，因此在需要进行表单验证的场景中，建议使用受控组件。

三、Protals

Protals提供了一种将子节点渲染到存在于父组件以外的DOM节点的优秀方案。

可能使用的场景：

  • 组件有overflow:hidden（其他命中BFC的情况），导致了渲染问题
  • 父组件z-index导致了渲染问题
  • 用到fixed等需要跳出父组件

四、Context

Context提供了一个无需为每层组件手动添加props，就能在组件树间进行数据传递的方法。例如：地区偏好、UI主题。这些属性是应用程序中许多组件都需要的。Context提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递props。

使用Context需要分为两个步骤：

  1. 创建Context对象：使用React.createContext方法创建一个Context对象，该对象包含了一个Provider组件和一个Consumer组件。

  2. 在组件中使用Context：在需要使用Context中数据的组件中，使用Context.Consumer组件来获取Context中的数据。同时，在Context.Provider组件中，可以通过value属性来传递Context中的数据。

需要注意的是，当Context中的数据发生变化时，所有使用该Context的子组件都会重新渲染。因此，在使用Context时需要注意数据的更新频率，避免不必要的渲染。

另外，React 16.3版本之后，Context还支持了新的API——ContextType和useContext。ContextType是一种类组件中使用Context的方式，而useContext则是一种函数组件中使用Context的方式，它们都可以更方便地使用Context来传递数据。

五、异步组件（懒加载）

React中的异步组件（也称为懒加载）是一种延迟加载组件的方式，可以在需要时才加载组件代码，而不是在页面加载时就加载所有组件代码。这样可以提高应用程序的性能，减少初始加载时间。

在React中，可以使用React.lazy()函数来实现异步组件加载。该函数接受一个函数作为参数，该函数返回一个动态import()函数调用，该调用会动态地加载组件代码。例如：

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

在使用时，可以将MyComponent作为普通组件一样渲染：

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

需要注意的是，使用React.lazy()函数时，需要将组件包装在Suspense组件中，并提供一个fallback属性，用于在组件加载时显示一个占位符，以避免出现闪烁或空白页面的情况。

avatar
文章
阅读
粉丝