如何在 React 中将 setInterval 回调与 Context 结合使用

2020-04-25 08:00:00 · 飞浪

介绍在本指南中，您将深入了解非常熟悉的this关键字。您可能已经使用过无数次，但仍然不知道它是如何工作的以及它如何影响您的React组件。您可能还认为this关键字与React有很大关

介绍

在本指南中，您将深入了解非常熟悉的this关键字。您可能已经使用过无数次，但仍然不知道它是如何工作的以及它如何影响您的 React 组件。您可能还认为this关键字与 React 有很大关系。但实际上，它只是 JavaScript 绑定this上下文的方式。

理解 this 引用

JavaScript 中的this引用与其他基于类的语言（如 Java 或 C#）中的 this 引用相同。它指向哪个对象正在调用该函数。然而，在 JavaScript 中，this引用可以根据函数被调用的位置绑定到不同的对象。this引用也称为上下文。

当从全局范围调用该函数时，上下文或this引用默认绑定到全局对象。

      function bar() {
  this.x = 43;
}

bar();
console.log(x); // will log 43
    

请看下面的另一个例子。

      function bar() {
  this.x = 43;
}

const barObject = {
  barFn: bar
};

barObject.barFn();

console.log(x); // will log undefined
console.log(barObject.x); // will log 43
    

在这种情况下，bar()函数是从barObject对象的上下文中调用的，因此this引用绑定到barObject。如果你尝试记录变量x，它将返回undefined ，因为函数bar()不是从全局范围调用的。

bind() 函数

您可能遇到过bind()函数，该函数用于将类组件的this引用绑定到事件处理程序。它看起来像这样。

      class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  // ...
}
    

bind ()函数可能会令人困惑，尤其是当您刚开始使用 JavaScript 或 React 时。本节将解释bind() 的作用及其用法。

看看下面的例子。

      const User = {
  lastName: "Wayne",
  firstName: "Victor"
};

function logName() {
  console.log(this.lastName, this.firstName);
}

logName(); // undefined, undefined
    

如果运行上述代码，logName()函数将在控制台中输出undefined 。这是因为this引用的值当前绑定到全局对象，并且由于全局上下文中没有定义lastName或firstName变量，因此它返回undefined。

现在，将User对象绑定到logName()函数并观察魔术。

      const User = {
  lastName: "Wayne",
  firstName: "Victor"
};

function logName() {
  console.log(this.lastName, this.firstName);
}

const userBoundLogName = logName.bind(User);

userBoundLogName(); // Wayne Victor
    

这里，bind()函数将User对象绑定到logName()函数并返回一个有界函数。有界函数具有指向User对象的this引用。您可以通过绑定到新对象来创建对logName()函数的多个引用，如下所示。

      const Victor = {
  lastName: "Wayne",
  firstName: "Victor"
};

const John = {
  lastName: "Doe",
  firstName: "John"
};

function logName() {
  console.log(this.lastName, this.firstName);
}

const logVictor = logName.bind(Victor);
const logJohn = logName.bind(John);

logVictor(); // Wayne Victor
logJohn(); // Doe John
    

这样，您不必明确地将参数传递给logName()函数；相反，您可以在缩放时绑定对象。

使用 setInterval() 方法

现在您已经对this关键字和bind()函数有了很好的了解，请看一下如何在组件内部将其与setInterval()一起使用。

默认情况下，this引用将始终设置为全局对象。使用类方法时，您需要明确绑定this引用，以便setInterval()函数引用当前类实例。

看下面一个简单的反例。

      import React, { Component } from "react";

class App extends Component {
  state = { counter: 0 };

  incrementCounter() {
    const { counter } = this.state;
    this.setState({ counter: counter + 1 });
  }

  componentDidMount() {
    const thisBoundedIncrementer = this.incrementCounter.bind(this);
    setInterval(thisBoundedIncrementer, 1000);
  }

  render() {
    return (
      <div className="App">
        <h1>Counter</h1>
        <h2>{this.state.counter}</h2>
      </div>
    );
  }
}

export default App;
    

在上面的代码片段中，在将回调传递给setInterval()函数之前，您需要将其绑定到组件的当前实例。如果不这样做，setInterval ()回调将没有this.state的上下文。

稍等一下。有一个例外，即this引用不需要绑定到函数：当你使用箭头函数时。

在上面的代码中，将incrementCounter()函数声明重构为箭头函数。

      import React, { Component } from "react";

class App extends Component {
  state = { counter: 0 };

  incrementCounter = () => {
    const { counter } = this.state;
    this.setState({ counter: counter + 1 });
  };

  componentDidMount() {
    setInterval(incrementCounter, 1000);
  }

  render() {
    return (
      <div className="App">
        <h1>Counter</h1>
        <h2>{this.state.counter}</h2>
      </div>
    );
  }
}

export default App;
    

如果是箭头函数，则不必绑定this引用。这是因为箭头函数在其上下文中没有this引用，默认情况下this引用指向类实例。

结论

使用this关键字和使用bind()函数进行绑定是 JavaScript 中的基本概念。您可以将任何对象绑定到函数并传递this上下文。默认情况下，this指的是全局对象。除了bind()函数之外，您还可以使用call()或apply()方法来更改this引用的值。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何在 React 中将 setInterval 回调与 Context 结合使用

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

const User = { lastName: "Wayne", firstName: "Victor" }; function logName() { console.log(this.lastName, this.firstName); } const userBoundLogName = logName.bind(User); userBoundLogName(); // Wayne Victor

const Victor = { lastName: "Wayne", firstName: "Victor" }; const John = { lastName: "Doe", firstName: "John" }; function logName() { console.log(this.lastName, this.firstName); } const logVictor = logName.bind(Victor); const logJohn = logName.bind(John); logVictor(); // Wayne Victor logJohn(); // Doe John

import React, { Component } from "react"; class App extends Component { state = { counter: 0 }; incrementCounter() { const { counter } = this.state; this.setState({ counter: counter + 1 }); } componentDidMount() { const thisBoundedIncrementer = this.incrementCounter.bind(this); setInterval(thisBoundedIncrementer, 1000); } render() { return ( <div className="App"> <h1>Counter</h1> <h2>{this.state.counter}</h2> </div> ); } } export default App;

import React, { Component } from "react"; class App extends Component { state = { counter: 0 }; incrementCounter = () => { const { counter } = this.state; this.setState({ counter: counter + 1 }); }; componentDidMount() { setInterval(incrementCounter, 1000); } render() { return ( <div className="App"> <h1>Counter</h1> <h2>{this.state.counter}</h2> </div> ); } } export default App;