在 React 中只创建和销毁一次事物的最佳方法？ 来自 usestate 的未使用的 setter 好吗？

如何解决在 React 中只创建和销毁一次事物的最佳方法？ 来自 usestate 的未使用的 setter 好吗？

我有一个巨大的游戏对象，它在渲染时附加到画布上。我想在创建组件时只创建一次，直到组件销毁时才删除它。

（如果游戏被定期创建和销毁，那么用户将失去他们的游戏状态。假设我不想编辑游戏以将存储放在 Context 或 Redux 或其他东西中，并想按原样离开游戏..）

我认为至少有三种方法可以做到这一点：

function Game1() {
    const [world,_] = useState(createWorld) // unused setter
    useEffect(() => world.destroy,[])
    const attachCanvas = useCallback(canvas => world.start(canvas))
    return <canvas ref={attachCanvas}/>
}

function Game2() {
    const [world,setWorld] = useState()
    useEffect(() => {
        const newWorld = createWorld()
        setWorld(newWorld)
        return newWorld.destroy
    },[]) // <- adding setWorld and newWorld dependencies can create loops
    const attachCanvas = useCallback(canvas => world.start(canvas))
    return <canvas ref={attachCanvas}/>
}

function Game3() {
    // Works but docs say that a memo may be called twice if the engine feels like it
    const world = useMemo(createWorld,[]) 
    ...
}

Game1 有什么问题吗？有没有第四种更好的方法可以只创建和销毁一次状态？

解决方法

你的第一个例子很好。

然而，有时编写基于类的 React 组件更容易。您可以使用类构造函数将您的游戏世界初始化为类成员属性，然后使用 componentWillUnmount 生命周期钩子将其销毁。

class Game extends React.Component {
  constructor(props) {
    super(props);

    this.canvasRef = React.createRef();
    this.world = createWorld();
  }

  componentDidMount() {
    this.world.start(canvasRef.current);
  }

  componentWillUnmount() {
    this.world.destroy();
  }

  render() {
    return <canvas ref={canvasRef} />;
  }
}

,

不，可以创建一次永久状态并且永不更新它。您也不需要解构 setter，因此您的代码可以是 const [world] = useState(createWorld);

,

我发现的最后一个选项是编写自定义挂钩或使用预先存在的挂钩，例如 ahooks 的 useCreation，它也允许依赖。一个简单的自定义钩子可能如下所示：

function useOnce(factory,makeCleanup) {
    const [x] = useState(factory)
    useEffect(makeCleanup(x),[])
    return x
}

,

这是在 React 钩子中创建和销毁变量的最佳方式。

function Game1(props) {
  const [world,setWorld] = useState("");
  // Similar to componentDidMount and componentDidUpdate
  useEffect(() => {
    setWorld("hello"); // Now world will be equals to "hello"
  });
  // Similar to componentWillUnmount
  useEffect(() => {
    // Specify how to clean up after this effect:
    return function cleanup() {
      setWorld(""); // Reset state here
    }
  });
}