Best Practices for Sharing React Code

When any project develops to a certain complexity, it will inevitably face the problem of logic reuse. There are usually several ways to implement logic reuse in React : Mixin ,高階組件(HOC) ,修飾器(decorator) , Render Props , Hook . This article mainly analyzes the advantages and disadvantages of the above methods to help developers make more suitable methods for business scenarios.

Mixin

This may be the first method that developers who have just switched from Vue to React can think of. Mixin has been widely used in various object-oriented languages. Its role is to create an effect similar to multiple inheritance for single-inheritance languages. Although React has now abandoned it, Mixin was indeed a design pattern React to achieve code sharing.

The generalized mixin method is to use assignment to attach all methods in the mixin object to the original object to achieve object mixing, similar to the function of Object.assign() in ES6. Here’s how it works:

const mixin = function (obj, mixins) {
  const newObj = obj
  newObj.prototype = Object.create(obj.prototype)

  for (let prop in mixins) {
    // Traverse the properties of mixins if (mixins.hasOwnPrototype(prop)) {
      // Determine whether it is a mixin's own property newObj.prototype[prop] = mixins[prop]; // Assignment}
  }
  return newObj
};

Using Mixins in React

Suppose in our project, multiple components need to set the default name attribute. Using mixin can save us from having to write multiple identical getDefaultProps methods in different components. We can define a mixin :

const DefaultNameMixin = {
  getDefaultProps: function () {
    return {
      name: "Joy"
    }
  }
}

To use mixin , we need to add a mixins property to the component, then wrap mixin we wrote into an array and use it as the attribute value of mixins :

const ComponentOne = React.createClass({
  mixins: [DefaultNameMixin]
  render: function () {
    return <h2>Hello {this.props.name}</h2>
  }
})

The written mixin can be reused in other components.

Since mixins attribute value is an array, it means we can call multiple mixin in the same component. A slight change in the above example yields:

const DefaultFriendMixin = {
  getDefaultProps: function () {
    return {
      friend: "Yummy"
    }
  }
}

const ComponentOne = React.createClass({
  mixins: [DefaultNameMixin, DefaultFriendMixin]
  render: function () {
    return (
      <div>
        <h2>Hello {this.props.name}</h2>
        <h2>This is my friend {this.props.friend}</h2>
      </div>
    )
  }
})

We can even include other mixin in a mixin .

For example, write a new mixin``DefaultProps that contains the above DefaultNameMixin and DefaultFriendMixin :

const DefaultPropsMixin = {
  mixins: [DefaultNameMixin, DefaultFriendMixin]
}

const ComponentOne = React.createClass({
  mixins: [DefaultPropsMixin]
  render: function () {
    return (
      <div>
        <h2>Hello {this.props.name}</h2>
        <h2>This is my friend {this.props.friend}</h2>
      </div>
    )
  }
})

At this point, we can conclude that mixin has at least the following advantages:

• The same mixin can be used in multiple components;
• You can use multiple mixin in the same component;
• You can nest multiple mixin in the same mixin ;

However, in different scenarios, advantages may also turn into disadvantages:

• Destroy the encapsulation of the original component, and you may need to maintain new states such as state and props ;
• The naming in different mixin is unknown and conflicts are very likely to occur;
• Recursive calling problems may occur, increasing project complexity and maintenance difficulty;

In addition, mixin has its own processing logic for issues such as state conflicts, method conflicts, and the order in which multiple lifecycle methods are called. Interested students can refer to the following articles:

Using React Mixins

Mixins Considered Harmful

Higher-order components

Due to the above defects of mixin , React stripped out mixin and replaced it with高階組件.

高階組件is essentially a function that takes a component as a parameter and returns a new component.

React officials also used高階組件when implementing some common components, such as withRouter in react-router and connect in Redux . Here we take withRouter as an example.

By default, only components that have been rendered by Route routing matching have this.props and路由參數, and can use函數式導航to execute this.props.history.push('/next') to jump to the page of the corresponding route. The function of withRouter in高階組件is to wrap a component that is not wrapped by Route route into Route , so as to put the three objects of react-router history , location , and match into props attribute of the component, so as to realize函數式導航跳轉.

The implementation principle of withRouter :

const withRouter = (Component) => {
  const displayName = `withRouter(${Component.displayName || Component.name})`
  const C = props => {
    const { wrappedComponentRef, ...remainingProps } = props
    return (
      <RouterContext.Consumer>
        {context => {
          invariant
            context,
            `You should not use <${displayName} /> outside a <Router>`
          );
          return (
            <Component
              {...remainingProps}
              {...context}
              ref={wrappedComponentRef}
            />
          )
        }}
      </RouterContext.Consumer>
    )
}

Use code:

import React, { Component } from "react"
import { withRouter } from "react-router"
class TopHeader extends Component {
  render() {
    return (
      <div>
        Navigation bar {/* Click to jump to login */}
        <button onClick={this.exit}>Exit</button>
      </div>
    )
  }

