React组件React组件的创建 React推出后，出于不同的原因先后出现两种定义React组件的方式函数式组件（无

React组件的创建

React推出后，出于不同的原因先后出现两种定义React组件的方式

类式组件

render方法：是用来生成虚拟DOM的使用类创建组件，必须继承React内置的一个组件React.Component

class App extends React.Component{
    constructor(){
        super()
    }
    render(){
        return (<h1>hello</h1>)
    }
}

注意：

使用类式组件，是React帮我们进行了new一个对象
- 是由React帮我们new了一个对象，然后使用index.js里的render方法，React会帮我们调用App这个组件里的render方法
constructor()方法，可以省略
必须要有render（）方法，用于生成虚拟DOM，该方法定义在类的原型上，供实例使用
实例在哪？
- 在调用ReactDOM.render()之后发生了什么？
- react解析组件标签，找到组件。
- 发现组件是一个类定义的组件，随后new出来一个该类的实例，并调用这个实例原型上的render方法。
- 将render方法返回的虚拟DOM转为真实DOM，随后显示在页面中。
由于render方法是由类的实例调用的，所以render中的this，指向的是类的实例对象即组件对象。

正常情况下方法中的this指向调用该方法的实例对象，但是在React中没有直接调用，而是以形参的形式将该方法函数传入，作为回调函数由React直接调用。
onClick是作为了虚拟DOM的属性，而不是一个事件，真正触发点击并且调用的是React框架帮我们去调用的，所以真正调用的是React，Raect把它当作了回调函数调用，没有通过this，同时ES6类中的方法默认开启局部严格模式，导致this不能指向window（因为严格模式下this不能指向window），所以this为undefinde，导致丢失。onClick={this.handleclick}只是一个属性=值，handleclick是作为回调函数传到了React里了

constructor(){
    super()
    this.handleclick=this.handleclick.bind(this)
}

onClick={this.handleclick.bind(this)}

onClick={() => this.handleclick()}

解释：render方法里面的this指向的就是组件实例对象，而在render里让this调用handleclick调用它自己的方法，谁调用这个方法，该方法里的this就指向谁。

<div onClick={this.handleclick}></div>
handleclick = () => {
    console.log(this)
    alert(1)
}