Js.React.How react renders?

Rendered objects are immutable. Every rendered object like a frame from the movie.

It renders only those parts that have changed.

app.js

    <div>
      <button onClick={onClickStartTimer}>
        start timer
      </button>
      <button onClick={onClickStopTimer}>
        stop Timer 
      </button>
      <div id="renderHere">

      </div>
    </div>

immutable.js

import ReactDOM from 'react-dom';

export let immutableExample = () => {

    const element = (
        <div>
            <div>Testing immutable...</div>
            <div>{new Date().toLocaleTimeString()}</div>
        </div>
    );

    ReactDOM.render(element, document.getElementById("renderHere"));
}

let timer;

export let startTimer = () => {
   if (!timer)
     timer =  setInterval(immutableExample, 1000);
}

export const stopTimer = () => {
    if (timer)
      clearInterval(timer);
      timer = null;
}
This entry was posted in Без рубрики. Bookmark the permalink.