Encounter react (nine)-component component development

Posted Jun 26, 20203 min read

Today I want to share the component development of the core knowledge of react~~

  1. Understanding about componentization:componentization is to disassemble a page or a complex function into small components, and let these small components work together in an orderly manner to form our page or complex program.

  2. Why componentization:The traditional page or program development structure is relatively complex, especially for large applications, with many pages, and strong code coupling is not easy to maintain. If the code can be disassembled into individual small modules, similar to building blocks In the same way, each has its own function, so it is easier to develop and maintain, more reusable, and more expandable. Each component can also split the internal small functions into smaller components, and it is more developed. Convenient and flexible. In view of the above advantages, many mainstream frameworks have adopted the design concept of component development.

Let's briefly talk about the components in react

  1. The type of formation in react:

    1. According to the definition, it can be divided into class components and function components
    2. According to the state, it can be divided into stateful components and stateless components
    3. According to responsibilities, it can be divided into display group price and container components
      Of course, there are asynchronous components, higher-order components, etc.

Let's briefly talk about class components and function components

export function FunComponent(){//Function component
  //No state state without this(component instance)
  return(
    <div>
      <h1>I am a function component</h1>
    </div>
 )
}

class App extends Component {//Class component
  constructor(props){
    super(props)
    this.state={}//Storage data in the class component This is the state of the class component
  }
  render() {//Render current component
    return(
      <div>
         {/*Root node */}
        <h1>I am a class component</h1>
        <FunComponent/>{/*Reference function components in class components. Component names must be capitalized*/}
      </div>
    );
  }
}

export default App;

Notes about class components:

  1. Constructor function can be defined internally to initialize some data

  2. The internal state is used to manage the data state

  3. There is this instance object

    note:
    1Class components must inherit from react.Component
    2
    The render function must be implemented internally and must have a return value
    3*The first letter must be capitalized

About the return value of return in the component

  1. Can be a react element or referenced component created by jsx

  2. Can be an array or numbers or strings

  3. Can be boolean value or null(boolean or null shows nothing)

  4. fragment fragment, portals rendering elements to different child nodes

  5. Common component life cycle:
    The component life cycle describes the process of a component from creation to destruction. It can do something in certain stages, and the callback function handles some logic
    Life cycle and life cycle functions

  6. mount-->The component is mounted and rendered in the dom tree for the first time. Corresponding life cycle function:componentDidMount This life cycle function will be called back once the component is mounted

  7. unpdate-->Component update Corresponding life cycle function:componentDidUpdate This function will be called back when the component is updated

  8. Unmount-->Component unloading Corresponding life cycle function:componentWillUnmount component will be called back before the DOM tree is removed.
    Common life cycle diagram
    image.png

    note:
    1. componentDidMount will immediately call back this function when the component is mounted
      Methods that rely on DOM operations can be called here
      It is recommended to perform some network request methods here
      Add some subscription methods will be removed when componentWillUnmount
    2. The componentDidUpdate component does not call this lifecycle function for the first render
      Called when component data is updated and re-rendered
    3. componentWillUnmount The life cycle function that is called back when the component is about to be removed
      Generally, when the event is unbound, a timer will clear the timer

Today’s sharing is done thanks for reading