跳至主要內容

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」,加我进王天唯一的读者群。

个人博客:https://itwangtian.com