React component communication and lifecycle

1. Component communication method

1.1 Basic Usage

• Because components are “independent,” the concepts of in-component and out-component arise

• A component passes data from outside to inside through the component property < component name property ={} />

• To receive data within a component, use props to receive data passed in (function components and class components)

• The function component uses the data passed through the props parameter, and the class component uses the data passed through the this.props parameter

  Use component to pass values

  <Hello name="Jack" age={19} />
  Copy the code

  Function components use data passed in

  function Hello(props) {
      console.log(props)
      return (
          <div>{props.name}</div>)}Copy the code

  Class components use the data passed in

  class Hello extends React.Component {
      render() {
          return (
              <div>{this.props.age}</div>)}}Copy the code

1.2 the characteristics of

• You can pass any type of data to a component

• Props is a read-only object that can only read the value of the property and cannot modify the object

• Note: When using class components, if you write a constructor, you should pass props to super(), otherwise you cannot get this.props in the constructor

  class Hello extends React.Component {  
      constructor(props) {
          // It is recommended to pass props to the parent constructor
          super(props)
      }
      render() {
          return <div>{this.props.age}</div>}}Copy the code

2. Three modes of component communication

• The father the son
• Child the parent
• Non-parent component

2.1 Parent component passes data to child component

• The parent component determines the data to be passed to the child component, usually stored in state

• Add attributes to child component tags with values of data in state

• The child component receives data passed in the parent component through props

  The parent component

  class Parent extends React.Component {
      state = { lastName: 'the king' }  
      render() {
          return (
              <div>Passing data to child components:<Child name={this.state.lastName} />
              </div>)}}Copy the code

  Child components

  function Child(props) {
      return <div>Data received by the child component: {props. LastName}</div>
  }
  Copy the code

2.2 Child component passes data to parent component

With the callback function, the parent component provides the callback, the child component calls, and the data to be passed as arguments to the callback function

• The parent component defines a callback function (to receive data)

• The parent component passes the callback function to the child component as the value of the property

• The child component gets the callback function through props and calls it. The arguments to the callback function are passed back to the parent component as data

  The parent component

  class Parent extends React.Component {
      // The function passed to the child component
      getChildMsg = (msg) = > {
          console.log('Subcomponent data received', msg)
      }
      render() {
          return (
              <div>Child components:<Child sendMsg={this.getChildMsg} />
              </div>)}}Copy the code

  Child components

  class Child extends React.Component {
      state = { childMsg: 'React '} handleClick = () => {this.props. SendMsg (this.state.childmsg)} render() {return (
          
            to pass data to the parent component })}
          )>Copy the code

2.3 Non-parent and child Components

• Promote the shared state to the nearest public parent, which manages the state
• State of ascension
• The common parent component is responsible for: 1. Providing shared state 2. Providing methods to manipulate shared state
• A child component to communicate simply needs methods to receive state or operation state through props

3. Context

Non-parent component values need to be indirectly passed by the common parent component, which is cumbersome. The recommended way to pass data across components is to use Context

Using the step

1. Call React. CreateContext () to create the Provider and Comsumer components

   const { Provider, Comsumer } = React.createContext()
   Copy the code

2. Use the Provider component as the parent node

   <Provider>
       <div className="App">
           <Child />
       </div>
   </Provider>
   Copy the code

3. Sets the value property to represent the data to be passed

   <Provider value="pink">
       <div className="App">
           <Child />
       </div>
   </Provider>
   Copy the code

4. Call the Comsumer component to receive the data

   <Comsumer> {data => <h1> Received data: {data}</h1>}</ Comsumer>Copy the code

conclusion

1. Context can be used to communicate components if they are nested in multiple layers in the next year
2. Context provides two components: Provider and Comsumer
3. Provider component: Used to provide data
4. Comsumer component: Used to consume data

4. The props

4.1 children attribute

• Children property: Represents the children of the component label. Props has this property when the component tag has child nodes

