在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>
    )
  }
  复制代码