Как преобразовать поля React Class Component в хуки

Question

Я знаю суть преобразования компонентов класса React в функциональные компоненты, но я нашел случай, когда я ни мой поиск по inte rnet не знаю ответа.

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

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

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

Игнорируем уродство класс, но как мне перенести счет в функциональный компонент с помощью useRef?

Причина, по которой я спрашиваю, заключается в том, что в другом классе, который я пытаюсь преобразовать, у меня работает asyn c PromisePool, который обновляет загруженную переменную каждый раз, когда обещание завершается, и когда я пытался перевести downloaded в состояние, он всегда переставлял компонент и терял данные.

Answer 1

С помощью useRef вы можете создать переменную, которая не инициализируется при каждом повторном рендеринге. Вышеупомянутый компонент будет выглядеть как

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

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

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

Однако вы должны знать, что обновление ссылки не вызывает повторного рендеринга, и, следовательно, обновленное значение не будет отражаться в рендере

Если вы wi sh для запуска повторного рендеринга, используйте useState вместо

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

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

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

Answer 2

Вы не можете переносить обновленное значение счетчика с помощью useRef, так как при обновлении счетчика повторное отображение не происходит. useRef предназначен для сохранения объекта в компоненте в течение нескольких визуализаций.

Возможное решение вашей проблемы PromisePools: вместо преобразования родительского объекта в функциональный компонент используйте метод жизненного цикла shouldComponentUpdate () в компоненте класса, чтобы предотвратить повторное отображение дочернего компонента при изменении состояния. ,

Для получения дополнительной информации ознакомьтесь с документацией по жизненному циклу: https://reactjs.org/docs/react-component.html#shouldcomponentupdate

Answer 3

Это прямой пример перемещения компонента в функциональный компонент. Счет будет использоваться до тех пор, пока компонент не перемонтируется полностью. Он останется даже после повторного рендеринга.

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

Если вы не перемонтируете этот компонент, используя другой ключ или измените dom над ним (то есть добавляете div обтекания после завершения вашего обещания), тогда это должно работает нормально (но в случае перемонтирования компонент класса также сбрасывает свой счетчик).