• The children attribute, like ordinary props, can have any value

  function Hello(props) {
      return (
          <div>Children of the component: {props. Children}</div>)}// I am a child node<Hello> I am a child node </Hello>Copy the code

4.2 props check

• For a component, props is a container for external data. There is no guarantee of what format the component consumer will pass in

• If the data is passed in the wrong format, an error may occur within the component

• Key: No additional error message except syntax error message

  // Create the component
  function App(props) {
      const arr = props.colors
      const list = arr.map((item, index) = > <li key={index}>{item}</li>)
      return (
          <ul>{list}</ul>)}// When using components
  <App colors={19} / >Copy the code

• Props verification: Allows you to specify the type, format, and so on of props when creating a component

• Function: Captures errors caused by props when using components, and provides clear error messages to enhance the robustness of components

  App.propTypes = {
      colors: PropTypes.array
  }
  Copy the code

Using the step

1. Install prop-types NPM I prop-types

2. Import prop – types package

3. PropTypes = {} to add validation rules to the props of the component

4. Validation rules are specified using the PropTypes object

   import PropTypes from 'prop-types'  
   function App(props) {
       return (
           <h1>Hi, {props.colors}</h1>
       )
   }
   
   App.propTypes = {
       // The convention colors attribute is array
       // If the type is incorrect, an explicit error is reported to facilitate analysis of the cause of the error
       colors: PropTypes.array
   }
   Copy the code

Constraint rules

1. Common types: Number, String, array, bool, func, and Object

2. React Element type: Element

3. Mandatory: isRequired

4. Object of specific structure: Shape ({})

   // Common types
   optionalFunc: PropTypes.func,
   / / will be selected
   requiredFunc: PropTypes.func.isRequired,
   // Objects of a specific structure
   optionalObjectWithShape: PropTypes.shape({
       color: PropTypes.string,
       fontSize: PropTypes.number
   })
   Copy the code

Default value of 4.3 props

• Scenario: Paging component –> Number of entries per page

• Function: Set the default value for props, which takes effect when no props is passed

  function App(props) {
      return (
          <div>Here is the default value for props: {props. PageSize}</div>)}// Set the default value
  App.defaultProps = {
      pageSize: 10
  }
  // No pageSize attribute is passed in
  <App />
  Copy the code

5. Component lifecycle

5.1 Component Lifecycle Overview

• Component life cycle: The process of creating a component, mounting it to the page (display), and uninstalling it from the page (disappear)
• Each phase of the lifecycle is always accompanied by method calls that are the hook functions of the lifecycle.
• Hook functions provide opportunities for developers to manipulate components at different stages.
• To understand the life cycle of a component is to understand how it works, which can help us to implement more complex components and analyze the causes of component errors
• Only class components have a life cycle.

5.2 Three phases of the life cycle

5.2.1 Creation Phase (Mounting)

1. Execution time

   When a component instance is created and inserted into the DOM

2. Execution order

   constructor() —> render() —> componentDidMount()

3. role

   Hook function	trigger	role
   constructor	When a component is created, it is executed first	1. Initialize state 2. Bind this to the event handler
   render	Emitted each time the component state changes	Render UI (note that setState() cannot be called)
   componentDidMount	After the component is mounted	1. Send a network request. 2

5.2.2 Update Phase

1. Execution time

   1. SetSate () 2.forceUpdate () 3. The component receives new props (any of the above occurs, triggering the component to re-render)

2. Execution order

   render() —> componentDidUpdate()

3. role

   Hook function	trigger	role
   render	Fires every time a component is rendered	To render the UI
   componentDidUpdate	After the component is updated (DOM rendering complete)	Note: setState() must be placed in an if condition

5.2.3 Unloading stage

1. Execution time

   The component disappears from the page

2. Execution order

   componentWillUnmount()

3. role

   Hook function	trigger	role
   componentWillUnmount	Component unmount (disappear from page)	Perform cleanup (e.g., cleanup timer, event unbinding, etc.)