react 编码规范
大约 1 分钟
函数名称
按照惯例,通常将事件处理程序命名为 handle,后接事件名。你会经常看到 onClick={handleClick},onMouseEnter={handleMouseEnter} 等。
传递一个函数(正确) | 调用一个函数(错误) |
---|---|
<button onClick={() => alert('...')}> | <button onClick={alert('...')}> |
如果按如下方式传递内联代码,并不会在点击时触发,而是会在每次组件渲染时触发:
// 这个 alert 在组件渲染时触发,而不是点击时触发!
<button onClick={alert('你点击了我!')}>
如果你想要定义内联事件处理函数,请将其包装在匿名函数中,如下所示:
<button onClick={() => alert('你点击了我!')}>
参数传参:
1、箭头函数中执行
function handeClick(data){
alert(data)
}
<button onClick={()=>handeClick('点我')}> 点我 </butotn>
箭头函数,都会创建一个新的函数实例,因此容易引起性能问题。但是在大多数情况下,性能影响并不显著。
2、推荐写法:bind
方法
在这种情况下,我们使用 Function.prototype.bind 方法来绑定 handleClick 函数的上下文为 null,并传递参数 param
function handeClick(data) {
alert(data);
}
<button onClick={handeClick.bind(null, "点我 ")}>点我</button>;
3、错误写法
以下代码中 handleClick 会在渲染时立即执行
<button onClick={handeClick('韩庆元')>点我</button>
这种行为与 React 的事件处理机制不一致。
在 React 中,事件处理函数应该是一个函数引用,而不是一个函数的调用结果。当你使用 button onClick={handeClick('韩庆元')} 这样的方式时,实际上会立即执行 handeClick('韩庆元') 函数,并将其返回值作为事件处理函数,而不是绑定函数本身。
读者朋友好呀,我是王天~ 😊
如文章有错误或者不严谨的地方,期待给于指正,万分感谢。🙇
如果喜欢或者 有所启发,欢迎 star,对作者也是一种鼓励👏
微信:「wangtian3111」,加我进王天唯一的读者群。