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

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

1、直接把相同的代码复制一份到须要使用的组件中(很是low的方式)

2、建立一个高阶组件,将复用的代码存放到高阶组件中,须要使用的组件中直接复用

• 一、定义一个高阶组件

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

• 二、普通组件的代码

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

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

  export default withCounter(ReuseComponent1);
  复制代码

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

• 一、定义组件

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

• 二、组件的调用

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

4、使用自定义hooks

1、关于自定义hooks的认识

• 一、有时候咱们会想要在组件之间重用一些状态逻辑
• 二、自定义Hook可让你在不增长组件的状况下达到一样的目的
• 三、Hook 是一种复用状态逻辑的方式，它不复用 state 自己
• 四、事实上 Hook 的每次调用都有一个彻底独立的 state
• 五、自定义 Hook 更像是一种约定，而不是一种功能。若是函数的名字以 use 开头，而且调用了其余的 Hook，则就称其为一个自定义 Hook

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

• 一、自定义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];
  }
  复制代码

• 二、使用

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