javascript - 为什么我们在 React 组件中使用 this.setState() 而不是 super.setState()

Question

我是 React 的新手，我注意到我们使用 this.setState() 而不是 super.setState() 请我清楚地解释为什么我们用它来调用父类(super class)方法??示例:

class Checkbox extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                checked: true
            }
            this.handleCheck = this.handleCheck.bind(this)
        }

        handleCheck() {
            this.setState({
                checked: !this.state.checked
            })
        }

        render() {
            var msg 
            if(this.state.checked) {
                msg = "checked"
            } else {
                msg = "not checked"
            }
            return (
                <div>
                    <input type="checkbox" 
                           onChange={this.handleCheck}
                           defaultChecked={this.state.checked}/>
                    <p>This box is {msg}</p>
                </div>
            )
        }
    }       

Answer 1

这就是 JavaScript 继承的工作原理。 Checkbox 子类的实例典型地继承自 React.Component 父类，this.setState === super.setState。

super.method 只有在子类中被覆盖时才应该被引用，它通常出现在被覆盖的方法本身中:

method() {
  super.method(); // inherit the behaviour from parent class
  // do something else
}

否则使用 super.method() 可以被认为是语义错误，这表明开发人员没有意识到继承机制。如果某个方法稍后将被覆盖，则它不会因此而被使用(尽管在 setState 的情况下不太可能)。

super.method() 的使用还要求开发人员了解父类的实现。如 this answer 中所述，只有父原型(prototype)方法而不是实例方法可用作 super。如果父类有实例方法，

method = () => {...}

子类将继承它作为 this.method 但不会有 super.method。