Question

这是一个使用状态和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

Answer 1

切换状态值就像反转从useState返回的当前值一样简单。

功能组件将传递给它们的道具作为参数，因此无需使用this.props。同样，要在功能组件上设置静态属性，您可以仅在函数本身上设置它们。

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

就福利而言，由您决定是否认为自己值得这样做。使用useState而不是基于类的组件并没有特别的好处，但是，如果您要开始使用其他挂钩，或者使用挂钩与第三方库集成，则可能希望将某些组件转换为功能组件，

将类组件转换为useState

1 个答案: