React--6: 类组件

1. 创建类组件

创建一个类

class MyComponent {

}

那么 现在可以说他跟React毫无关系。那么怎么让他和React有关系那？
让他继承自React就好了

class MyComponent extends React.Component{

}

构造器 不需要写，官方也没写。render()必须写，并且有返回值。

// 1.创建类组件
class MyComponent extends React.Component{
    render(){
        return <h2>我是用类定义的组件（适用于【复杂组件】的定义）</h2>
    }
}
// 这两个render没关联
ReactDOM.render(<MyComponent/>,document.getElementById('root'))

2. 🤔 思考一下

• render是放在哪里的？-------- 类的原型对象上，供实例使用。
• 那么问题来了实例呢？
  也就是说 我们 new MyComponent()了吗？并没有。 我们看到 render 确实在组件实例上。

• 执行 ReactDOM.render(,document.getElementById(‘root’))
  之后发生了什么？

  • 首先，React解析组件标签，找到MyComponent组件。
  • 发现组件是使用类定义的，随后new出该类的实例，并通过该实例调用到原型上的 render 方法。
  • 将 render 返回的虚拟DOM转为真实DOM，随后呈现在页面上。

• render中的 this 是谁？
  MyComponent 的实例对象（MyComponent（类的）组件实例对象）。

• 上图的props、state等这些是哪来的呢？
  我们并没有在我们自定义的类组件中写构造器 constructor。所以说这些都是继承自 React 的。