Question

我知道将React Class组件转换为功能组件的要点，但是我发现一个实例，我也不是在Internet上搜索的答案。


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置于状态时，都会更新下载的变量，它将始终重新呈现组件并丢失数据。

Answer 1

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

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

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

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

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

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

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

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

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

Answer 2

这是将组件移至功能组件的直接示例。只要未完全重新安装组件，该计数就会一直使用。即使重新渲染，它也会保留。

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

除非您通过使用其他键或更改其上方的dom来重新安装此组件（即，在您的诺言完成后添加包装div），否则它应该可以正常工作（但在重新安装的情况下，类组件也可以）重置计数器）。

Answer 3

您不能用useRef携带count的更新值，因为更新count时不会重新呈现。 useRef用于将对象持久保留在多个渲染中的组件中。

针对PromisePools问题的可能解决方案：不要将父级转换为功能组件，而应使用类组件中的shouldComponentUpdate（）生命周期方法来防止在状态更改时重新呈现子组件。

有关更多信息，请查看生命周期文档： https://reactjs.org/docs/react-component.html#shouldcomponentupdate

如何将React Class Component字段转换为钩子

3 个答案: