What makes it stand out at the top of the front-end world, we interview the front-end framework React.
Xiaobian: Finally invited the international superstar, it is not easy, you first introduce yourself!
React: Hello everyone!! I am the React.
React: Welcome to FSX. Have you heard of us before?
React: Yes, I really like the way you write your articles. They are humorous, and they compare complicated technologies to things around you. I really appreciate your simple popularization of technology.
Small make up: ho, our chief editor is to give you plug money is how, so kua we, chief editor to know, tonight affirmation add chicken leg.
React: Of course, take people’s money, take people’s disasters away (whisper it).
Xiaobian: Ok, ok, make it worse.
Xiaobian: Let me introduce you to what you do.
React: I’m a JAVASCRIPT library for building user interfaces, mainly uIs.
React: I started as an internal Facebook project to build the Instagram site, which opened source in May 2013.
You may be famous, but you’re in a league of your own in the front-end world of two-way data binding in recent years.
As of the hour before this interview, your Star on Github is 61019, Angular 54927, and Vue 45231.
Xiaobian: What do you think of this?
React: Well, I don’t think good things need to be over-marketed. After all, programmers are not idiots, and we have different approaches to business solutions. Thank you.
Xiaobian: Can you tell us in detail what you brought to us by your appearance?
React: Virtually any UI change is done through a complete refresh. React brings this development model to the front end in a high-performance way. Every time you update the interface, you can feel like you’ve refreshed the entire page.
React: How to perform local updates to ensure performance is what React does.
React: We introduced the Virtual DOM mechanism and implemented a DOM API in Javascript on the browser side.
Small make up: When React is developed, all DOM constructs are created using the virtual DOM. Whenever data changes, React reconstructs the entire DOM tree. Then React compares the entire DOM tree with the last one to get the difference in DOM structure. Then just do the actual browser DOM update for the parts that need to be changed. (Finally finished)
React: Is this a series about the basics?
Xiaobian :(cold sweat)
React: When the data changes, we use a virtual DOM to compare the DOM before and after the change, and then update the interface to maximize performance.
Xiaobian: Go on.
React: Take a look at the picture below.
Xiaobian: Wow!! Don’t understand
React: React can batch the virtual DOM refresh, merging two data changes in an Event Loop.
React: For example, if you change the content of A node from A to B, and then from B to A, React will assume that the UI doesn’t change at all. This logic is often extremely complicated if you manually control it.
React: Although the entire virtual DOM tree needs to be constructed each time, the performance of the virtual DOM is extremely high because the virtual DOM is in-memory data, and only the Diff part of the actual DOM is manipulated, thus improving performance. This way, while maintaining performance, developers no longer need to focus on how a change in data is updated to one or more specific DOM elements, but only on how the entire interface is rendered in any given data state.
React design features
React: The first is Transformation. The core premise of React design is that UI only transforms data into another form of data through mapping. The same input must have the same output. This happens to be a pure function.
function NameBox(name) {
return { fontWeight: 'bold', labelContent: name };
}
'FSX' ->
{ fontWeight: 'bold', labelContent: 'stupid' };Copy the codeXiaobian: As far as my brain is concerned, it seems that my family is right not to let me learn programming.
React: The second is abstraction. You can’t implement a complex UI with just one function. Importantly, you need to abstract the UI into multiple reusable functions that hide internal details. To implement a complex UI by calling one function within another is called abstraction.
React: Then there’s composition. In order to really achieve reuse characteristics, it’s not enough to just reuse leaves and create a new container for them each time. You also need to combine containers that can contain other abstractions again. My idea of composition is to combine two or more different abstractions into one.
function FancyBox(children) {
return {
borderStyle: '1px solid blue',
children: children
};
}
function UserBox(user) {
return FancyBox([
'Name: ',
NameBox(user.firstName + ' ' + user.lastName)
]);
}Copy the codeStop!! I’m a little dizzy
React: I’ll take a sip of water first!
Xiaobian: Ideas are really very important. I hope everyone will not be like me.
React: I can’t say that. React’s learning curve is relatively flat. Do a good interview, I know many websites use React.
Xiaobian: (smirk) Ok, let’s move on.
React: THE UI is not just a replication of server-side or business logic state. There are actually a lot of states for specific render targets; So we tend to use immutable data models. So we’re going to string together functions that can change state as the origin on the top layer.
React: To manage the state of each item in a list, we can create a Map that holds the state of a specific item.
function UserList(users, likesPerUser, updateUserLikes) {
return users.map(user => FancyNameBox(
user,
likesPerUser.get(user.id),
() => updateUserLikes(user.id, likesPerUser.get(user.id) + 1)
));
}
var likesPerUser = new Map();
function updateUserLikes(id, likeCount) {
likesPerUser.set(id, likeCount);
rerender();
}
UserList(data.users, likesPerUser, updateUserLikes);Copy the codeReact: Second, we can look at the following two images.
React: As you can see above, using React greatly reduces logic complexity, which means less development and less potential for bugs. React reduces the Diff algorithm from O(n^3) to O(n).
React: The idea of componentization is also one of the highlights of React. Components are encapsulated UI components with independent functions. React recommends rethinking UI composition in the form of components. Each UI module with relatively independent functions is defined as a component, and smaller components are combined or nested into larger components to complete the construction of the overall UI.
Xiaobian: Can you understand it this way? Just like we build building blocks, a building block is like a functional module.
React: yeah!
Xiaobian: Can you tell us specifically about REACT?
In fact, React is not only applied to actual projects, but also ubiquitous to most of the front-end frameworks that have been most popular in the last two years.
I have a Vue, I have a React,Uh,WEEX.
React: Come on, don’t make trouble for me. Later, their fans will be on our doorstep.
Xiaobian: We have talked so much, can you give us an example? Specifically, can you run Hello World? This isn’t a tutorial column, though.
React: Sure.
<! DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React! </title> <script src=".. /build/js/react.min.js"></script> <script src=".. /build/js/react-dom.min.js"></script> <script src=".. /build/js/babel.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world! </h1>, document.getElementById('example') ); </script> </body> </html>Copy the codeREACT: In support of FSX, I’ve decided to write you a REACT introduction Demo, which will be available soon. Of course, the tutorials and instructions will be very easy to follow.
Thank you so much!!
Thank you again for taking time out of your busy schedule to be a guest on FSX. Best wishes for React and early Sunrise version 1.0.