React中onMouseEnter={::this.mouseEnter}的::语法含义是什么

这不是React框架专属的语法，是ECMAScript规范中定义的函数上下文绑定运算符，本质是Function.prototype.bind()的语法糖，作用是自动将函数内部的this指向，绑定为运算符左侧的对象。

对应代码中的具体作用 #

你写的onMouseEnter={::this.mouseEnter}，完全等价于原生JavaScript的常规写法：
onMouseEnter={this.mouseEnter.bind(this)}

类组件场景下的设计原因 #

JavaScript中类定义的方法默认不会自动绑定实例上下文。如果直接把类方法this.mouseEnter传给React的事件处理逻辑，当事件真正触发时，方法内部的this会丢失原本指向的组件实例，变成全局对象或者严格模式下的undefined，这时方法内部调用的this.setState()就会因为找不到实例方法直接报错。
双冒号写法就是为了自动完成这个绑定操作，省去手动编写.bind(this)的重复代码。

双冒号的常见等价规则 #

• ::obj.func 等价于 obj.func.bind(obj)
• ::func 等价于 func.bind(this)，也就是将当前作用域的this作为函数的绑定上下文

注意：该语法目前没有被所有主流浏览器原生支持，在实际项目中需要搭配Babel转译才能运行；现在新项目中更常用类箭头函数属性、constructor内手动绑定的方式实现相同效果，双冒号写法已经比较少见。

内容的提问来源于stack exchange，提问作者Vanmeeganathan P K