Introduction to the method of rendering list in React (with code)

This article brings you an introduction to the method of rendering lists in React (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

For a display page, there are usually several display states (take the list page as an example):

The data is empty, empty page
An error occurred when fetching data, error Page
Data is normal
Loading status
For the above three situations, when react renders the list, it must correctly judge and render the corresponding view, which is conditional rendering. Different from vue's v-if, v- The api provided by frameworks such as show, and the conditional rendering of react are all native to js with a little bit of hack. For example, as mentioned in the react document. if/else, && and sanmu, etc.

Of course the above These are some commonly used methods, but there are also various problems. For example, when there are too many conditional branches, the code will become more and more messy. Here are several universal methods

if/else, ternary and short-circuit operators

These three methods are mentioned in the official documents, and are put together here. In fact, these three solutions are similar: Make corresponding judgments in the render life cycle. However, the ternary and short-circuit operators can be used within the jsx line.

if/else

class List extends Component {
  static propTypes = {
    status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])
  }
  
  render () {
    const { status } = this.props
    if (status === 'loading') {
      return <div>
        加载状态
      </div>
    } 
    
    if (status === 'error') {
      return  <div>
        错误状态
      </div>
    }


    if (status === 'success') {
      return  <div>
        成功状态
      </div>
    }

    if (status === 'empty') {
      return  <div>
        空状态
      </div>
    }
  }
}

You can see that this writing method is more clear and clear. However, if more and more judgment branches are made, the code will inevitably be very redundant, and the reusability is also worrying.

Render (IF) component

The render here is of course not part of the life cycle. render, we can correspond to the v-if in vue

function Render ({ if: cond, children }) {
    return cond ? children : null
}

The above is a simple Render component, how to use it

class List extends Component {
    static propTypes = {
        status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])
    }
    
  render () {
    const { status }  = this.props
    return (
      <div>
        <Render if={status === &#39;loading&#39;} >
          加载状态
        </Render>

        <Render if={status === &#39;error&#39;} >
          错误状态
        </Render>

        <Render if={status === &#39;success&#39;} >
          成功状态
        </Render>

        <Render if={status === &#39;empty&#39;} >
          空状态
        </Render>
      </div>
    )
    }
}

Compared with using a lot of if in render /else The above writing method is undoubtedly clearer. If all list business components are unified and the status remains consistent, we can do a higher level of abstraction and abstract other status into a high-order function. When we write code Just make sure that the success state can be rendered correctly

Immediately execute the function

You can write variables in jsx, and you can also execute the function immediately

class List extends Component {
  static propTypes = {
      status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])
  }
  
  render () {
    const { status }  = this.props
    return (
      <div>
        {(() => {
          switch (status) {
            case 'loading':
              return <div>加载状态</div>
            
            case 'error':
              return <div>错误状态</div>
            
            case 'success':
              return <div>成功状态</div>
            
            case 'empty':
              return <div>空状态</div>
          }
        })()}
      </div>
    )
  }
}

Replication of the immediate function It is obviously not practical to use, so the applicable scenario of immediate function is the kind of components that are relatively complex but cannot be reused

High-order components

I will not go into details about the concept of high-order components. , we put the logic of conditional rendering into high-order components. In addition to abstracting the logic, we can also improve the reuse rate of components.

const withList = WrappedComponent => {
  return class PP extends Component {
    render() {
      const { status } = this.props
      switch (status) {
        case 'loading':
          return <div>加载状态</div>
        
        case 'error':
          return <div>错误状态</div>
        
        case 'success':
          return <WrappedComponent {...this.props}/>
        
        case 'empty':
          return <div>空状态</div>
      }
    }
  }
}

If we can ensure that the props of all lists are consistent (that is, they all use status to determine the status), we can completely focus on writing status as the status of success:

@withList
class List extends Component {
  static propTypes = {
    status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])
  }
  
  render () {
    return (
      <div>
        成功页面
      </div>
    )
  }
}

Secondly, we can extract the loading, error, and empty status into components, which will undoubtedly play a role in improving the reuse rate of components. Very useful.

The above is the detailed content of Introduction to the method of rendering list in React (with code). For more information, please follow other related articles on the PHP Chinese website!