  exit = () => {
    // After being wrapped by the withRouter high-order function, you can use this.props to jump to the operation this.props.history.push("/login")
  }
}
// Use withRouter to wrap the component and return history, location, etc. export default withRouter(TopHeader)

Since the essence of高階組件is獲取組件并且返回新組件的方法, in theory it can also achieve multiple nesting like mixin .

For example:

Write a high-order function that enables singing

import React, { Component } from 'react'

const widthSinging = WrappedComponent => {
	return class HOC extends Component {
		constructor () {
			super(...arguments)
			this.singing = this.singing.bind(this)
		}

		singing = () => {
			console.log('i am singing!')
		}

		render() {
			return <WrappedComponent />
		}
	}
}

Write a high-order function that enables dancing

import React, { Component } from 'react'

const widthDancing = WrappedComponent => {
	return class HOC extends Component {
		constructor () {
			super(...arguments)
			this.dancing = this.dancing.bind(this)
		}

		dancing = () => {
			console.log('i am dancing!')
		}

		render() {
			return <WrappedComponent />
		}
	}
}

Use the above high-level components

import React, { Component } from "react"
import { widthSing, widthDancing } from "hocs"

class Joy extends Component {
  render() {
    return <div>Joy</div>
  }
}

// Give Joy the ability to sing and dance export default widthSinging(withDancing(Joy))

From the above, we can see that by simply wrapping it with higher-order functions, we can turn the originally simple Joy into a little prince of a nightclub who can both sing and dance!

Conventions for using HOCs

• When using HOC , there are some conventions:
• Passing irrelevant Props to the wrapped component (passing props that are irrelevant to its specific content);
• Step-by-step combination (avoid serial calls of different forms of HOC);
• Contains the displayName for debugging purposes (each HOC should have a display name that complies with the rules);
• Do not use higher-order components in the render function (each time you render, the higher-order component returns a new component, affecting diff performance);
• Static methods must be copied (the new component returned by the higher level will not contain the static methods of the original component);
• Avoid using ref (ref will not be passed);

Pros and Cons of HOC

At this point we can summarize the advantages of高階組件(HOC) :

• HOC is a pure function, which is easy to use and maintain;
• Also, because HOC is a pure function, it supports passing in multiple parameters, which enhances its scope of application;
• HOC returns a component that can be combined and nested, with strong flexibility;

Of course, HOC also has some problems:

• When multiple HOC are nested, it is impossible to directly determine which HOC is responsible for passing props of the child component;
• When parent and child components have props with the same name, the parent component will overwrite the child component's props with the same name, and react will not report an error, which makes developers less aware of it.
• Each HOC returns a new component, which generates many useless components and deepens the component hierarchy, making it difficult to troubleshoot problems.

修飾器and高階組件belong to the same pattern and will not be discussed here.

Render Props

Render Props is a very flexible and highly reusable pattern. It can encapsulate specific behaviors or functions into a component and provide it to other components for use, giving them such capabilities.

The term "render prop" refers to a technique for sharing code between React components using a prop whose value is a function.

This is React official definition of Render Props , which translates to " Render Props is a technology for implementing code sharing between React Components . props of a component contains a function -type property, props the component can call to implement the component's internal rendering logic."

Official example:

<DataProvider render={(data) => <h1>Hello {data.target}</h1>} />

As shown above, the DataProvider component has a props property called render (it can also be called other names). This property is a function, and this function returns a React Element . The rendering is completed by calling this function inside the component, so this component uses render props technology.

Readers may wonder, "Why do we need to call props attribute to achieve internal rendering of the component instead of completing the rendering directly in the component?" To borrow React 's official reply, render props is not a skill that every React developer needs to master, and you may never use this method, but its existence does provide developers with an additional option when thinking about component code sharing.

Render Props usage scenarios

We may need to use pop-up windows frequently in project development. The pop-up window UI can be varied, but the functions are similar, that is,打開and關閉. Take antd as an example:

import { Modal, Button } from "antd"
class App extends React.Component {
  state = { visible: false }

  // Control the display and hiding of the pop-up window toggleModal = (visible) => {
    this.setState({ visible })
  };

  handleOk = (e) => {
    // Do something this.setState({ visible: false })
  }

  render() {
    const { visible } = this.state
    return (
      <div>
        <Button onClick={this.toggleModal.bind(this, true)}>Open</Button>
        <Modal
          title="Basic Modal"
          visible={visible}
          onOk={this.handleOk}
          onCancel={this.toggleModal.bind(this, false)}
        >
          <p>Some contents...</p>
        </Modal>
      </div>
    )
  }
}

The above is the simplest example of using Model . Even for simple usage, we still need to pay attention to its display status and implement its switching method. But developers actually only want to focus on onOk related to business logic. The ideal way to use it should be like this:

<MyModal>
  <Button>Open</Button>
  <Modal title="Basic Modal" onOk={this.handleOk}>
    <p>Some contents...</p>
  </Modal>
</MyModal>

The above usage can be achieved through render props :

import { Modal, Button } from "antd"
class MyModal extends React.Component {
  state = { on: false }

  toggle = () => {
    this.setState({
      on: !this.state.on
    })
  }

