Question

我有这个功能/无状态组件，其中有一个函数filterByCardinalPoint，在安装组件时需要调用它。有没有一种方法可以不将组件编写为类？

const PassengersCircle = ({ navigationStore, passengersData }) => {
  const filterByCardinalPoint = () => {
    const passengersByCardinalPoint = filter('value');
    ...
  };

  return (...)
};

Answer 1

可以在安装了组件后使用useEffect钩子来运行功能。通过为它提供一个空数组作为第二个参数，它将仅在初始渲染之后运行。

const PassengersCircle = ({ navigationStore, passengersData }) => {
  const filterByCardinalPoint = () => {
    const passengersByCardinalPoint = filter('value');
    // ...
  };

  useEffect(() => {
    filterByCardinalPoint();
  }, []);

  return <>{/* ... */}</>;
};

Answer 2

在React中引入钩子之前，无法在功能组件中模拟生命周期。但是，您可以使用recompose之类的库，该库提供了一种将反应代码的模块化部分作为HOC的方法

但是，在v16.8.0中引入了钩子之后，您可以使用useEffect钩子来模拟功能组件中类似生命周期的行为。

为了仅在初始渲染时执行useEffect回调，请提供一个空数组作为第二个参数。请参阅docs了解更多详细信息

const PassengersCircle = ({ navigationStore, passengersData }) => {
  const filterByCardinalPoint = () => {
    const passengersByCardinalPoint = filter('value');
    ...
  };
 useEffect(() => {
    filterByCardinalPoint();
 }, [])
  return (...)
};

在React上，如何在功能/无状态组件上的组件安装上调用函数？

2 个答案: