javascript example - Come ascoltare le modifiche di stato in react.js?




jsx setup (4)

I seguenti metodi del ciclo di vita saranno chiamati quando cambi di stato. È possibile utilizzare gli argomenti forniti e lo stato corrente per determinare se qualcosa di significativo è cambiato.

componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)

Qual è l'equivalente della funzione $ watch dell'angolazione in React.js?

Voglio ascoltare i cambiamenti di stato e chiamare una funzione come getSearchResults ().

componentDidMount: function() {
    this.getSearchResults();
}

Non ho usato Angular, ma leggendo il link sopra, sembra che tu stia cercando di codificare qualcosa che non hai bisogno di gestire. Apportate le modifiche allo stato nella gerarchia dei componenti di React (tramite this.setState ()) e React farà sì che il componente venga nuovamente sottoposto a rendering (in pratica "ascoltando" le modifiche). Se vuoi "ascoltare" da un altro componente nella tua gerarchia, allora hai due opzioni:

  1. Passare i gestori verso il basso (tramite oggetti di scena) da un genitore comune e fare in modo che aggiornino lo stato del genitore, causando il ri-rendering della gerarchia sotto il genitore.
  2. In alternativa, per evitare un'esplosione di gestori che ricadono lungo la gerarchia, dovresti esaminare il modello di flusso , che sposta il tuo stato in archivi dati e consente ai componenti di guardarli per le modifiche. Il plugin Fluxxor è molto utile per gestirlo .

Penso che dovresti utilizzare al di sotto del ciclo di vita dei componenti come se avessi una proprietà di input che all'aggiornamento deve attivare l'aggiornamento del componente, quindi questo è il posto migliore per farlo come verrà chiamato prima di eseguire il rendering si può anche fare lo stato del componente di aggiornamento da riflessa sulla vista.

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

Ho appena scritto questo codice JavaScript (utilizzando Prototype per DOM manipolazione DOM ):

var require = (function() {
    var _required = {};
    return (function(url, callback) {
        if (typeof url == 'object') {
            // We've (hopefully) got an array: time to chain!
            if (url.length > 1) {
                // Load the nth file as soon as everything up to the
                // n-1th one is done.
                require(url.slice(0, url.length - 1), function() {
                    require(url[url.length - 1], callback);
                });
            } else if (url.length == 1) {
                require(url[0], callback);
            }
            return;
        }
        if (typeof _required[url] == 'undefined') {
            // Haven't loaded this URL yet; gogogo!
            _required[url] = [];

            var script = new Element('script', {
                src: url,
                type: 'text/javascript'
            });
            script.observe('load', function() {
                console.log("script " + url + " loaded.");
                _required[url].each(function(cb) {
                    cb.call(); // TODO: does this execute in the right context?
                });
                _required[url] = true;
            });

            $$('head')[0].insert(script);
        } else if (typeof _required[url] == 'boolean') {
            // We already loaded the thing, so go ahead.
            if (callback) {
                callback.call();
            }
            return;
        }

        if (callback) {
            _required[url].push(callback);
        }
    });
})();

Uso:

<script src="prototype.js"></script>
<script src="require.js"></script>
<script>
    require(['foo.js','bar.js'], function () {
        /* Use foo.js and bar.js here */
    });
</script>

Gist: http://gist.github.com/284442 .





javascript reactjs