Understanding of modules and components, modularity and componentization
module
- How to understand modules?
A module is a js program that provides specific functions to the outside world, usually a js file. - Why disassemble into modules?
As the business logic increases, the code becomes more and more complex. According to the business logic or other rules, the large and complex code is divided into modules, which is easier to manage and reuse. - The role of the module
It can reuse js, simplify the writing of js, and improve the efficiency of js operation.
components
- How to understand components?
A collection of code and resources (html/css/js/image, etc.) used by a component to implement local functional effects. - Why have components?
The functions of an interface are more complex, and many functions with similar structures are repeated. In order to reuse and facilitate management, the concept of components is introduced. - The role of components
Reuse coding, simplify project coding, and improve operating efficiency.
modular
When the js of the application is written in modules. This application is a modular application.
componentized
When an application is implemented in a multi-component manner, the application is a componentized application.
Component Oriented Programming with React
React provides two ways to define components:
functional component
- To create functional components, you must pay attention to the following points:
- The first letter of the function name must be capitalized;
- The function must have a return value;
- The this in the function is undefined, because babel turns on the strict mode of js after compiling.
- Rendering function components notes:
- The calling component must use the component tag (eg: <MyComponent/>), and cannot use the function name directly.
- Simple Syntax Example of Functional Component Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1_functional component</title>
</head>
<body>
<!-- Have a container ready -->
<div id="app"></div>
<!-- step01: introduce react core library -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- step02: introduce react-dom，for support react operate DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- step03: introduce babel，for the jsx Convert to js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel"> /* Be sure to write babel here */
// 1. Create functional components
function MyComponent() {
console.log(this) // Here this is undefined, because babel is compiled with js strict mode turned on
return <h2>I am a component defined with a function (applicable to the definition of [simple component])</h2>
}
// 2. Render the component to the page
ReactDOM.render(<MyComponent/>, document.getElementById('app'))
</script>
</body>
</html>
[Grammar analysis]
What happens after ReactDOM.render(...) is executed?
- React parses the component tag and finds the Demo component.
- It is found that the component is defined using a function, and then the function is called to convert the returned virtual DOM to the real DOM and render it to the page.
class component
As the name implies, Class components are implemented based on ES6 classes. If you are not familiar with ES6 classes or have forgotten something, please move "Basic knowledge of class in js" Quick GET.
- To create a class component, you must pay attention to the following points:
- Must inherit React's Component class;
- There must be a render method, and the render method must have a return value (returning the virtual DOM):
- The calling component must use the component tag (eg: <MyComponent/>), and cannot use the class name directly.
- Simple Syntax Example of Class Component Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2_class component</title>
</head>
<body>
<!-- Have a container ready -->
<div id="app"></div>
<!-- step01: introduce react core library -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- step02: introduce react-dom，for support react operate DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- step03: introduce babel，for the jsx Convert to js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel"> /* Be sure to write babel here */
// 1. Create a class component
class MyComponent extends React.Component {
render() {
// Where is render placed? - On the prototype object of MyComponent for instance use.
// Who is this in render? -- An instance object of MyComponent or an instance of a MyComponent component object.
console.log('render middle this: ', this)
return <h2>I am a component defined with a class (for the definition of [complex component])</h2>
}
}
// render the component to the page
ReactDOM.render(<MyComponent/>, document.getElementById('app'));
</script>
</body>
</html>
[Grammar analysis]
What happens after ReactDOM.render(...) is executed?
- React parses the component tag and finds the MyComponent component.
- It is found that the component label is defined using a class, and then an instance of the class is new, and the render method on the prototype is called through the instance.
- Convert the virtual DOM returned by render to the real DOM, which is then rendered in the page.
This article only briefly introduces the thinking and method of React component programming. As an introduction, I will continue to share more in-depth knowledge of React component programming.