什么是";这个";关键字do在bind()函数内部

Question

我有以下代码：

import "./styles.css";
export default function App() {
const handleOnClick = (index) => {
console.log(index);
}
return (
<div className="App">
<ul>
<li onClick={handleOnClick.bind(this, 1)}>list one</li>
<li onClick={handleOnClick.bind(this, 2)}>list two</li>
</ul>
</div>
);
}

每次单击列表时，handleClick函数都会获取传递给它的索引

我想知道"；这个"；在这个例子中参考？为什么我们需要使用bind((并传递"；这个"；里面？

Answer 1

我想知道什么是"这个"；在这个例子中参考？

由于以下几个原因，没有任何用处。

• App是函数组件，而不是类组件，因此没有有用的this值
• handleOnClick是一个箭头函数，因此bind的第一个自变量没有作用
• handleOnClick内部不使用this，所以即使它不是箭头函数，绑定也不会有任何作用

this的值是完全任意的。它的存在只是为了使bind的第一个参数有一个值。使用null会更习惯。

在Class组件中，bind用于确保在将方法传递给单击事件处理程序时，this继续指向组件而不是DOM元素(通常是为了使this.setState工作(。

---

函数组件的一个很好的例子是尽量减少在每次渲染中创建新函数，这样真实DOM中的click事件处理程序就不需要在每次渲染时更新。

这将通过使用useCallback来实现，使得handleOnClick在每次渲染时不被赋予新值，并且不使用bind(因为bind创建新函数(。

由于您希望传递一个不同的值作为参数，因此通过将可单击元素分解为单独的组件并将值作为道具传递，可以最干净地实现这一点。

此外，"列表项"不是为点击而设计的。除其他外，键盘导航无法访问它们，屏幕阅读器也不会宣布它们可以点击。您应该使用设计为交互式的元素。

export default function App() {
return (
<div className="App">
<ul>
<Item index={1} label="list one" />
<Item index={2} label="list two" />
</ul>
</div>
);
}
const Item = ({ index, label }) => {
const handleOnClick = useCallback(() => {
console.log(index);
}, []);
return <li><button onClick={handleOnClick}>{label}</button></li>
}

Answer 2

bind是一个可变方法，它需要上下文(调用函数时this将取的值(作为第一个参数。bind的所有其他参数将等于被调用函数的参数。

在您的情况下，被调用的函数没有使用this，但您仍然需要传递一些参数作为第一个参数，即使没有使用该值。编写该脚本的人决定使用调用方的外部this，但如果将this替换为任何其他值，如null或undefined，则不会发生任何更改。