typescript 如何在React中的无状态函数组件中初始化类示例？

uurv41yg 于 2023-10-22 发布在 TypeScript

关注(0)|答案(4)|浏览(110)

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

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 的变化时，我很担心。这让我觉得我的类示例被一遍又一遍地创建。我说错了吗？有什么我可以做的，以防止重新创建我的类，并使用引用代替？
我遇到了useRef，但不确定它是否适合我的情况。

typescript

来源：https://stackoverflow.com/questions/58290411/how-can-i-initialize-a-class-instance-in-a-stateless-function-component-in-react

4条答案

按热度按时间

bqf10yzr1#

回顾这一点和一些评论，我可以看到useMemo不能被信任不会再次运行HelperClass构造函数，useRef只会在**第一次渲染后设置helper，因为它的初始值不能是函数。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并且不再使用helper示例，那么你可以使用useEffect：

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

如果你确实计划在以后的某个时候使用helper示例，那么你可以使用前面的例子和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

赞(0）回复(0）举报 2023-10-22

8tntrjer2#

我会选择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
}

赞(0）回复(0）举报 2023-10-22

ergxz8rk3#

只需使用useRef，无需将其与useEffect组合合并。

const instance = useRef();
if (!instance.current) {
  instance.current = new HelperClass();
}

请参阅React了解详细信息。

赞(0）回复(0）举报 2023-10-22

zzoitvuj4#

你是对的，useRef允许你在重新呈现时保持相同的HelperClass示例

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

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

赞(0）回复(0）举报 2023-10-22

我来回答

typescript 如何在React中的无状态函数组件中初始化类示例？

4条答案

相关问题

热门标签

最新问答