既然是组件实例的属性,那么函数式组件连this都没有自然也没有这些属性。

但是,react hooks 使函数式组件也有了这些属性,并且以后创建函数式组件为主,将在后面章节了解。

Untitled

1⃣ State

Untitled

react 在帮我们new出的组件对象state 默认是null ,无法满足我的要求,我得想办法给他赋值

我需要初始化这个state 给他赋值 所以需要写上构造器constructor 可以state赋值。

但是问题来了 constructor 的参数给什么的喃,component不是我自己new的 ,无法在new对象的时候传值。

那么, react 在帮我们new 对象的时候肯定传了一些值给构造器

参考下官方文档

上面的为老板 文档 新版的都是函数式的了。

上面的为老板 文档 新版的都是函数式的了。

可以猜想 在new MyComponent 的时候 先new他的父类 React.Component

这个父类React.Component 创建的时候给了一个props的参数,根据上面类的基础知识,我们使用super 就能接受到props的值

<aside> 🔥 当一个类的实例被创建时,会首先调用其父类的构造器,然后再调用自身的构造器

</aside>

代码:

/*
       react 在帮我们new  React.Component 对象的时候传了Props
    */
     class Weather extends React.Component {
        //React.Component 需要props 参数 所以作为资料的Weather 创建的时候也需要
        constructor(props) {
            super(props)
            //state 是个{} 对象
            this.state={
                weather:"heavy rain",
                person:'私'
            }
        }
        render(){
            console.log(this);
            return <h2>{this.state.weather}</h2>
        }
    }

    ReactDOM.render(<Weather />,document.getElementById("app"),);