译文： React 开发者的面向对象：核心概念和重要性

在 Web 开发领域，特别是在处理需要长期维护的大型项目时，理解面向对象编程（OOP）是至关重要的。然而，在现代 React 开发中，使用类（Class）是不被鼓励的。本文将探讨如何在 React 上下文中应用面向对象编程的概念。

面向对象的基本概念和在React中的例子

面向对象编程（OOP）是一种软件开发方法，它将代码构造为对象（由数据和方法组成的实体的集合）。OOP 的主要概念包括：

Class 类

类是创建对象的模板。例如 "汽车" 类可以定义所有汽车都应具备的属性和行为。

Object 对象

对象是一个类的实例，包含实际数据和方法。“”BMW 3 Series "或 "Hyundai Elantra" 等对象可以从 "Car" 类中创建。

将这些概念转换到 React 中，请看下面的示例：

const Car = ({ make, model }) => {
    return (
      <div>
        <h2>Car Details</h2>
        <p>Make: {make}</p>
        <p>Model: {model}</p>
      </div>
    );
  }
  
  const App = () => {
    // "BMW 3" object
    const bmw = { make: 'BMW', model: '3 series' };
  
    // "Hyundai Elantra" object
    const hyundai = { make: 'Hyundai', model: 'Elantra' };
  
    return (
      <div>
        <h1>My Cars</h1>
        <Car make={bmw.make} model={bmw.model} />
        <Car make={hyundai.make} model={hyundai.model} />
      </div>
    );
  }
  
  export default App;

在本示例中，我们定义了一个名为 Car 的功能组件，并创建了各种汽车对象。在使用 React 进行开发时，您可以利用这些面向对象的概念来提高代码的可读性(readability)和可重用性(reusability)。

Inheritance 继承

继承允许通过继承其他类的属性和行为来创建新类。虽然 React 中的类组件可以使用继承，但当前流行的功能组件(Functional components)和钩子(Hooks)则采用了不同的方法。在功能组件中，主要使用组件组合(component composition)来代替继承。组件合成涉及将其他组件的功能集成到当前组件中。

下面是几个在功能组件中使用组件组合的例子：

1. 渲染Props模式：

从其他组件接收函数并执行它以返回 JSX。这种方法可以在功能组件中使用其他组件的功能。

const DataFetcher = ({ render }) => {
    const data = fetchData(); // logic to fetch data
    return <div>{render(data)}</div>;
  }
  
  const App = () => {
    return (
      <DataFetcher
        render={(data) => (
          <div>
            <h1>Data: {data}</h1>
          </div>
        )}
      />
    );
  }

1. 使用钩子(Hooks):

利用 React 的钩子（如 useState、useEffect 和 useContext），您可以在功能组件中管理状态和生命周期，从而实现其他组件所需功能。

const Timer = () => {
    const [count, setCount] = useState(0);
  
    useEffect(() => {
      const interval = setInterval(() => {
        setCount((prevCount) => prevCount + 1);
      }, 1000);
  
      return () => clearInterval(interval);
    }, []);
  
    return <div>Count: {count}</div>;
  }
  
  const App = () => {
    return (
      <div>
        <h1>Timer App</h1>
        <Timer />
      </div>
    );
  }

1. 使用自定义钩子(custom Hooks)

在功能组件中，你可以创建自定义钩子来重复使用逻辑。这些自定义钩子可在多个功能组件中重复使用，展示了组件组合的另一种形式。

// useCounter.js
const useCounter = (initialValue) => {
    const [count, setCount] = useState(initialValue);
  
    const increment = () => {
      setCount(count + 1);
    };
  
    return { count, increment };
  }
  
  // App.js
  import useCounter from './useCounter';
  
  const App = () => {
    const counter1 = useCounter(0);
    const counter2 = useCounter(10);
  
    return (
      <div>
        <div>
          <h2>Counter 1: {counter1.count}</h2>
          <button onClick={counter1.increment}>Increment</button>
        </div>
        <div>
          <h2>Counter 2: {counter2.count}</h2>
          <button onClick={counter2.increment}>Increment</button>
        </div>
      </div>
    );
  }

Polymorphism 多态

多态性指的是不同的对象能够使用相同的接口，并做出不同的反应。这使得代码具有灵活性和通用性。在 React 中，当多个组件需要共享相同的接口但行为不同时，多态性就会大显身手。

在 React 中使用多态性的一个例子是创建按钮组件。该按钮组件可以生成具有各种样式和行为的按钮。 让我们先创建一个按钮组件，生成不同样式的按钮：

// Button component
const Button = ({ style, onClick, label }) => {
  return (
    <button style={style} onClick={onClick}>
      {label}
    </button>
  );
};

// style objects
const primaryButtonStyle = {
  backgroundColor: 'blue',
  color: 'white',
};

const secondaryButtonStyle = {
  backgroundColor: 'gray',
  color: 'black',
};

const dangerButtonStyle = {
  backgroundColor: 'red',
  color: 'white',
};

const App = () => {
  return (
    <div>
      <h1>Polymorphic Buttons</h1>
      <Button style={primaryButtonStyle} onClick={() => alert('Primary button clicked')} label="Primary Button" />
      <Button style={secondaryButtonStyle} onClick={() => alert('Secondary button clicked')} label="Secondary Button" />
      <Button style={dangerButtonStyle} onClick={() => alert('Danger button clicked')} label="Danger Button" />
    </div>
  );
};

export default App;

在本例中，Button 组件具有styles、label和onClick方法三个参数。这样，您就可以使用相同的 Button 接口创建具有不同样式和点击行为的按钮。这种方法提高了代码的可重用性和可维护性，因为您可以创建具有不同外观和功能的多个按钮。除样式外，您还可以自定义按钮的呈现方式和行为，从而使您的代码更灵活、更通用。

Encapsulation 封装

封装是一个概念，它将数据和方法捆绑成一个单元，从而实现信息隐藏。这可以增强代码的稳定性和安全性。在 React 中，封装涉及将组件状态和方法组合成一个单元，以保护数据免受外部访问，从而提高代码的稳定性和安全性。

下面是 React 中封装的一个简单示例：

const Counter = () => {
    // Conceal information by encapsulating the state
    const [count, setCount] = useState(0);
  
    // Change state through method
    const increment = () => {
      setCount(count + 1);
    };
  
    const decrement = () => {
      setCount(count - 1);
    };
  
    return (
      <div>
        <h1>Counter: {count}</h1>
        <button onClick={increment}>Increment</button>
        <button onClick={decrement}>Decrement</button>
      </div>
    );
  }
  
  export default Counter;

在本例中，Counter组件封装了状态（count）和方法（increment decrement）。这些数据和函数被封装在组件内，无法从外部直接访问。这就防止了对组件内部数据和函数的未经授权的访问，从而增强了代码的稳定性和安全性。

OOP 简化了代码，使其更易于理解，并将其转化为可重复使用的模块，所有这些都是网络开发的重要方面。这些 OOP 功能在网络开发中发挥着重要作用，使代码更高效(efficient)、更易维护(maintainable)。

原文链接 如侵则删