Javascript 将react类组件重写为功能组件

我尝试使用一个库，但它只有一个，它是在React类组件中编写的

从“React”导入React；
从“@pqina/flip”导入勾号；
导入“@pqina/flip/dist/flip.min.css”；
导出默认类Flip扩展React.Component{
建造师（道具）{
超级（道具）；
这是。_tickRef=React.createRef（）；
}
componentDidMount（）{
this.\u tickInstance=Tick.DOM.create（this.\u tickRef.current{
值：this.props.value
});
}
componentDidUpdate（）{
如果（！this.\u实例）返回；
this._tickInstance.value=this.props.value；
}
组件将卸载（）{
如果（！this.\u实例）返回；
勾选DOM.destroy（此为当前选项）；
}
render（）{
返回(
打上钩
);
}
}

我想将库用作钩子组件，以下代码是我重写的：

从“@pqina/flip”导入勾号；
导入“@pqina/flip/dist/flip.min.css”；
从“React”导入React，{useffect，useRef，useState}；
接口IFilProps{
值：数字
}
const Filp:React.FC=（道具）=>{
const ref=useRef（null）；
const[tickInstance，setTickInstance]=useState工作正常，但我的钩子代码无法正常工作：当我单击“+1”按钮时，翻转组件将不加1。您能帮我找出原因吗？
您应该使用ref而不是state来存储
tickInstance
。
通常，如果要替换以前存储在构造函数中的变量，建议在将基于类的组件重写为函数时将其存储为refs

export default function Flip({value}) {
  const tickRef = React.useRef();
  let tickInstance = React.useRef()


  useEffect(()=>{
    tickInstance.current = Tick.DOM.create(tickRef.current, {
      value
    });

    return () =>  Tick.DOM.destroy(tickRef.current);
  },[])

  useEffect(()=>{
    if (!tickInstance.current) return;
    tickInstance.current.value = value;
  },[value])

  return (
    <div ref={tickRef} className="tick">
    <div data-repeat="true" aria-hidden="true">
      <span data-view="flip">Tick</span>
    </div>
  </div>
  )
}

导出默认函数翻转（{value}）{
const tickRef=React.useRef（）；
让tickInstance=React.useRef（）
useffect（（）=>{
tickInstance.current=Tick.DOM.create（tickRef.current{
价值
});
return（）=>Tick.DOM.destroy（tickRef.current）；
},[])
useffect（（）=>{
如果（！tickInstance.current）返回；
tickInstance.current.value=值；
}，[value]）
返回(
打上钩
)
}

您应该使用ref而不是state来存储
tickInstance
。
通常，如果要替换以前存储在构造函数中的变量，建议在将基于类的组件重写为函数时将其存储为refs

export default function Flip({value}) {
  const tickRef = React.useRef();
  let tickInstance = React.useRef()


  useEffect(()=>{
    tickInstance.current = Tick.DOM.create(tickRef.current, {
      value
    });

    return () =>  Tick.DOM.destroy(tickRef.current);
  },[])

  useEffect(()=>{
    if (!tickInstance.current) return;
    tickInstance.current.value = value;
  },[value])

  return (
    <div ref={tickRef} className="tick">
    <div data-repeat="true" aria-hidden="true">
      <span data-view="flip">Tick</span>
    </div>
  </div>
  )
}

导出默认函数翻转（{value}）{
const tickRef=React.useRef（）；
让tickInstance=React.useRef（）
useffect（（）=>{
tickInstance.current=Tick.DOM.create（tickRef.current{
价值
});
return（）=>Tick.DOM.destroy（tickRef.current）；
},[])
useffect（（）=>{
如果（！tickInstance.current）返回；
tickInstance.current.value=值；
}，[value]）
返回(
打上钩
)
}

将实例放在ref而不是state上可能会有帮助。将实例放在ref而不是state上可能会有帮助。这是可行的，但会触发一个eslint警告，说明第一个效果的依赖项列表中没有
值。不确定如何最好地避免它，因为它显然不应该放在依赖项列表中。我不是苏或者是如何避免。我非常喜欢eslint，但在处理钩子时，它并没有那么好的效果，特别是在指示有关依赖项数组中变量的警告时。这是有效的，但会触发一个关于第一个效果的依赖项列表中没有
值的eslint警告。不确定如何最好地避免它，因为它显然不应该出现在依赖项列表中。我也不知道如何避免它。我非常喜欢eslint，但在处理钩子时，它并没有那么好地工作很多次，特别是在指示关于依赖项数组中变量的警告时。