React's design idea--understanding JSX and component

HTML-based front-end interface development is becoming more and more complex, and its essential problem can be attributed to the efficient reflection of dynamic data from the server side or user input into a complex user interface. The react framework from Facebook is exactly one solution for this issue. React brings a lot of pioneering ideas to build the front-end interface, although one of the most important reasons to choose react is performance, but the design ideas behind the technology are worth thinking about.

React project manager Tom Occhino once elaborated react the original intention of birth, he mentioned react the greatest value is what? Is it a high-performance virtual DOM, server-side render, encapsulated event mechanism, or a complete error message? Although every point is important enough. But he points out that the most valuable thing about react is the declarative, intuitive way of programming. Software engineering has never advocated the use of inscrutable techniques to program, instead, how to write understandable maintainable code is the key to quality and efficiency. Imagine, after one months, you look back at the code you write, whether or not you understand a variable, the meaning of an if judgment; a new colleague wants to add a little new feature or fix a bug, does he have enough confidence in his code not to introduce any side effects? As functionality increases, the code can easily become more complex, and these problems will become more and more serious, resulting in a hard-to-maintain code. And react claims that new colleagues can start developing new features even on the first day of joining.

So how did react do it?

using JSX to visually define the user interface

One of the core mechanisms of react is virtual DOM: a virtual DOM element that can be created in memory. React uses virtual DOM to reduce the operation of the actual DOM to improve performance. Similar to the real native DOM, virtual Dom can also be created with JavaScript, for example:

var null, ' first Text Content '); var null, ' Second Text Content '); var root = react.createelement (' ul ', {className: ' my-list '}, Child1, child2);

Using this mechanism, we can build a complete interface dom tree with JavaScript, just as we can create real Dom with JavaScript. But this code is not readable enough, so react invented the JSX, using our familiar HTML syntax to create the virtual DOM:

 var root = ( <  ul  classname  =" My-list " Span style= "COLOR: #0000ff" >>  <  li  >  first Text content</ li  >  <  li  >  Second Text Content</ li  >  </ ul  >   

These two pieces of code are completely equivalent, and the latter adds XML syntax directly to the JavaScript code, allowing you to efficiently define the interface through the code rather than the template. The JSX is then converted to pure JavaScript via the translator and then executed by the browser. In real-world development, JSX has been compiled into a pure JAVASCRIPT,JSX grammar at the product packaging stage without any performance impact. Also, since JSX is just a syntax, JavaScript's keyword class, for, and so on cannot appear in XML, and as shown in the example, using ClassName, htmlfor instead, is consistent with the creation of native Dom in JavaScript.

Therefore, JSX itself is not an advanced technology, can be said to be a relatively high-level but very intuitive syntax sugar. It's very useful, but it's not a necessity, and react without JSX can work: As long as you're willing to use JavaScript code to create these virtual DOM elements.

React's design idea--understanding JSX and component