将 class 组件转换为 useState

Question

这是一个使用 state 和 setState 的 class 组件，但我想使用 useState。此外，除了能够使用功能组件而不是 class 基本组件之外，还有什么好处？

    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 返回的当前值一样简单。

函数式组件接收传递给它们的 props 作为参数，因此无需使用 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 而不是基于 class 的组件没有什么特别的好处，但是如果你想开始使用其他挂钩，或者使用挂钩与第三方库集成，你可能希望转换你的一些组件在必要时添加到功能性的。

将 class 组件转换为 useState

converting class component to useState

react-hooks

use-state