（五）类式组件中的构造器与 props

老怪兽

发布于 2023-02-22 14:15:20

54000

代码可运行

文章被收录于专栏：老怪兽的前端之旅老怪兽的前端之旅

运行总次数：0

代码可运行

# 🐷一、类式组件到底要不要写构造器

不写构造器 props 的值能够正常首收到, 以下代码能够正常运行

class Person {

    static propTypes = {
        age: PropTypes.number
    }

    static defaultProps = {
        age: 18
    }
}

ReactDOM.render(<Person/>, document.getElmentById('test'))

写构造器 constructor 值也能正常收到，以下代码也能够正常运行

class Person {
    constructor(props) {
        super(props)
        console.log(props)
    }

    static propTypes = {
        age: PropTypes.number
    }

    static defaultProps = {
        age: 18
    }
}

ReactDOM.render(<Person/>, document.getElmentById('test'))

# 🐣二、写不写构造器的区别是什么

通常，在 React 中，构造函数仅适用于以下两种情况

class Person extends React.Component {
    constructor() {
        // 初始化状态
        this.state = {key: value}

        // 解决 fun this 指向的问题
        this.fun = this.fun.bind(this)
    }
    ...
}

以上代码是在 constructor 构造器中写的，以下代码是简写形式，赋值语句的写法

class Person extends React.Component {
    state = {key: value}
    fun = () => {}
    ...
}

# 🐷三、类中的构造器到底有什么作用

如果要写构造器，就必须要接收 props 参数，并且通过 super 传递到他的父类，否则可能会出现以下的 bug

如果在类组件中写了 constructor 构造函数, 但是没有接收 props 参数，并且也没有通过 super 触底到父类，就会出现 undefined

写了构造器 constructor 没有接收 props

class Person  {
    constructor() {
        super()
        console.log(this.props)     // undefined
    }
    ...
}

写了构造器 constructor 接收 props

class Person extends React.Component {
    constructor(props) {
        super(props)
        console.log(this.props)     // 实例对象上的 props
    }
    ...
}