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

Question

I have this functional/stateless component where I have a function filterByCardinalPoint which I need to call when component is mounted. Is there a way to do that without writing the component as a class?

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

  return (...)
};

Answer 1

You can use the useEffect hook to run a function when the component has been mounted. By giving it an empty array as second argument it will only be run after the initial render.

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

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

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

Answer 2

There was no way to emulate lifecycles in functional components before the introduction to hooks in React. You could however use libraries like recompose which provided a way to have modular portion of react code as HOCs

However after the introduction of hooks in v16.8.0 you could make use of useEffect hook to emulate lifecyle like behaviour in functional component.

In order to execute useEffect callback only on initial render you provide an empty array as the second argument. Please refer the docs for more details

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