如何在 React 的无状态函数组件中初始化类实例? [英] How can I initialize a class instance in a stateless function component in React?

问题描述

使用有状态模式，我通常会在我的构造函数中初始化一种辅助类，并在一些组件生命周期方法中使用它的方法，如下所示:

Using a stateful pattern, I usually initialize a kind of helper class in my constructor and consume its methods in some component lifecycle methods like below:

class StatefulComponent extends Component {
  constructor(props) {
    super(props);
    this.helper = new HelperClass();
  }

  componentDidMount() {
    this.helper.doSomething();
  }

}

现在，我想将相同的逻辑转换成这样的无状态函数组件:

Now, I wanted to convert the same logic into a stateless function component like this:

const StatelessFunction = (props) => {
   this.helper = new HelperClass();

   useEffect(() => {
     this.helper.doSomething();
   }, []);

}

但是当我看到这个组件从一开始的每个 prop 变化都会被调用时，我很担心.这让我觉得我的类实例被一遍又一遍地创建.我错了吗?我可以做些什么来防止重新创建我的类并使用 ref 代替?

But I worried when I saw that this component is being called every prop change from the beginning. And this made me think that my class instance is being created over and over. Am I wrong? Is there anything I can do for preventing re-creation of my class and use a ref instead?

我遇到了 useRef 但不确定它是否适合我的情况.

I came across useRef but not sure if it fits my case.

推荐答案

回顾这个和一些评论我可以看到不能信任 useMemo 不会再次运行 HelperClass 构造函数并且 useRef 只会设置 helper after 第一次渲染，因为它的初始值不能是函数.可能 useState 是最简单、最可靠的方法:

Looking back at this and some of the comments I can see that useMemo can not be trusted to not run the HelperClass constructor again and useRef will only set the helper after the first render because it's initial value can't be a function. Probably useState is the easiest and most reliable way to do this:

const [helper] = useState(()=>new HelperClass());

可以使用 useMemo 创建 HelperClass 的实例并使用 useEffect 来调用它.给它们两个空的依赖数组意味着它们只会被称为on mount".我把 mount 放在引号中，因为 memo 只会在第一次渲染时调用，而 effect 会在第一个渲染周期完成后调用.

You can use useMemo to create an instance of HelperClass and useEffect to call it. Giving them both empty array of dependencies means they will only be called "on mount". I put on mount in quotes because memo will be called only on first render and effect will be called after first render cycle is finished.

const StatelessFunction = props => {
  const helper = useMemo(() => new HelperClass(), []);
  useEffect(() => {
    helper.doSomething();
  }, [helper]);
  return (<JSX />);
};

如果你唯一要做的就是调用 doSomething 并且不再使用辅助实例，你可以使用 useEffect 来做到:

If the only thing you'll ever do is just call doSomething and never use the helper instance again you can just do it with useEffect:

useEffect(() => {
  new HelperClass().doSomething();
}, []);

如果您确实打算稍后使用帮助器实例，那么您可以将前面的示例与 useMemo 或 useRef 结合使用:

If you do plan to use the helper instance at some later time then you could use the previous example with useMemo or useRef:

const helper = useRef();
useEffect(() => {
  helper.current = new HelperClass();
  //only called once after first render
  helper.current.doSomething();
}, []);
//you still have the helper instance as helper.current

这篇关于如何在 React 的无状态函数组件中初始化类实例?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！