React: 3 - Reactive Updates
One of Reacts strengths is that it is NOT an MVC or MVVM framework. These frameworks can get quite slow when there are a lot of complex updates being made to the underlying models. The frameworks are continuously monitoring for changes and one change to one component can lead to hundreds or thousands of changes to other objects, and the frameworks are continuously updating the DOM to visualize the changes.
React takes a different approach.
Lets look at a simple example, extending our previous “Hello World” example as shown below.
In this example we display an input box for the user to enter their name while also updating the time display every 500ms. This is done by setting the date property to a new value.
React uses a virtual DOM and when the virtual DOM changes as it will do when a new value for the date is passed to the React HelloMessage component, React will diff the new Virtual DOM with the previous virtual DOM and determine what change (if any) to make to the real DOM, and make only the minimum necessary changes.
You should think of the props object as immutable data that should NEVER be written to. React can support state but that is handled differently, and I will review that later.
In my next post I will look a little deeper at the JSX syntax and how it can be transformed (transpiled) into regular JavaScript.