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>
    )
  }
  複製代碼