React core idea is: package assembly.
Each component maintains its own state and UI, when the status changes automatically re-render the entire assembly.
React generally contains the following concepts:
- Package
- JSX
- virtual DOM
- Data Flow
Package
React applications are built on top of the component.
JSX
The HTML embedded directly inside the JS code, this is a kind React proposed JSX syntax called.
E.g:
class HelloMessage extends Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
virtual DOM
When the component state state has changed, React render method is called automatically re-render the UI components of the entire assembly.
Of course, if you really such a big area of operation DOM, performance is a big issue, so React implemented a Virtual DOM, DOM component structure is mapped onto the Virtual DOM, React implements a diff algorithms on this Virtual DOM when you want to re-render the component, we will seek to change through the diff to DOM nodes , and then modify the actual update to the browser DOM node, so this is actually not really render the entire DOM tree. The Virtual DOM is a pure JS data structures, performance will be much faster than the native DOM. Efficient .
Data Flow
"One-way data binding" is a respected React application architecture approach. When applying sophisticated enough to appreciate its benefits, although in general scenarios you may not be aware of its existence, it will not affect you start using React, just to know there is such a concept can be.