React hooks:如何在函数组件中编写变量，这些变量在类组件中是在构造函数中初始化的

Question

我在 React 中使用 uppy，他们通常将 uppy 初始化为全局变量。在 React 中，他们允许这样做：

class MyComponent extends React.Component {
  constructor (props) {
    super(props)
    this.uppy = Uppy()
      .use(Transloadit, {})
  }
  componentWillUnmount () {
    this.uppy.close()
  }
  render () {
    return <StatusBar uppy={this.uppy} />
  }
}

如何在带有钩子的功能组件中编写它？幼稚的方法如下(没想到阅读此问题后它会起作用(：

const MyComponent = () => {
  const uppy = Uppy()
    .use(Transloadit, {})
  useEffect(() => {
    return () => uppy.close()
  })
  return <StatusBar uppy={uppy} />
}

PS：它需要在功能组件内部完成，因为我在uppy.use方法中使用了一些道具。

Answer 1

功能组件中的变量可以使用useRef钩子初始化(在此处阅读更多内容(。此外，由于您只想在卸载时运行清理功能，而不是在每次重新渲染时运行清理功能，因此您应该传递一个空[]作为第二个参数来useEffect

const MyComponent = () => {
  const uppy = useRef(Uppy()
    .use(Transloadit, {}))
  useEffect(() => {
    return () => uppy.current.close()
  }, [])
  return <StatusBar uppy={uppy.current} />
}

Answer 2

你可以这样实现。

> const MyComponent = (props) => {   let uppy;
> 
>   useEffect(() => {
>     uppy = Uppy()
>     .use(Transloadit, {});
>     return () => uppy.close()   }, [])
> 
>   return <StatusBar uppy={uppy} /> }