reactjs features:
- Component-based thinking
- Using JSX for declarative UI design
- Using Virtual DOM
- Component PropType error proofing mechanism
- Component is like a state machine (State Machine), but also has a life cycle (Life Cycle)
- Always Redraw and Unidirectional Data Flow
- Write CSS in JavaScript: Inline Style
li>
p>
1. Component-based thinking
[Composition] The most basic unit of React is Component. Each component can also contain more than one sub-component, which can be assembled into one according to requirements Composable components
[Component Features]: encapsulation, Separation of Concerns, Reuse, Compose, etc.
For example:< TodoApp> components can include
- Write code
- Coax the girl
- Buying a book
Componentization and typography
[Componentization] has always been a panacea for web front-end development. What many developers hope most is to maximize repetition Use (reuse) the code written in the past, don’t repeat the wheel (DRY). In React, components are the foundation of everything, making application development seem like piles of wood.
It is not easy for front-end engineers who are used to the development of [Template] in the past to convert to a componentized thinking mode in a short time, especially in the past we are often used to separating HTML, CSS and JavaScript, but now we have to separate them All encapsulated together.
A better way is to train yourself when you see different web pages or applications, forcing yourself to cut the pages you see into components. I believe that after a period of time, when the eyes of the sky are opened, it will be easier to [get used to the componentized way of thinking].
1.1. The main two ways to write React Component
a. Use ES6 Class
(complex operations and component life cycle control are possible , Which consumes resources relative to stateless components)
// Note that the first letter at the beginning of the component must be capitalized
class MyComponent extends React.Component {
// render is the only necessary method for Class based components (method)
render() {
return (Hello, World!
);
}
}
// insert thecomponent into the DOM of app Element
ReactDOM.render(, document.getElementById(‘ap
p'));
b. Use Funtional Component notation
(simply render UI stateless components, no internal state, no actual components And ref, there is no life cycle function. If you do not need to control the life cycle, it is recommended to use more stateless components to obtain better performance)
// Use arror function to design Funtional Component to make UI design simpler (f(D) =>UI) and reduce side effects span>
>>>>>>> kdchang/master
const MyComponent = () => (Hello, World!
);
// insert thecomponent into the DOM of app Element
ReactDOM.render(, document.getElementById('app'));
2. Declarative UI design with JSX
React’s design thinking is that using [Component] can achieve the concept of [Separation of Concerns] more than [Template] and [Display Logic].
With JSX, you can achieve [Declarative] (pay attention to what to), and [Non-Imperative Imperative] (pay attention to how to) programming method
Like the following declarative (Declarative) UI design It’s easier to understand than simply using (Template) style:
// Declarative UI design is easy to see the function of this component
//Internal appearance
3. Use Virtual DOM
In traditional Web, jQuery is generally used for direct manipulation of DOM. However, changing the DOM is often the bottleneck of Web performance. Therefore, the Virtual DOM mechanism is designed in the React world to allow the Virtual DOM to communicate between the App and the DOM.
When changing the DOM, React’s own diff algorithm will be used to calculate the minimum update, and then to minimize the update of the real DOM.
4. Component PropType error proofreading mechanism
In addition to providing default prop values (Default Prop Values) during React design, it also provides a Prop validation (Validation) mechanism To make the entire Component design more robust:
// Note that the first letter at the beginning of the component must be capitalized
class MyComponent extends React.Component {
// render is the only necessary method for Class based components (method)
render() {
return (Hello, World!
);
}
}
// PropTypes verification, if the incoming props type does not meet Will show an error
MyComponent.propTypes = {
todo: React.PropTypes.object,
name: React.PropTypes.string,
}
// Prop default value, if no value is passed in corresponding props The default value will be used
MyComponent.defaultProps = {
todo: {},
name: ‘‘,
}
5. Component is like a state machine (State Machine), but also has a life cycle (Life Cycle)
Component just Like a state machine (State Machine), according to different state (modified by setState()) and props (passed by parent element), Component will show corresponding display results. While people have birth, old age, sickness and death, components also have life cycles. By operating the life cycle processing function, the processing required by the Component can be performed at the corresponding point in time. For a more detailed introduction to the life cycle of the component, we will explain it further in the next chapter.
6. Always Redraw and Unidirectional Data Flow
In the React world, props and state are the influence An important element of React Component looks. The props are all passed in by the parent element and cannot be changed. If you want to change the props, you must change it by the parent element. The state is the different state generated according to the user’s interaction, which is mainly modified by the setState() method. When React finds that the props or state is updated, it will redraw the entire UI. Of course, you can also use forceUpdate() to force the Component to be redrawn. And React can implement Unidirectional Data Flow more specifically by integrating Flux or Flux-like (for example: Redux), making data flow management clearer.
7. Write CSS in JavaScript: Inline Style
const divStyle = {
color: ‘red‘,
backgroundImage: ‘url(‘ + imgUrl + ‘)‘,
};
ReactDOM.render(Hello World!, docume
nt.getElementById(‘app‘));
- Write code
- Coax the girl
- Buying a book
// Note that the first letter at the beginning of the component must be capitalized
class MyComponent extends React.Component {
// render is the only necessary method for Class based components (method)
render() {
return (Hello, World!
);
}
}
// insert thecomponent into the DOM of app Element
ReactDOM.render(, document.getElementById(‘ap
p'));
// Use arror function to design Funtional Component to make UI design simpler (f(D) =>UI) and reduce side effects
>>>>>>> kdchang/master
const MyComponent = () => (Hello, World!
);
// insert thecomponent into the DOM of app Element
ReactDOM.render(, document.getElementById('app'));
/ / Declarative UI design is easy to see the function of this component
//Internal appearance
// Note that the first letter at the beginning of the component must be capitalized
class MyComponent extends React.Component {
// render is the only necessary method for Class based components (method)
render() {
return (Hello, World!
);
}
}
// PropTypes verification, if the incoming props type does not meet Will show an error
MyComponent.propTypes = {
todo: React.PropTypes.object,
name: React.PropTypes.string,
}
// Prop default value, if no value is passed in corresponding props The default value will be used
MyComponent.defaultProps = {
todo: {},
name: ‘,
}
const divStyle = {
color: ‘red‘,
backgroundImage: ‘url(‘ + imgUrl + ‘)‘,
};
ReactDOM.render(Hello World!, docume
nt.getElementById(‘app’));