преобразование компонента класса в useState - PullRequest
Новая
       9

преобразование компонента класса в useState

0 голосов
/ 04 февраля 2020

Это компонент класса, который использует state и setState, но я бы хотел использовать useState. Кроме того, каковы преимущества использования функционального компонента, а не базового компонента класса? 

    import React, {Component} from "react"

    class Toggler extends Component {
        state = {
            on: this.props.defaultOnValue
        }

        toggle = () => {
            this.setState(prevState => {
                return {
                    on: !prevState.on
                }
            })
        }
static 
    defaultProps = {
        defaultOnValue: false
    }

        render() {
            return (
                <div>
                    {this.props.render(this.state.on, this.toggle)}
               </div>
            )
        }
    }

    export default Toggler

Пока ... 

    import React, {useState} from "react"

    function Toggler() {
        const [on, setOn] = useState(this.props.defaultOnValue)

        toggle = () => {
            setOn( {/* what should go here? */} )

        }
static 
    defaultProps = {
        defaultOnValue: false
    }

        return (
                <div>
                    {this.props.render(on, toggle)}
                </div>
            )
    }

    export default Toggler

1 Ответ

1 голос
/ 04 февраля 2020

Переключение значения вашего состояния так же просто, как инвертирование текущего значения, возвращенного из useState.

Функциональные компоненты получают реквизиты, переданные им в качестве аргумента, поэтому нет необходимости использовать this.props. Кроме того, чтобы установить свойства stati c для функционального компонента, вы можете просто установить их для самой функции. 

function Toggler(props) {
  const [on, setOn] = useState(props.defaultOnValue)
  const toggle = () => {
    setOn(!on)
  }
  return <div>{props.render(on, toggle)}</div>
}

Toggler.defaultProps = {
  defaultOnValue: false
}

export default Toggler

С точки зрения льгот, вам решать, считаете ли вы, что оно того стоит для вашего случая. Нет особого преимущества c в использовании useState, а не в компоненте, основанном на классах, однако, если вы хотите начать использовать другие ловушки или интегрироваться со сторонними библиотеками, используя ловушки, вы можете sh преобразовать некоторые из ваших компонентов к функциональным, где это необходимо.

...