学设计在哪学,seo 工具,北京微信网站搭建费用,室内设计公司免费网站合成事件与原生事件 区别#xff1a; 1. 命名不一样#xff0c;原生用纯小写方式#xff0c;react用小驼峰的方式 原生#xff1a;onclick React的#xff1a;onClick 2. 事件处理函数的写法不一样 原生的是传入一个字符串#xff0c;react写法传入一个回调函数 3.… 合成事件与原生事件 区别 1. 命名不一样原生用纯小写方式react用小驼峰的方式 原生onclick React的onClick 2. 事件处理函数的写法不一样 原生的是传入一个字符串react写法传入一个回调函数 3. 阻止默认行为方式不同 原生return false, react中的event.preventDefault() class Toggle extends React.Component {constructor(props)super(props)this.state{ isToggleOn: true }// 为了在回调中使用this, 这个绑定是必不可少的this.handleClick this.handleClick.bind(this)handleClick(){this.setState((prevState) ({isToggleOn: !prevState.isToggleOn}))} render(){return (// class的方法默认不会绑定this。如果没有绑定this.handleClick.bind(this) 并把它传入 onClickthis的值为undefinedButton onClick{this.handleClick} // 2. 传入一个回调函数{this.state.isToggleOn ? ON : OFF}/Button // 1. onClick小驼峰写法)}} 【 拓展为什么需要绑定this 】 button按钮编译的过程React.createElement() // 伪代码
// 证明为什么绑定this
function creteElement (dom, params) {var domObj document.createElement(dom)domObj.onClick params.onClick // 后面的onClick(当前的onClick函数)赋值给前面的onClick, 这时onClick执行的作用域是外层作用域。所以return出去的值找不到this.handleClick。[所以需要绑定this指定到当前的作用域]domObj.innerHTML params.contentreturn domObj
}React.creteElement(button, {onClick: this.handleClick
}, this.state.isToggleOn ? ON : OFF) 如果不想绑定this的写法 class Toggle extends React.Component {constructor(props)super(props)this.state{ isToggleOn: true }// 法1bind绑定为了在回调中使用this, 这个绑定是必不可少的// this.handleClick this.handleClick.bind(this)handleClick () { // 法2写成箭头函数箭头函数没有作用域的this.setState((prevState) ({isToggleOn: !prevState.isToggleOn}))} render(){return (// class的方法默认不会绑定this。如果没有绑定this.handleClick.bind(this) 并把它传入 onClickthis的值为undefinedButton onClick{() this.handleClick()} // 2. 传入一个回调函数 法3{this.state.isToggleOn ? ON : OFF}/Button // 1. onClick小驼峰写法)}} . 为何React要用合成事件机制 1. 进行浏览器兼容、跨平台、事件代理移动端和pc端的一些原生事件不一定完全兼容的 2. 挂载到documnet减少内存消耗避免频繁绑定和解绑事件也方便事件统一管理 3. 避免垃圾回收、react事件池
