类组件转函数式组件总结

作为前端工程师，在接手使用react框架开发的前端项目的过程中，常常遇到需要将类组件转成函数式组件的需求，而将类组件转换成函数式组件的优势在于：

1. 简洁性：函数式组件使用纯函数的方式来定义，结构更简单、代码量更少。没有繁琐的生命周期方法和this关键字，在编写和阅读代码时更加清晰和直观。
2. 可重用性：函数式组件更容易实现逻辑的复用。由于函数式组件之间没有共享状态或生命周期方法，因此可以将逻辑进行封装，以自定义钩子（custom hooks）的形式在多个组件中重用。
3. 易于测试：函数式组件本身就是纯函数，接受输入并返回输出，没有内部状态或引用，使得它们更易于编写单元测试，并且测试结果更可预测。
4. 性能优化：函数式组件没有实例化过程，不需要维护实例对象，因此比类组件具有更低的内存消耗。此外，使用React钩子（Hooks）可以精确地管理组件的副作用，避免了冗余的更新和渲染。
5. 更好的未来支持：随着React的不断发展，函数式组件和React钩子已成为React开发的主要推荐方式。很多新特性和功能都首先在函数式组件上得到支持和优化，因此函数式组件具有更好的未来支持和扩展性。

而在将类组件改造为函数式组件时，可以使用React钩子（Hooks）来替代类组件的生命周期钩子方法。通过使用useState、useEffect和其他自定义钩子，可以实现与类组件相似的功能。本文总结了笔者在这种组件转换过程中的一些经验，将其记录下来，作为笔记。

1. 使用useState来初始化和管理组件的状态。
2. 使用useEffect钩子来处理副作用，例如模拟componentDidMount、componentDidUpdate和componentWillUnmount等生命周期方法。
3. 通过指定依赖数组来控制副作用的触发时机，并模拟componentDidUpdate中的前一个属性和状态。
4. 使用自定义逻辑或React.memo来决定是否重新渲染组件。
5. 错误边界（Error Boundary）可以用于处理函数式组件内部的错误。

具体来说：

1. 改造生命周期函数：constructor(props)

// 类组件
class MyClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

// 函数式组件
function MyFunctionComponent() {
  const [count, setCount] = useState(0);

  return <div>{count}</div>;
}

Note : 在函数式组件中，使用useState来初始化状态。

2. 改造生命周期函数：componentDidMount()

// 类组件
class MyClassComponent extends React.Component {
  componentDidMount() {
    // componentDidMount逻辑
  }

  render() {
    return <div>Hello World</div>;
  }
}

// 函数式组件
function MyFunctionComponent() {
  useEffect(() => {
    // componentDidMount逻辑
  }, []);

  return <div>Hello World</div>;
}

Note : 使用useEffect钩子，并将一个空的依赖数组作为第二个参数，以模拟componentDidMount的功能。

3. 改造生命周期函数：componentDidUpdate(prevProps, prevState)

// 类组件
class MyClassComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    // componentDidUpdate逻辑
  }

  render() {
    return <div>{this.props.someProp}</div>;
  }
}

// 函数式组件
function MyFunctionComponent({ someProp }) {
  useEffect(() => {
    // componentDidUpdate逻辑
  }, [someProp]);

  return <div>{someProp}</div>;
}

Note : 使用useEffect钩子，并在依赖数组中指定前一个属性和状态，以模拟componentDidUpdate的功能。

4. 改造生命周期函数：shouldComponentUpdate(nextProps, nextState)

// 类组件
class MyClassComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 自定义逻辑来决定是否更新
  }

  render() {
    return <div>Hello World</div>;
  }
}

// 函数式组件
const MyFunctionComponent = React.memo(function MyFunctionComponent() {
  // 组件逻辑

  return <div>Hello World</div>;
});

Note : 在函数式组件中，可以使用React.memo()进行浅比较，以决定是否重新渲染组件。

5. 改造生命周期函数：componentWillUnmount()

// 类组件
class MyClassComponent extends React.Component {
  componentWillUnmount() {
    // componentWillUnmount逻辑
  }

  render() {
    return <div>Bye Bye</div>;
  }
}

// 函数式组件
function MyFunctionComponent() {
  useEffect(() => {
    return () => {
      // componentWillUnmount逻辑
    };
  }, []);

  return <div>Bye Bye</div>;
}

Note : 使用useEffect钩子，并返回一个清理函数，以模拟componentWillUnmount的功能。

6. 改造生命周期函数：componentDidCatch(error, info)

// 类组件
class MyClassComponent extends React.Component {
  componentDidCatch(error, info) {
    // componentDidCatch逻辑
  }

  render() {
    return <div>{this.props.someProp}</div>;
  }
}

// 函数式组件（使用错误边界）
function ErrorBoundary(props) {
  const [hasError, setHasError] = useState(false);

  if (hasError) {
    // 处理错误的逻辑
    return <ErrorMessage />;
  }

  return props.children;
}

function MyFunctionComponent() {
  return (
    <ErrorBoundary>
      <div>{props.someProp}</div>
    </ErrorBoundary>
  );
}

Note : 在函数式组件中，没有直接对应的钩子，但可以使用错误边界（Error Boundary）来处理组件内部的错误。

如果您觉得本文对您的开发有所帮助，烦请点个赞支持一下吧，谢谢！