[译] React 组件中绑定回调

Lin_R 发布于2019-08-22 10:33 / 2290人阅读

摘要：好的方案在构造函数中仍然使用，现在我们只要绕过每次渲染都要生成新的函数的问题就可以了。我们可以通过只在构造函数中绑定回调的上下问来解决这个问题，因为构造函数只会调用一次，而不是每次渲染都调用。

原文：Binding callbacks in React components

在组件中给事件绑定处理函数是很常见的，比如说每当用户点击一个button的时候使用console.log打印一些东西。

class DankButton extends React.Component {
  render() {
    return 
  }
  
  handleClick() {
    console.log(`such knowledge`)
  }
}

很好，这段代码会满足你的需求，那现在如果我想在handleClick()内调用另外一个方法，比如logPhrase()

class DankButton extends React.Component {
  render() {
    return 
  }
  
  handleClick() {
    this.logPhrase()
  }
  
  logPhrase() {
    console.log("such gnawledge")
  }
}

这样竟然不行，会得到如下的错误提醒

TypeError: this.logPhrase is not a function at handleClick (file.js:36:12)

当我们把handleClick绑定到 onClick的时候我们传递的是一个函数的引用，真正调用handleClick的是事件处理系统。因此handleClick 的this上下文和我门想象的this.logPhrase()是不一样的。

这里有一些方法可以让this指向DankButton组件。

不好的方案 1：箭头函数

箭头函数是在ES6中引入的，是一个写匿名函数比较简洁的方式，它不仅仅是包装匿名函数的语法糖，箭头函数没有自己的上下问，它会使用被定义的时候的this作为上下文，我们可以利用这个特性，给onClick绑定一个箭头函数。

class DankButton extends React.Component {
  render() {
    // Bad Solution: An arrow function!
    return 
  }
  
  handleClick() {
    this.logPhrase()
  }
  
  logPhrase() {
    console.log("such gnawledge")
  }
}

然而，我并不推荐这种解决方式，因为箭头函数定义在render内部，组件每次重新渲染都会创建一个新的箭头函数，在React中渲染是很快捷的，所以重新渲染会经常发生，这就意味着前面渲染中产生的函数会堆在内存中，强制垃圾回收机制清空它们，这是很花费性能的。

不好的方案 2：this.handleClick.bind(this)

另外一个解决这个问题的方案是，把回调绑定到正确的上下问this

class DankButton extends React.Component {
  render() {
    // Bad Solution: Bind that callback!
    return 
  }
  
  handleClick() {
    this.logPhrase()
  }
  
  logPhrase() {
    console.log("such gnawledge")
  }
}

这个方案和箭头函数有同样的问题，在每次render的时候都会创建一个新的函数，但是为什么没有使用匿名函数也会这样呢，下面就是答案。

function test() {}

const testCopy = test
const boundTest = test.bind(this)

console.log(testCopy === test) // true
console.log(boundTest === test) // false

.bind并不修改原有函数，它只会返回一个指定执行上下文的新函数（boundTest和test并不相等），因此垃圾回收系统仍然需要回收你之前绑定的回调。

好的方案：在构造函数（constructor）中bind handleClick

仍然使用 .bind ，现在我们只要绕过每次渲染都要生成新的函数的问题就可以了。我们可以通过只在构造函数中绑定回调的上下问来解决这个问题，因为构造函数只会调用一次，而不是每次渲染都调用。这意味着我们没有生成一堆函数然后让垃圾回收系统清除它们。

class DankButton extends React.Component {
  constructor() {
    super()
    // Good Solution: Bind it in here!
    this.handleClick = this.handleClick.bind(this)  
  }
  
  render() {
    return 
  }
  
  handleClick() {
    this.logPhrase()
  }
  
  logPhrase() {
    console.log("such gnawledge")
  }
}

很好，现在我们的函数被绑定到正确的上下文，而且不会在每次渲染的时候创建新的函数。

如果你使用的是React.createClass而不是ES6的classes，你就不会碰到这个问题，createClass生成的组件会把它们的方法自动绑定到组件的this，甚至是你传递给事件回调的函数。

私有云混合云 com组件绑定域名 python中回调函数 js中回调函数问题在php中使用组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90820.html

【译】Handling Events

摘要：如果你使用实验性属性初始化语法，你能用这方法来正确绑定回调函数的绑定这语法在中默认支持。然而，如果这回调函数是作为一个传递到更下一级的组件中的时候，些组件可能会做一个额外的重新渲染。下面是react官方文档的个人翻译，如有翻译错误，请多多指出原文地址：https://facebook.github.io/re... Handling events with React element...

sugarmo 2019-08-20 14:47 评论0 收藏0
【译】一个小时搭建一个全栈Web应用框架（下）——美化与功能

摘要：点击直达前文译一个小时搭建一个全栈应用框架上如果没有，但还是要继续学习本教程，可以到我的页面下载代码。从服务器返回随机语言的每当我们与服务器上的端点进行通话时，为了能够请求一个随机的欧洲语言，必须更改文件中的功能。翻译：疯狂的技术宅原文标题：Creating a full-stack web application with Python, NPM, Webpack and Reac...

Luosunce 2019-08-20 19:05 评论0 收藏0
【译】一个小时搭建一个全栈Web应用框架（下）——美化与功能

摘要：点击直达前文译一个小时搭建一个全栈应用框架上如果没有，但还是要继续学习本教程，可以到我的页面下载代码。从服务器返回随机语言的每当我们与服务器上的端点进行通话时，为了能够请求一个随机的欧洲语言，必须更改文件中的功能。翻译：疯狂的技术宅原文标题：Creating a full-stack web application with Python, NPM, Webpack and Reac...

Cheng_Gang 2019-07-30 14:35 评论0 收藏0
React思维方式·译

摘要：搜索文本和多选框因为会发生变化，且不能通过计算得出，所以是状态。最后，过滤过的产品列表，可以通过原始产品列表搜索文本和多选框值计算出来，因此它不是状态。从传入的回调函数会调用，从而更新组件。在使用JavaScript开发大型、快速的网页应用时，React是我们的首选。在Facebook和Instagram，React很好地减少了我们的工作量。React最强大部分之一，是让你在开发应用...

helloworldcoding 2019-08-20 14:24 评论0 收藏0
【译】函数组件和类组件有什么不同？

摘要：但是，你可能已经注意到，当你试图通过指定依赖数组来优化时，可能会遇到带有过时闭包的错误。这是否意味着闭包是问题所在我不这么认为。到目前为止，我所看到的所有情况下，过时的闭包问题都是由于错误地假设函数不更改或总是相同而发生的。原文链接：https://overreacted.io/how-ar... 在很长一段时间内，标准答案是class components提供更多的特性（像sta...

gself 2019-08-23 16:24 评论0 收藏0