Reactjs 如何将React类组件字段转换为钩子

我知道将React类组件转换为功能组件的要点，但我发现了一个实例，我和我在internet上的搜索都不知道答案

export default class Counter extends Component<Props, State> {
    count = 0

    updateCount = ()=> this.count +=1

    render() {
        return <div onClick={this.updateCount}>{this.count}</div>
    }
}

导出默认类计数器扩展组件{
计数=0
updateCount=（）=>this.count+=1
render（）{
返回{this.count}
}
}

忽略这个类的丑陋之处，但是如何使用useRef将计数带入一个功能组件中呢

---

我问这个问题的原因是，在我试图转换的另一个类中，我运行了一个异步PromisePool，它会在每次承诺完成时更新下载的变量，当我试图将

下载的

置于状态时，它总是会重新加载组件并丢失数据。

With

useRef

，可以创建未在每次重新渲染时初始化的变量。上面的组件看起来像

export default () => {
    const count = useRef(0);

    const updateCount = ()=> count.current +=1

    render() {
        return <div onClick={updateCount}>{count}</div>
    }
}

---

这是将组件移动到功能组件的直接示例。只要组件未完全重新装载，计数将保持使用状态。即使在重新渲染后，它仍将保持不变

export default function Counter(){
    const [count,setCount] = useState(0);
    return <div onClick={()=>setCount(count=>count+1)}>{count}</div>
}

导出默认函数计数器（）{
const[count，setCount]=useState（0）；
返回setCount（count=>count+1）}>{count}
}

---

除非通过使用不同的键或更改其上方的dom（即，在承诺完成后添加包装div）来重新装载此组件，否则这应该可以正常工作（但在重新装载的实例中，类组件也会重置其计数器）.

您不能使用useRef携带count的更新值，因为更新count时不会出现重新加载。useRef用于在多个呈现上持久化组件中的对象

PromisePools问题的一个可能解决方案是：不要将父组件转换为功能组件，而是在类组件中使用shouldComponentUpdate（）生命周期方法，以防止在状态更改时重新启动子组件

有关更多信息，请查看生命周期文档：

---

尽量靠近原始部件。您提供的示例没有意义，因为它在更新计数后不会重新呈现。显示PromisePool如何更新以及如何影响渲染结果。

export default function Counter(){
    const [count,setCount] = useState(0);
    return <div onClick={()=>setCount(count=>count+1)}>{count}</div>
}