reaktivlerde zaman aşımı durdu mu?

Question

Reaksiyon dalgalarında bir zaman aşımı// (kurtulmak için) var mı? tıklama veya eylemin çeşit üzerine

setTimeout(function() { 
//do something 
}.bind(this), 3000); 

, tamamen durdurmak ve zaman aşımı sonuna kadar isterler. Bunu yapmanın bir yolu var mı? Teşekkürler.

Answer 1

Sen kullanmalıdır Katmalar:

// file: mixins/settimeout.js: 

var SetTimeoutMixin = { 
    componentWillMount: function() { 
     this.timeouts = []; 
    }, 
    setTimeout: function() { 
     this.timeouts.push(setTimeout.apply(null, arguments)); 
    }, 

    clearTimeouts: function() { 
     this.timeouts.forEach(clearTimeout); 
    }, 

    componentWillUnmount: function() { 
     this.clearTimeouts(); 
    } 
}; 

export default SetTimeoutMixin; 

... ve bileşeninde:

// sampleComponent.js: 
import SetTimeoutMixin from 'mixins/settimeout'; 

var SampleComponent = React.createClass({ 

    //mixins: 
    mixins: [SetTimeoutMixin], 

    // sample usage 
    componentWillReceiveProps: function(newProps) { 
     if (newProps.myValue != this.props.myValue) { 
      this.clearTimeouts(); 
      this.setTimeout(function(){ console.log('do something'); }, 2000); 
     } 
    }, 
} 

export default SampleComponent; 

diğer bilgiler: Katmalar şimdi artık yok React yana https://facebook.github.io/react/docs/reusable-components.html

Answer 2

Bunun bir bileşen içinde olduğunu varsayarak, daha sonra iptal edilebilmesi için zaman aşımı kimliğini saklayın. Aksi takdirde, kimliği harici bir mağaza nesnesi gibi daha sonra erişilebilecek başka bir yerde saklamanız gerekir.

this.timeout = setTimeout(function(), { 
    // Do something 
    this.timeout = null 
}.bind(this), 3000) 

// ...elsewhere... 

if (this.timeout) { 
    clearTimeout(this.timeout) 
    this.timeout = null 
} 

Ayrıca tamamlanmamış zaman aşımı çok componentWillUnmount() iptal olur emin olmak için muhtemelen edeceğiz

:

componentWillUnmount: function() { 
    if (this.timeout) { 
    clearTimeout(this.timeout) 
    } 
} 

Eğer bir zaman aşımı bekleyen olup olmadığına bağlıdır bazı UI varsa,' Kimliği yerine uygun bileşenin durumunda saklamak istiyorum.

Answer 3

, burada bir örnek kabul edilen cevapta açıklandığı gibi aynı işlevselliği vermek için başka bir bileşeni saran daha yüksek bir sipariş bileşeni. Kalıcı olarak kalan tüm zaman aşımlarını düzgün bir şekilde temizler ve çocuk bileşenine bunu sahne aracılığıyla yönetmek için bir API verir.

Bu in katmalar değiştirmek için tavsiye edilen bir yol olan ES6 sınıflarını kullanan ve component composition Timeout.jsx olarak 2017.

MyComponent.jsx olarak

import React, { Component } from 'react'; 

const Timeout = Composition => class _Timeout extends Component { 
    constructor(props) { 
     super(props); 
    } 

    componentWillMount() { 
     this.timeouts = []; 
    } 

    setTimeout() { 
     this.timeouts.push(setTimeout.apply(null, arguments)); 
    } 

    clearTimeouts() { 
     this.timeouts.forEach(clearTimeout); 
    } 

    componentWillUnmount() { 
     this.clearTimeouts(); 
    } 

    render() { 
     const { timeouts, setTimeout, clearTimeouts } = this; 

     return <Composition 
     timeouts={timeouts} 
     setTimeout={setTimeout} 
     clearTimeouts={clearTimeouts} 
     { ...this.props } /> 
    } 
} 

export default Timeout; 

import React, { Component } from 'react'; 
import Timeout from './Timeout';  

class MyComponent extends Component { 
    constructor(props) { 
    super(props) 
    } 

    componentDidMount() { 
    // You can access methods of Timeout as they 
    // were passed down as props. 
    this.props.setTimeout(() => { 
     console.log("Hey! I'm timing out!") 
    }, 1000) 
    } 

    render() { 
    return <span>Hello, world!</span> 
    } 
} 

// Pass your component to Timeout to create the magic. 
export default Timeout(MyComponent);