JSX道具不应该使用.bind() - 如何避免使用bind？

Question

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

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

以下代码有效,但我收到以下警告:

"JSX道具不应该使用.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

你应该首先明白为什么这是一个不好的做法.

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

你有两个选择:

1. 将构造函数用于bind处理程序(这将只运行一次).

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

2. 或者使用箭头函数创建处理程序,以便它们使用词汇上下文this,因此您根本不需要bind它们(您将需要一个babel插件):

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

你应该不使用这种模式(如其他建议):

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

因为这也将在每个渲染上创建一个新函数.
因此,您可以绕过警告但仍在编写错误的练习设计中.

从ESLint文档:

JSX prop中的绑定调用或箭头函数将在每个渲染上创建一个全新的函数.这对性能不利,因为它会导致垃圾收集器的调用方式超出必要的范围.如果将全新的函数作为prop传递给使用对prop的引用相等性检查以确定是否应该更新的组件,它也可能导致不必要的重新呈现.