reactjs - react Hook : How to write variables in functional components that in class components were initialized in the constructor

Question

我将 uppy 与 React 一起使用，它们通常将 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} />
  }
}

如何在带有钩子(Hook)的功能组件中编写它？天真的方法如下(没想到在阅读 this issue 后它会起作用):

const MyComponent = () => {
  const uppy = Uppy()
    .use(Transloadit, {})

  useEffect(() => {
    return () => uppy.close()
  })

  return <StatusBar uppy={uppy} />
}

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

Answer 1

功能组件中的变量可以使用 useRef 钩子(Hook)进行初始化(了解更多 here )。此外，由于您只想在卸载时运行清理函数，而不是在每次重新渲染时运行，因此您应该将空的 [] 作为第二个参数传递给 useEffect

const MyComponent = () => {
  const uppy = useRef(Uppy()
    .use(Transloadit, {}))

  useEffect(() => {
    return () => uppy.current.close()
  }, [])

  return <StatusBar uppy={uppy.current} />
}