如何在 React 的无状态函数组件中初始化类实例?

IT技术 reactjs typescript react-native react-hooks
2021-05-17 15:52:40

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

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

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

}

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

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

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

}

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

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

3个回答

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

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

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

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

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

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

如果您确实打算稍后使用帮助器实例,那么您可以将前面的示例与 useMemo 或 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

我会寻求useMemo解决方案,但这里是您如何使用useRef+useEffect来消除一些困惑:

const StatelessFunction = (props) => {
   const helper = useRef(); // ref is equivalent of instance prop

   useEffect(() => {
     helper.current = new HelperClass();
     helper.current.doSomething();
   }, []); // this is equivalent of componentDidMount
}

您是对的,useRef允许您HelperClass在重新渲染时保留相同的实例

const StatelessFunction = (props) => {
   const helper = useRef(new HelperClass())

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