如何在反应钩子中初始化第三方库（konvajs）答案

【问题标题】：how initialize third party library (konvajs) in react hooks如何在反应钩子中初始化第三方库（konvajs）
【发布时间】：2020-04-07 14:39:35
【问题描述】：

我尝试初始化第三方库在 React 钩子中我正在使用 useEffect 但我总是得到 null 我尝试使用自定义钩子，但得到相同的结果（null）

有什么想法吗？

这是我的代码https://stackblitz.com/edit/react-rg9uov

谢谢

【问题讨论】：

标签： reactjs react-hooks konvajs konva

【解决方案1】：

您的useEffect 应该为ref 声明依赖数组，也不知道为什么使用const stage = useRef(null);？ stage 可能只是一个组件状态。

 const [stage, setStage] = React.useState();
 const ref = useRef();

 useEffect(() => {
    if(ref.current){
      setStage(new Konva.Stage({
      container: ref.current, // id of container <div>
      width: 500,
      height: 300
    }))
    }

  },[ref]);

【讨论】：

谢谢，我有一个问题，保存阶段在状态这对性能来说还不错吗？
不是真的，如果你想获取 Konva.Stage 实例，你需要将它存储在你的状态中

【解决方案2】：

您看到null 是因为console.log 在useEffect 之前运行，如果您在useEffect 的末尾添加console.log，您将看到Konva 已正确初始化。

【讨论】：