时间戳

首页 > 解决方案 > 如何将 React 类组件字段转换为钩子

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

问题描述

我知道将 React Class 组件转换为函数式组件的要点，但我发现了一个实例，我在互联网上搜索也知道答案。


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

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

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

忽略该类的丑陋，但是我如何使用 useRef 将计数转移到功能组件中？

我问的原因是因为在我试图转换的另一个类中，我有一个异步 PromisePool 正在运行，每次承诺完成时都会更新下载的变量，当我尝试downloaded进入状态时，它总是会重新渲染组件和丢失数据。

标签： reactjsreact-hooks

解决方案

使用useRef，您可以创建一个不会在每次重新渲染时初始化的变量。上面的组件看起来像

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

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

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

但是，您必须知道更新 ref 不会导致重新渲染，因此更新的值不会反映在渲染中

如果您希望触发重新渲染，请useState改用

export default () => {
    const [count, setCount] = useState(0);

    const updateCount = ()=> setCount(prevCount => prevCount + 1);

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

推荐阅读