React 顶层 API：掌控组件渲染，优化应用性能

2024-01-05 14:59:01

在 React 生态中，顶层 API 是指一组提供组件生命周期、状态管理、渲染优化等功能的核心函数和钩子。这些 API 使开发者能够构建健壮、高效的 React 应用程序。

React.memo

React.memo 是一个高阶组件，用于优化组件的渲染性能。它通过比较组件的 props，如果 props 没有发生变化，则跳过重新渲染。这对于减少不必要的渲染，提高应用程序性能非常有用。

import React, { memo } from 'react';

const MyComponent = (props) => {
  // 组件逻辑
  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
};

export default memo(MyComponent);

React.useCallback

React.useCallback 是一个钩子，用于创建和缓存函数，防止组件重新渲染时重新创建这些函数。这对于需要在组件不同生命周期阶段使用相同函数的场景非常有用，可以提高性能。

import React, { useCallback } from 'react';

const MyComponent = () => {
  const onClickHandler = useCallback(() => {
    // 函数逻辑
  }, []);

  return (
    <button onClick={onClickHandler}>
      {/* 按钮内容 */}
    </button>
  );
};

React.useEffect

React.useEffect 是一个钩子，用于在组件挂载、更新或卸载时执行特定逻辑。这对于在组件生命周期中执行副作用操作非常有用，例如获取数据、设置计时器等。

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    // 组件挂载时执行
  }, []);

  useEffect(() => {
    // 组件更新时执行
  }, [props]);

  useEffect(() => {
    // 组件卸载时执行
    return () => {
      // 清理逻辑
    };
  }, []);

  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
};

React.useReducer

React.useReducer 是一个钩子，用于管理组件的状态。它提供了一种更易于维护和扩展的状态管理方式，尤其是当状态逻辑复杂时。

import React, { useReducer } from 'react';

const reducer = (state, action) => {
  // 状态更新逻辑
};

const MyComponent = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
};

React.useRef

React.useRef 是一个钩子，用于在组件中创建一个可变的引用对象。这个引用对象不会随着组件的重新渲染而改变，这对于存储需要跨重新渲染保持不变的数据非常有用，例如计时器、DOM 元素等。

import React, { useRef } from 'react';

const MyComponent = () => {
  const inputRef = useRef();

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focusInput}>
        {/* 按钮内容 */}
      </button>
    </div>
  );
};

React.useState

React.useState 是一个钩子，用于管理组件的局部状态。它提供了一种简单、直观的方式来存储和更新组件的状态，并且与 React 的渲染周期紧密集成。

import React, { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={incrementCount}>
        {/* 按钮内容 */}
      </button>
    </div>
  );
};