关于react中this指向丢失的问题

大家都知道在react中，如果我们不去绑定this，this指向会丢失，指向undefind，这是为什么呢？
下面用一段代码来解释一下。

<style>
    #box{
         width: 50px;
         height: 50px;
         background: red;
     }
</style>

</body>
<div id="box">11111</div>
<script>
//获取到div元素
let div = document.getElementById("box")
//定义一个类
class Person{
    constructor(tag){
        this.tag = tag
    }
    init(){
        console.log(this);  
        // console.log(this.tag);
    }
    click(){
        this.tag.onclick = this.init
    }
}
//创建一个实例
let a = new Person(div)
//a.init()//这里的this指向person类
a.click()
</script>

首先定义一个类，在类里面定义了一个init方法，当我们执行init的方法的时候，我们可以看到这里的this是指向person这个类的，但是当我调用click方法的，即：当我点击这个div的时候，我让他打印this，这个时候this指向的是div这个元素，但是在react规定类的方法必须要指向person类，但是这里this指向div,所以发送冲突，this丢失了，所以我们在react中需要绑定this指向，可以通过bind绑定，或者在constructor()中初始化this指向，或者使用箭头函数，让this指向函数创建时的作用域上下文。