Question

我熟悉Javascript函数 bind 。但是我不明白为什么在跟随React.js片段后这个再次绑定到这个。是构造函数的常见问题，因为构造函数中的 this 根据用途可以有不同的值吗？

提前感谢您的回复

class QuotesLibrary extends React.Component {
  constructor(props) {
    super(props);
    this.search = debounce(this.search.bind(this), 300);
  }
  search(searchTerm) {
    this.props.relay.setVariables({searchTerm});
  }
  render() {
    return (
      <div className="quotes-library">
        <SearchForm searchAction={this.search} />
        <div className="quotes-list">
          {this.props.library.quotesConnection.edges.map(edge =>
            <Quote key={edge.node.id} quote={edge.node} />
          )}
        </div>
      </div>
    )
  }
}

Answer 1

你不应该使用Function.bind（this）：你应该使用箭头功能。箭头函数绑定到类（因此绑定到组件）。

class QuotesLibrary extends React.Component {
  constructor(props) {
    super(props);
    this.search = debounce(this.search, 300);
  }

  search = (searchTerm) => {
    this.props.relay.setVariables({searchTerm});
  }

  render() {
    return (
      <div className="quotes-library">
        <SearchForm searchAction={this.search} />
        <div className="quotes-list">
          {this.props.library.quotesConnection.edges.map(edge =>
            <Quote key={edge.node.id} quote={edge.node} />
          )}
        </div>
      </div>
    )
  }
}

Answer 2

它将函数内部的键this.search.bind(this)绑定到React Component的上下文是什么this，它的基本含义是每当你尝试访问{的属性时{1}}，您可以像React Component一样访问它，因为this.props将引用React Component的上下文而不是函数本身。

在this之前this.search的重要性在于它正在尝试访问位于bind的{{1}}中的函数search，因此您只绑定一次而不是两次。

我希望我能够正确解释这种情况

Answer 3

你为什么再说＃34;？你只绑定一次，而不是两次。

来自_underscores库的去抖取一个函数并返回另一个函数，因此要在搜索函数中获取this上下文，需要将其绑定到search。

它与构造函数中正常的绑定函数完全相同。

Answer 4

以下是差异如何运作的示例 -

正如您所看到的，第一个调用将记录'undefined'，第二个调用将记录'Bar'，因为第一个调用没有绑定，并且间接调用函数（作为promise结果或回调）不运行时保持对this的引用 - bind告诉它this指的是什么。

function debounce(fn, to) {
    setTimeout(fn)
}

class Foo {
  constructor () {
    this.fullName = 'Bar'
  }
  
  speak () {
    console.log("My name is", this.fullName)
  }
  
  test () {
    debounce(this.speak, 1000) // undefined
    debounce(this.speak.bind(this), 2000) // "Bar"
    
  }
}

let foo = new Foo()

foo.test()

构造函数中的bind（this）在ReactJS中做了什么

4 个答案: