🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

在 React 组件类中如何保证 `this` 为正确的上下文?

2019-03-14

回答

在 JavaScript 类中,默认情况下方法并没有被绑定。这意味着他们的 this 上下文可以被改变(例如:事件处理方法中 this 为正在侦听事件的元素)但不排除为组件实例。要解决此问题,可以使用 Function.prototype.bind() 强制将组件实例作为 this 上下文。

constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
}
handleClick() {
  // Perform some logic
} 
  • bind 不仅啰嗦而且需要定义一个 constructor,因此我们可以使用新的公共类字段语法:
handleClick = () => {
  console.log('this is:', this);
}

render() {
  return (
    <button onClick={this.handleClick}>
      Click me
    </button>
  );
} 
  • 你也可以使用内联箭头函数,因为 this(组件实例)是受到保护的:
<button onClick={e => this.handleClick(e)}>Click me</button> 

加分回答

  • 需要注意的是,使用内联箭头函数会产生额外的再次渲染,因为在渲染时会创建一个新的函数引用,这样新的引用就会传递给子组件并且中断 shouldComponentUpdate / PureComponent 的相等检查来阻止不必要的重新渲染。在性能很重要的情况下,最好在构造函数中使用 bind 或优先使用公共类字段语法,因为他们的函数引用是保持不变的。

返回总目录

30 秒面试系列一


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步