Component

1. Module and component definitions

   Module: Generally, a .JS file is a module (developed by function)

   Component: A collection of JS+HTML+CSS code and resources (developed by region)

   
   

2. Developer Tools React-Developer Tools

   Based on Chrome browser. Chrome - Extensions - Open the Chrome Web Store - Type React in the search box. The provider is Facebook.

   
   

   When opening a webpage written by React, the icon in the upper right corner will light up.

   1. If the webpage has not been packaged and launched, it is a red + bug mark;

   2. If the webpage is packaged and launched, it is the React dark blue logo.

      
      

   When right-clicking an element, there are more Components and Profiler tabs.

   1. Components are used to observe how many components a web page is composed of, and to see how many properties each component has.

   2. Profiler is used to record website performance, loading time/which component is the slowest, etc.

      
      

3. Functional components

   1. Because components include HTML/CSS/JS, at least there must be structural HTML, , so functional components must have a return value.

   2. The component name must be capitalized. If the component name is lowercase, an error will be reported after rendering with the lowercase name:

      Warning: Function are not valid as a React Child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

   3. When rendering the component to the page, must write <MyComponent/> closing tag.

      
      

4. Attention question

   1. The functional component is not called by itself, but is called by React for me. After the call, the return value is obtained and rendered on the page.

      
      

   2. This in functional components points to the problem

      function MyComponent(){
      console.log(this) //undefined
      }

      The reason is that the JSX code is to be translated by babel, and strict mode will be turned on after translation. Strict mode prohibits this in custom functions from pointing to window, so it is undefined.

      
      

   3. What happens after executing ReactDOM.render( <MyComponent/> ...) ?

      1. React parses the component tag and finds the MyComponent component.

      2. It is found that the component is defined with a function, and then the function is called to convert the returned virtual DOM into a real DOM, and then render it on the page.

         
         

5. The application of the three properties of class components in functional components

   The three properties of class components are state, props, and refs. This is used when calling these properties, such as this.state.isHot this.props.name. This is because this represents an instance of a functional component. That is, the three attributes of class components are used on class instances.

   
   

   Functional components, on the other hand, do not have instances. So state and refs cannot be used (the new version of state can be used through hooks). But functional components can use props, because functions can take parameters.

   
   

6. Functional components use props

   The props in class components are returned from this.props like:

   render(){const {name, age, gender} = this.props }

   Functional components don’t have this. However, all key-value pairs passed into component tags are also collected by React into the props object. In this case, the parameter of the functional component is the props object.

   Therefore, instead of using this.props, functional components can directly use props objects instead of class components.

   
   

7. Functional components limit the data in props

   Class component restrictions on props can be written outside the class component or inside the class component. But functional components don’t have the static syntax. Therefore, it is restricted that props can only be written outside the component.

   functional component(){}
   componentname.propType = {}
   componentname.default = {}

8. The purpose of functional components

   The general case is to deal with static pages, because functional components do not handle logic (before hooks).