javascript - 是否有语法上更好的方法来恢复构造函数状态？

Question

我有一个组件，我想在再次触发时将其恢复为构造函数值。虽然此代码有效，但是否有更好的语法编写方法？

    class DoubleClick extends Component {
    constructor(props) {
        super(props)

        this.state = {
            tagMessage: 'Hello',
            btnMessage: 'Click Me',
            on: true
        }
    }

    clickHandler = () => {
        if (this.state.on) {
            this.setState({
                tagMessage: 'Double Clicked',
                btnMessage: `I'm Clicked!`,
                on: false
            })           
        } else {
            this.setState({
                tagMessage: `Hello`,
                btnMessage: `Click Me`,
                on: true
            })                
        }
    }

    render() {
        return (
            <div>
                <h1>{this.state.tagMessage}</h1>
                <button onDoubleClick={this.clickHandler}>{this.state.btnMessage}</button>
            </div>
        )
    }
}

Answer 1

一个明显的简化是将公共(public)状态值存储在共享变量中:

const onState = {
    tagMessage: 'Hello',
    btnMessage: 'Click Me',
    on: true
};
const offState = {
    tagMessage: 'Double Clicked',
    btnMessage: `I'm Clicked!`,
    on: false
};
class DoubleClick extends Component {
    constructor(props) {
        super(props)
        this.state = onState;
    }

    clickHandler = () => {
        if (this.state.on) {
            this.setState(offState)           
        } else {
            this.setState(onState)                
        }
    }
    …
}

但是，该对象只有两个值可能暗示了更深层次的问题:您实际上并不需要那么多状态属性。一个简单的 bool 状态就足够了，消息详细信息可以放在 render 方法中:

class DoubleClick extends Component {
    constructor(props) {
        super(props)
        this.state = true;
    }

    clickHandler = () => {
        this.setState(!this.state);
    }

    render() {
        const tagMessage = this.state ? 'Hello' : 'Double Clicked';
        const btnMessage = this.state ? 'Click Me' : `I'm Clicked!`;
        return (
            <div>
                <h1>{tagMessage}</h1>
                <button onDoubleClick={this.clickHandler}>{btnMessage}</button>
            </div>
        )
    }
}