As of July 2018, a standard set of tools, often called a stack, for building a React application is as follows: Application code One important distinction between libraries like React and frameworks like Ember.js and AngularJS is that React is concerned only with rendering the UI and leaves many things up to each project to put together. This style is often called declarative programming and is a significant departure from the more imperative style of most tools, in which developers must specify both how a program should behave and the steps required to make that happen. This allows developers to describe the application as they would like it to render, given some data, without having to think about what happens when the data changes. This process of comparing the new state with the last-known state and of applying efficient updates happens transparently. It then finds the difference and applies the smallest, most efficient changes possible to the page.
When React’s render function is called, rather than draw the UI immediately, React compares the result of its new input to a copy of the previous result. Full re-renders on every change may seem like a performance problem, but this is React’s main sleight of hand.
The resulting HTML is then passed to the render function to redraw the app. Instead, the new data is passed into the components just as it was on the initial page load, and the application regenerates its UI from scratch. When data changes while the app is running-a user adding a new to-do item to the list, for example-there is no code to write to update the UI. React application developers compose pieces of the UI, just like the preceding example, and pass that resulting HTML to a special render function. The pair of components Todo and TodoList are just functions that return HTML based on their inputs. You may have noticed that the preceding code does not manipulate or modify the page. I would get HTML that looked like this: Go for a run Cook dinner at home Call Dentist The component tree representing the Cartoons page of the New Yorker’s websiteįor a more concrete example, if I was building a to-do list, a typical sample app for JavaScript projects, I might have a Todo component like this: /** * An individual ToDo item * ] const app = const targetDOMElement = document.
0 kommentar(er)
