我的 React 之旅始于四年前的功能组件和 Hooks。然后是'Siswe，他是训练营的参与者，也是我们常驻班的组件爱好者。当我们其他人在使用功能组件的团队项目上进行协作时，“Siswe 坚定不移地忠诚于类组件。

组件是用户界面 (UI) 的构建块。

将它们视为乐高积木 - 您可以以各种方式组合它们来创建复杂的结构。它们是封装 UI 和逻辑的独立且可重用的代码片段。

在另一个组件中重用一个组件通常如下所示：

import MyComponent from './MyComponent';

function ParentComponent() {
  return (
    

      
  );
}

类组件和功能组件是在 React 中创建组件的两种主要方式。

import React, { Component } from 'react';

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

 handleClick = () => {
  this.setState({  
 count: this.state.count   1 });
 };

 render() {
  return  
 (
   

    
You clicked {this.state.count} times
    Click me
   
  );
 }
}

export default Counter;

这是一个类组件，使用扩展 React.Component 类的 JavaScript 类创建。

import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount(count   1);
  };

  return (
    

      
You clicked {count} times
      Click me
    
  );
}

export default Counter;

另一方面，这是一个函数组件，编写为简单的 JavaScript 函数。

状态管理：核心区别。

类组件使用 this.state 管理它们自己的内部状态。这通常在构造函数中初始化，使用 this.state 对象访问，并使用 this.setState 方法更新，如上面的代码块所示。

功能组件最初是无状态的。但随着 Hooks 的引入，他们获得了管理状态和生命周期逻辑的能力。利用 useState 挂钩来管理状态，它返回一对值：当前状态和更新它的函数，如上所示。这对于简单的状态管理来说已经足够了。对于涉及多个子值的更复杂的状态逻辑，或者当下一个状态依赖于前一个状态时，您需要使用 useReducer.
例如：

import React, { useReducer } from 'react';

const initialState = {
  count: 0,
  step: 1,
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count   state.step };
    case 'decrement':   

      return { ...state, count: state.count - state.step };
    case 'setStep':
      return { ...state, step: action.payload   
 };
    default:
      throw new Error();
  }
};

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement'   
 });
  const setStep = (newStep) => dispatch({ type: 'setStep', payload: newStep });

  return (
    

      
Count: {state.count}
      
Step: {state.step}
       
      -
       setStep(Number(e.target.value))} />
    
  );
}

export default Counter;

这里，useReducer以结构化且可维护的方式管理多个状态值和复杂的更新逻辑。 Hooks 专门用于功能组件。

避免直接操作两个组件中的状态对象。

无论组件类型如何，都不要直接修改或改变状态对象。相反，使用更新的值创建一个新对象。这种方法有助于 React 有效地跟踪更改并优化重新渲染。

功能组件示例：

import React, { useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState({ name: 'Jane Doe', age: 30 });

  const handleNameChange = (newName) => {
    setUser({ ...user, name: newName }); // Create a new object with updated name
  };

  return (
    

      
Name: {user.name}
      
Age: {user.age}
       handleNameChange(e.target.value)} />
    
  );
}

export default UserProfile;

类组件示例：

import React, { Component } from 'react';

class UserProfile extends Component {
  state = { user: { name: 'Jane Doe', age: 30 } };

  handleNameChange = (newName) => {
    this.setState(prevState => ({
      user: { ...prevState.user, name: newName } // Create a new object with updated name
    }));
  };

  render() {
    return (
      

        
Name: {this.state.user.name}
        
Age: {this.state.user.age}
         this.handleNameChange(e.target.value)} />
      
    );
  }
}

export default UserProfile;

在这两个示例中，我们更新用户对象的 name 属性，同时保留原始对象的完整性。这确保了创建新的状态对象，保持不变性并防止状态更新的潜在问题。遵守这一点可确保可预测的行为、性能优化和更轻松的调试。

类组件用于复杂的逻辑。

• 复杂的状态管理：在处理需要细粒度控制的复杂状态逻辑时，带有 this.state 和 this.setState 的类组件可以提供更大的灵活性。
• 生命周期方法： 对于严重依赖生命周期方法（如 componentDidMount、componentDidUpdate 或 componentWillUnmount）的组件，类组件是传统的选择。
• 错误边界：为了处理组件树中的错误并防止崩溃，带有 componentDidCatch 的类组件是必不可少的。
• 性能优化：在特定的性能关键场景中，可以利用类组件中的PureComponent或shouldComponentUpdate。
• 遗留代码库：如果您正在开发一个严重依赖类组件的现有项目，那么通过将它们用于新组件可能会更容易保持一致性。

功能组件用于简单视图。

• 简单组件：对于具有最少状态或逻辑的表示组件，功能组件由于其简单性和可读性通常是首选。
• 使用 Hooks 进行状态管理： 在功能组件中利用 useState 和 useReducer 提供了一种强大而灵活的状态管理方式。
• 副作用： useEffect 挂钩允许管理副作用，例如数据获取、订阅或手动 DOM（文档对象模型）操作。
• 性能优化： useMemo 和 useCallback 可以用来优化功能组件中的性能。

让您的组件需求指导您的决定。

函数式方法通常被认为更简洁和可读，并且由于简单和高效而通常就足够了。然而，类组件提供了对状态管理和生命周期方法的更多控制，特别是在处理复杂的逻辑或性能优化时。这意味着组织复杂逻辑的更好结构。

类组件和功能组件之间的选择并不总是明确的，因为没有严格的规则。评估组件的要求并选择最适合您的项目要求的类型。

您更喜欢使用哪个组件？