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

【问题标题】：How to convert React Class Component fields into hooks如何将 React 类组件字段转换为钩子
【发布时间】：2020-04-03 17:37:18
【问题描述】：

我知道将 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 放入状态时，它总是会重新渲染组件并丢失数据。

【问题讨论】：

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

标签： reactjs react-hooks

【解决方案1】：

使用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>
    }
}

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

您不能使用 useRef 携带更新后的 count 值，因为更新 count 时不会发生重新渲染。 useRef 用于通过多个渲染将对象持久保存在组件中。

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

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

【讨论】：