  renderButton = (props) => <Button {...props} onClick={this.toggle} />

  renderModal = ({ onOK, ...rest }) => (
    <Modal
      {...rest}
      visible={this.state.on}
      onOk={() => {
        onOK && onOK()
        this.toggle()
      }}
      onCancel={this.toggle}
    />
  )

  render() {
    return this.props.children({
      Button: this.renderButton,
      Modal: this.renderModal
    })
  }
}

In this way, we have completed a Modal with status and basic functions. When we use this Modal on other pages, we only need to focus on specific business logic.

As can be seen above, render props is a real React component, not just a function that can return a component like HOC . This also means that using render props will not cause component hierarchical nesting problems like HOC , and there is no need to worry about the coverage problem caused by props naming conflicts.

Limitations of using render props

箭頭函數should be avoided in render props as they can have a performance impact.

for example:

// Bad example class MouseTracker extends React.Component {
  render() {
    return (
      <Mouse render={mouse => (
        <Cat mouse={mouse} />
      )}/>
    )
  }
}

This is not a good way to write it, because the render method may be rendered multiple times. Using箭頭函數will cause the value passed into render to be different each time it is rendered, but in fact there is no difference, which will cause performance problems.

So a better way to write it should be to define the function passed into render as an instance method, so that even if we render multiple times, the same function is always bound.

// Good example class MouseTracker extends React.Component {
  renderCat(mouse) {
  	return <Cat mouse={mouse} />
  }

  render() {
    return (
		  <Mouse render={this.renderTheCat} />
    )
  }
}

Pros and Cons of render props

advantage

• The props names can be modified and there is no mutual overwriting;
• Be clear about the source of props;
• There will be no multi-layer nesting of components;

shortcoming

• The writing is cumbersome;
• Data cannot be accessed outside of a return statement;
• It is easy to generate nested function callbacks;

The following code:

const MyComponent = () => {
  return (
    <Mouse>
      {({ x, y }) => (
        <Page>
          {({ x: pageX, y: pageY }) => (
            <Connection>
              {({ api }) => {
                // yikes
              }}
            </Connection>
          )}
        </Page>
      )}
    </Mouse>
  )
}

Hook

The core of React is components. Therefore, React has been committed to optimizing and improving the way to declare components. From the earliest類組件to函數組件, each has its own advantages and disadvantages.類組件can provide us with a complete life cycle and state, but they are very cumbersome to write. Although函數組件are very concise and lightweight to write, they are limited in that they must be pure functions, cannot contain states, and do not support life cycles. Therefore,類組件cannot replace函數組件.

The React team felt that the best way to write components should be functions rather than classes, which gave rise to React Hooks .

The design purpose of React Hooks is to enhance the function component, so that a full-featured component can be written without using "classes" at all.

Why are類組件"bulky"? Let's use an official React example to illustrate:

import React, { Component } from "react"

export default class Button extends Component {
  constructor() {
    super()
    this.state = { buttonText: "Click me, please" }
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick() {
    this.setState(() => {
      return { buttonText: "Thanks, been clicked!" }
    })
  }
  render() {
    const { buttonText } = this.state
    return <button onClick={this.handleClick}>{buttonText}</button>
  }
}

The above is a simple button component, which contains the most basic state and click method. The state changes after clicking the button.

This is a very simple functional component, but it requires a lot of code to implement. Since函數組件do not contain states, we cannot use函數組件to declare a component with the above functions. But we can use Hook to achieve this:

import React, { useState } from "react"

export default function Button() {
  const [buttonText, setButtonText] = useState("Click me, please")

  function handleClick() {
    return setButtonText("Thanks, been clicked!")
  }

  return <button onClick={handleClick}>{buttonText}</button>
}

In comparison, Hook is lighter and retains its own state while being close to函數組件.

In the above example, the first hook useState() is introduced. In addition, React officially provides hooks such as useEffect() , useContext() , and useReducer() . For details on specific hooks and their usage, please see the official website.

The flexibility of Hook also lies in that in addition to the official basic hooks, we can also use these basic hooks to encapsulate and customize hooks, thereby achieving easier code reuse.

Hooks Pros and Cons

advantage

• Easier code reuse;
• Clean code style;
• Less code;

shortcoming

• The state is not synchronized (functions run independently, each function has an independent scope)
• Need to use useEffect more reasonably
• Small granularity, many hook need to be abstracted for complex logic

Summarize

In addition to Mixin being slightly behind due to its own obvious defects, there is no最佳方案for高階組件, render props , and react hook . They all have advantages and disadvantages. Even the most popular react hook , although each hook looks so short and clear, in actual business, usually one business function corresponds to multiple hook , which means that when the business changes, it is necessary to maintain changes to multiple hook . Compared with maintaining a class , the mental burden may increase a lot.最佳方案is the one that suits your business.

Reference Documents:

Using React Mixins

Mixins Considered Harmful

Higher-Order Components

Render Props

React Miscellanea: Render Props and Its Use Cases

Introduction to Hooks

This is the end of this article about the best practices of React code sharing. For more relevant React code sharing content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!