React.js 中的纯组件-js教程-PHP中文网

React.js 中的纯组件

Patricia Arquette

发布： 2024-10-24 03:17:30

原创

1065 人浏览过

Pure Component in React.js 保持组件纯净是 React 和函数式编程的基本原则。以下是对组件纯度概念的更深入探讨，包括保持 React 组件纯度的好处和策略。

在 React 中保持组件纯净

什么是纯函数？

纯函数 是一个函数：

确定性：给定相同的输入，它总是产生相同的输出。
无副作用：它不会引起任何副作用，例如修改外部状态或与外界交互（例如，进行API调用、操作DOM）。

为什么使用纯组件？

可预测性：纯组件的行为一致。您可以依赖它们的输出，这简化了应用程序的推理。
更容易测试：由于纯组件是可预测的并且没有副作用，因此更容易测试。您可以根据输入 props 直接测试输出，而无需担心外部状态变化。
性能优化：纯组件有助于优化渲染。 React 可以根据 prop 的变化高效地判断组件是否需要重新渲染。
可维护性：随着代码库的增长，维护纯组件变得更加简单。它们封装功能而没有隐藏的依赖关系，使调试和重构变得更容易。
重用：纯组件具有高度可重用性，因为它们不依赖于外部状态。您可以轻松地在不同的上下文中使用它们。

如何保持组件纯净

以下是一些确保您的组件保持纯净的策略：

避免副作用：
- 不要直接修改 props 或全局状态。
- 避免渲染方法内的异步操作（例如 API 调用、计时器）。

   const PureComponent = ({ count }) => {
     // Pure function: does not cause side effects
     return <div>{count}</div>;
   };

登录后复制

使用 React.memo：
- 使用 React.memo 包裹功能组件，以防止在 props 未更改时不必要的重新渲染。

   const PureGreeting = React.memo(({ name }) => {
     return <h1>Hello, {name}!</h1>;
   });

登录后复制

解构道具：
- 解构组件参数列表中的 props，以保持组件的结构整洁和集中。

   const PureButton = ({ label, onClick }) => {
     return <button onClick={onClick}>{label}</button>;
   };

登录后复制

提升状态：
- 管理父组件中的状态并将所需的数据和事件处理程序传递给子组件。这使得子组件保持纯粹的功能。

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

     return <PureCounter count={count} setCount={setCount} />;
   };

登录后复制

避免在渲染中使用内联函数：
- 不要在渲染方法中内联定义函数，而是在外部定义它们。这可以防止在每次渲染时创建新的函数实例，从而导致不必要的重新渲染。

   const PureCounter = React.memo(({ count, setCount }) => {
     return <button onClick={() => setCount(count + 1)}>Increment</button>;
   });

登录后复制

避免直接改变状态：
- 使用返回新状态的方法而不是直接改变现有状态。这符合不变性原则。

   const handleAddItem = (item) => {
     setItems((prevItems) => [...prevItems, item]); // Pure approach
   };

登录后复制

纯组件示例

这是遵循以下原则的纯函数组件的完整示例：

import React, { useState } from 'react';

const PureCounter = React.memo(({ count, onIncrement }) => {
  console.log('PureCounter Rendered');
  return <button onClick={onIncrement}>Count: {count}</button>;
});

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

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

  return (
    <div>
      <h1>Pure Component Example</h1>
      <PureCounter count={count} onIncrement={handleIncrement} />
    </div>
  );
};

export default App;

登录后复制