React16.8组件代码复用的4种方式

在react项目开发中经常会遇到有一些代码复用的问题,现介绍几种常见的方式

一、直接把相同的代码复制一份到需要使用的组件中(非常low的方式)

二、创建一个高阶组件,将复用的代码存放到高阶组件中,需要使用的组件中直接复用

• 1、定义一个高阶组件

    import React from 'react';

    function withCounter(Component) {
      return class extends React.Component {
        state = { number: 0 };
        componentDidMount() {
          setInterval(() => {
            this.setState({ number: this.state.number + 1 });
          }, 1000);
        }
        render() {
          return (
            <Component number={this.state.number} />
          )
        }
      }
    }

• 2、普通组件的代码

    class ReuseComponent1 extends React.Component {
      render() {
        return (
          <>
            <button>{this.props.number}</button>
          </>
        )
      }
    }

• 3、使用高阶组件将普通组件包装

    export default withCounter(ReuseComponent1);

三、使用render函数使组件达到复用

• 1、定义组件

    import React, { Component } from 'react'

    export default class ReuseComponent2 extends Component {
      state = { number: 0 };

      componentDidMount() {
        setInterval(() => {
          this.setState({ number: this.state.number + 1 });
        }, 1000);
      }
      render() {
        return (
          <div>
            {/* 直接调用传递过来的render属性(这里传递的是一个函数) */}
            {this.props.render({ number: this.state.number })}
          </div>
        )
      }
    }

• 2、组件的调用

    // render里面传递的是一个函数
    <ReuseComponent2 render={props => <p>{props.number}</p>} />

四、使用自定义hooks

一、关于自定义hooks的认识

• 1、有时候我们会想要在组件之间重用一些状态逻辑
• 2、自定义Hook可以让你在不增加组件的情况下达到同样的目的
• 3、Hook 是一种复用状态逻辑的方式，它不复用 state 本身
• 4、事实上 Hook 的每次调用都有一个完全独立的 state
• 5、自定义 Hook 更像是一种约定，而不是一种功能。如果函数的名字以 use 开头，并且调用了其他的 Hook，则就称其为一个自定义 Hook

二、使用自定义hooks达到代码的复用

• 1、自定义hooks函数

    import React, { useState, useEffect } from 'react';

    /**
     * 自定义hooks,以use开头的名字并且使用内置的hooks
     */
    function useNumber() {
      let [number, setNumber] = useState(0);

      useEffect(() => {
        setInterval(() => {
          setNumber(number => number + 1);
        }, 1000);
      }, []);

      return [number, setNumber];
    }

• 2、使用

    export default () => {
      let [number, setNumber] = useNumber();
      return (
        <div>{number}</div>
      )
    }