javascript - JSX Prop 不应该使用 .bind() - 如何避免使用绑定(bind)？

Question

我有一个容器，我需要更改显示表单或显示成功页面的 UI 表单。

容器有一个 state.showSuccess，我需要 MyFormModule 才能调用容器来更改状态。

下面的代码有效，但我收到以下警告:

JSX props should not use .bind()

如何在不使用 .bind() 的情况下让它工作？

...
const myPage = class extends React.Component {
  state = { showSuccess: false };
  showSuccess() {
   this.setState({
      showSuccess: true,
    });
  }
  render() {
    const { showSuccess } = this.state;
    if (showSuccess) {...}
    ....
    <MyFormModule showSuccess={this.showSuccess.bind(this)} />

Answer 1

你应该先understand WHY this is a bad practice .

这里的主要原因是 .bind 正在返回一个新的函数引用。
这将在每次 render 调用时发生，这可能会导致性能下降。

你有两个选择:

1. 使用构造函数绑定(bind)您的处理程序(这只会运行一次)。

   constructor(props) {
     super(props);
     this.showSuccess = this.showSuccess.bind(this);
   }
   

2. 或者使用 arrow functions 创建您的处理程序所以他们会使用this 的词法上下文，因此您不需要 bind 它们所有(you will need a babel plugin):

   showSuccess = () => {
     this.setState({
       showSuccess: true,
     });
   }
   

你应该不使用这个模式(正如其他人所建议的):

showSuccess={() => this.showSuccess()}

因为这也会在每个渲染器上创建一个新函数。
因此，您可能会绕过警告，但您仍在以糟糕的实践设计编写代码。

来自ESLint docs :

A bind call or arrow function in a JSX prop will create a brand new function on every single render. This is bad for performance, as it will result in the garbage collector being invoked way more than is necessary. It may also cause unnecessary re-renders if a brand new function is passed as a prop to a component that uses reference equality check on the prop to determine if it should update.