@TOC

React render-props mode and higher-order components

How does React implement component reuse?

• Component state logic: 1. State 2. Method of operating state
• Two implementation schemes: 1. Render props mode 2. HOC

Render props model

• The state to be ingested and the method for manipulating it are encapsulated in a component

• Ways to expose state and manipulate state outside of a component (child component passing data to parent)

  render() {
      return (
          <div>{this.props. Render (this.state.count, this.handlecount)}}</div>)}Copy the code

• Call the function passed in by the parent, passing in state and the method that operates on state as function arguments

  <div>
      <Counter 
          render={(count, handleCount) = > {
              return <button onClick={handleCount}>I got hit {count} times</button>}} / >
  </div>
  Copy the code

Children instead of the Render attribute

• Note: Just because the mode is called Render props doesn’t have to use a prop named Render, it can actually use any prop

• The technique for calling prop a function and telling the component what to render is called the Render props mode

• Recommendation: Use children instead of the Render property

  <Counter>
      {({count, handleCount}) = > <button onClick={handleCount}>I got hit {count} times</button> }
  </Counter>
  // Inside the component:
  this.props.children(this.state.count, this.state.handleCount)
  Copy the code

  // Context usage:
  <Consumer>
      {data= > <span>The data argument represents the data received -- {data}</span>}
  </Consumer>
  Copy the code

High order component

• HOC is a function that accepts the component to be wrapped and returns the enhanced component

• Create a class component within the high-level component that provides reusable state logic code that is passed to the WrappedComponent WrappedComponent via prop

  const EnhancedComponent = withCounter(WrappedComponent)
  
  // Class components created inside higher-order components:
  class Counter extends React.Component {
      render() {
          return <WrappedComponent count={this.state.count}, handleCount={this.handleCount} />}}Copy the code

Using the step

1. Create a function with a name convention beginning with

2. Specifies function arguments that should start with a capital letter (as the component to be rendered)

3. Creates a class component inside the function, provides the code for the consumed status logic, and returns this component

4. In this component, the parameter component is rendered and the state is passed to the parameter component via prop

5. Call the higher-order component, pass in the component to be enhanced, get the enhanced component with the return value, and render it to the page

   function withCounter(WrappedComponent) {  
       class Counter extends React.Component {}  
       return Counter
   }
   
   // In the render method:
   return <WrappedComponent count={this.state.count}, handleCount={this.handleCount} />
   Copy the code

Pass props

• Problem: Props is missing

• Cause: The higher-order component did not pass props down

• Solution: When rendering WrappedComponent, pass state and this.props to the component

• Mode of transmission:

  <WrappedComponent {... this.state} {... this.props} />Copy the code

conclusion

1. Component communication is an essential part of building React applications.
2. The flexibility of props makes components even more powerful.
3. State raising is a common pattern for React components.
4. The component lifecycle helps you understand how a component runs.
5. Hook functions allow developers to perform certain functions at specific times.
6. Both the Render props pattern and higher-order components can reuse component state logic.
7. Component minimalist model: (state, props) => UI