使用?React?Hooks?重構(gòu)類組件的示例詳解

更新時間：2022年07月18日 14:12:33 作者：GUOZE

這篇文章主要介紹了如何使用?React?Hooks?重構(gòu)類組件,本文就來通過一些常見示例看看如何使用 React Hooks 來重構(gòu)類組件，需要的朋友可以參考下

最初，在 React 中可以使用 createClass 來創(chuàng)建組件，后來被類組件所取代。在 React 16.8 版本中，新增的 Hooks 功能徹底改變了我們編寫 React 程序的方式，使用 Hooks 可以編寫更簡潔、更清晰的代碼，并為創(chuàng)建可重用的有狀態(tài)邏輯提供了更好的模式。

許多公司和開發(fā)人員都放棄了類組件轉(zhuǎn)而使用 Hooks。而許多舊的的React 項目仍然在使用類組件。更重要的是，在類組件中有 Error Boundaries，而函數(shù)組件中是無法使用 Error Boundaries 的。

本文就來通過一些常見示例看看如何使用 React Hooks 來重構(gòu)類組件。

1. 管理和更新組件狀態(tài)

狀態(tài)管理是幾乎所有 React 應(yīng)用中最重要的部分，React 基于 state 和 props 渲染組件。每當(dāng)它們發(fā)生變化時，組件就會重新渲染，并且 DOM 也會相應(yīng)地更新。下面來看一個計數(shù)器的例子，它包含一個計數(shù)狀態(tài)以及兩個更新它的地方：

import { Component } from "react";
class ManagingStateClass extends Component {
  state = {
    counter: 0,
  };
  increment = () => {
    this.setState(prevState => {
      return {
        counter: prevState.counter + 1,
      };
    });
  };
  decrement = () => {
    this.setState(prevState => {
      return {
        counter: prevState.counter - 1,
      };
    });
  };
  
  render() {
    return (
      <div>
        <div>Count: {this.state.counter}</div>
        <div>
          <button onClick={this.increment}>Increment</button>
          <button onClick={this.decrement}>Decrement</button>
        </div>
      </div>
    );
  }
}
export default ManagingStateClass;

下面來使用 Hooks 實現(xiàn)這個計數(shù)器組件：

import { useState } from "react";
const ManagingStateHooks = () => {
  const [counter, setCounter] = useState(0);
  const increment = () => setCounter(counter => counter + 1);
  const decrement = () => setCounter(counter => counter - 1);
  return (
    <div>
      <div>Count: {counter}</div>
      <div>
        <button onClick={increment}>Increment</button>
        <button onClick={decrement}>Decrement</button>
      </div>
    </div>
  );
};
export default ManagingStateHooks;

該組件是一個返回 JSX 的函數(shù)，使用 useState? hook來管理計算器的狀態(tài)。它返回一個包含兩個值的數(shù)組：第一個值為狀態(tài)，第二個值為更新函數(shù)。并且使用 setCounter? 來更新程序的increment和decrement函數(shù)。

2. 狀態(tài)更新后的操作

在某些情況下，我們可能需要在狀態(tài)更新時執(zhí)行某些操作。在類組件中，我們通常會在componentDidUpdate 生命周期中實現(xiàn)該操作。

import { Component } from "react";
class StateChangesClass extends Component {
  state = {
    counter: 0,
  };
  componentDidUpdate(prevProps, prevState) {
    localStorage.setItem("counter", this.state.counter);
  }
  increment = () => {
    this.setState(prevState => {
      return {
        counter: prevState.counter + 1,
      };
    });
  };
  
  decrement = () => {
    this.setState(prevState => {
      return {
        counter: prevState.counter - 1,
      };
    });
  };
  render() {
    return (
      <div>
        <div>Count: {this.state.counter}</div>
        <div>
          <button onClick={this.increment}>Increment</button>
          <button onClick={this.decrement}>Decrement</button>
        </div>
      </div>
    );
  }
}
export default StateChangesClass;

當(dāng)狀態(tài)發(fā)生變化時，我們將新的計數(shù)器值保存在 localStorage? 中。在函數(shù)組件中，我們可以通過使用 useEffect hook 來實現(xiàn)相同的功能。

import { useState, useEffect } from "react";
const StateChangesHooks = () => {
  const [counter, setCounter] = useState(0);
  const increment = () => setCounter(counter => counter + 1);
  const decrement = () => setCounter(counter => counter - 1);
  useEffect(() => {
    localStorage.setItem("counter", counter);
  }, [counter]);
  
  return (
    <div>
      <div>Count: {counter}</div>
      <div>
        <button onClick={increment}>Increment</button>
        <button onClick={decrement}>Decrement</button>
      </div>
    </div>
  );
};
export default StateChangesHooks;

這個 useEffect? hook 有兩個參數(shù)，第一個參數(shù)是回調(diào)函數(shù)，第二個參數(shù)是依賴數(shù)組。在組件掛載時，這個 hook? 至少會執(zhí)行一次。然后，僅在依賴數(shù)組內(nèi)的任何值發(fā)生變化時都會觸發(fā)第一個參數(shù)傳入的回調(diào)函數(shù)。如果依賴數(shù)組為空，則回調(diào)函數(shù)只會執(zhí)行一次。在上面的例子中，每當(dāng) counter? 發(fā)生變化時，都會觸發(fā)將 counter? 保存在 localStorage 中的回調(diào)函數(shù)。

3. 獲取數(shù)據(jù)

在類組件中，通過會在componentDidMount生命周期中初始化一個 API 請求來獲取數(shù)據(jù)。下面來看一個獲取并顯示帖子列表的組件：

import { Component } from "react";
class FetchingDataClass extends Component {
  state = {
    posts: [],
  };
  componentDidMount() {
    this.fetchPosts();
  }
  fetchPosts = async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const data = await response.json();
    this.setState({
      posts: data.slice(0, 10),
    });
  };
  
  render() {
    return (
      <div>
        {this.state.posts.map(post => {
          return <div key={post.id}>{post.title}</div>;
        })}
      </div>
    );
  }
}
export default FetchingDataClass

有了 hooks，就可以使用useEffect?來實現(xiàn)上述功能。它會在第一次掛載之后執(zhí)行一次，然后在任何依賴發(fā)生變化時再次觸發(fā)。useEffect? 允許我們傳入一個空依賴數(shù)組作為第二個參數(shù)來確保只執(zhí)行一次effect的回調(diào)函數(shù)。

import { useState, useEffect } from "react";
const FetchingDataHooks = () => {
  const [posts, setPosts] = useState([]);
  const fetchPosts = async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const data = await response.json();
    setPosts(data.slice(0, 10));
  };
  useEffect(() => {
    fetchPosts();
  }, []);
  
  return (
    <div>
      {posts.map(post => {
         return <div key={post.id}>{post.title}</div>;
      })}
    </div>
  );
};
export default FetchingDataHooks;

4. 卸載組件時清理副作用

在卸載組件時清理副作用是非常重要的，否則可能會導(dǎo)致內(nèi)存泄露。例如，在一個組件中，我們想要監(jiān)聽一個事件，比如resize?或者scroll?，并根據(jù)窗口大小或滾動的位置來做一些事情。下面來看一個類組件的例子，它會監(jiān)聽 resize? 事件，然后更新瀏覽器窗口的寬度和高度的狀態(tài)。事件監(jiān)聽器在 componentWillUnmount 生命周期中被移除。

import { Component } from "react";
class CleanupClass extends Component {
  state = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  componentDidMount() {
    window.addEventListener("resize", this.updateWindowSize, {
      passive: true,
    });
  }
  componentWillUnmount() {
    window.removeEventListener("resize", this.updateWindowSize, {
      passive: true,
    });
  }
  
  updateWindowSize = () => {
    this.setState({
      width: window.innerWidth,
      height: window.innerHeight,
    });
  };
  render() {
    return (
      <div>
        Window: {this.state.width} x {this.state.height}
      </div>
    );
  }
}
export default CleanupClass;

在 useEffect? 中，我們可以在回調(diào)函數(shù)中返回一個函數(shù)來執(zhí)行清理操作，卸載組件時會調(diào)用此函數(shù)。下面，首先來定義一個 updateWindowSize? 函數(shù)，然后在 useEffect? 中添加 resize 事件監(jiān)聽器。接下來返回一個匿名箭頭函數(shù)，它將用來移除監(jiān)聽器。

import { useState, useEffect } from "react";
const CleanupHooks = () => {
  const [width, setWidth] = useState(window.innerWidth);
  const [height, setHeight] = useState(window.innerHeight);
  useEffect(() => {
    const updateWindowSize = () => {
      setWidth(window.innerWidth);
      setHeight(window.innerHeight);
    };
    window.addEventListener("resize", updateWindowSize, {
      passive: true,
    });
    return () => {
      window.removeEventListener("resize", this.updateWindowSize, {
        passive: true,
      });
    };
  }, []);
  
  return (
      <div>
        Window: {this.state.width} x {this.state.height}
      </div>
  );
};
export default CleanupHooks;

5. 防止組件重新渲染

React 非?？?，通常我們不必?fù)?dān)心過早的優(yōu)化。但是，在某些情況下，優(yōu)化組件并確保它們不會過于頻繁地重新渲染是很有必要的。

例如，減少類組件重新渲染的常用方法是使用 PureComponent? 或者 shouldComponentUpdate? 生命周期。下面例子中有兩個類組件（父組件和子組件），父組件有兩個狀態(tài)值：counter? 和 fruit?。子組件只在父組件的 fruit? 發(fā)生變化時重新渲染。所以，使用 shouldComponentUpdat?e 生命周期來檢查 fruit 屬性是否改變。如果相同，則子組件不會重新渲染。

父組件：

import { Component } from "react";
import PreventRerenderClass from "./PreventRerenderClass.jsx";
function randomInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
const fruits = ["banana", "orange", "apple", "kiwi", "mango"];
class PreventRerenderExample extends Component {
  state = {
    fruit: null,
    counter: 0,
  };
  pickFruit = () => {
    const fruitIdx = randomInteger(0, fruits.length - 1);
    const nextFruit = fruits[fruitIdx];
    this.setState({
      fruit: nextFruit,
    });
  };
  componentDidMount() {
    this.pickFruit();
  }
  render() {
    return (
      <div>
        <h3>
          Current fruit: {this.state.fruit} | counter: {this.state.counter}
        </h3>
        <button onClick={this.pickFruit}>挑一個水果</button>
        <button
          onClick={() =>
            this.setState(({ counter }) => ({
              counter: counter + 1,
            }))
          }
        >
          Increment
        </button>
        <button
          onClick={() =>
            this.setState(({ counter }) => ({ counter: counter - 1 }))
          }
        >
          Decrement
        </button>
        <div className="section">
          <PreventRerenderClass fruit={this.state.fruit} />
        </div>
      </div>
    );
  }
}
export default PreventRerenderExample;

子組件：

import { Component } from "react";
class PreventRerenderClass extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.fruit !== nextProps.fruit;
  }
  render() {
    return (
      <div>
        <p>Fruit: {this.props.fruit}</p>
      </div>
    );
  }
}
export default PreventRerenderClass;

隨著 hooks 的引入，我們得到了一個新的高階組件，稱為 memo。它可用于優(yōu)化性能并防止函數(shù)組件重新渲染。下面來看看它是怎么用的。

父組件：

import { useState, useEffect } from "react";
import PreventRerenderHooks from "./PreventRerenderHooks.jsx";
function randomInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
const fruits = ["banana", "orange", "apple", "kiwi", "mango"];
const PreventRerenderExample = () => {
  const [fruit, setFruit] = useState(null);
  const [counter, setCounter] = useState(0);
  const pickFruit = () => {
    const fruitIdx = randomInteger(0, fruits.length - 1);
    const nextFruit = fruits[fruitIdx];
    setFruit(nextFruit);
  };
  useEffect(() => {
    pickFruit();
  }, []);
  return (
    <div>
      <h3>
        Current fruit: {fruit} | counter: {counter}
      </h3>
      <button onClick={pickFruit}>挑一個水果</button>
      <button onClick={() => setCounter(counter => counter + 1)}>
        Increment
      </button>
      <button onClick={() => setCounter(counter => counter - 1)}>
        Decrement
      </button>
      <div className="section">
        <PreventRerenderHooks fruit={fruit} />
      </div>
    </div>
  );
};
export default PreventRerenderExample;

子組件：

import { memo } from "react";
const PreventRerenderHooks = props => {
  return (
    <div>
      <p>Fruit: {props.fruit}</p>
    </div>
  );
};
export default memo(PreventRerenderHooks);

PreventRerenderHooks? 組件使用 memo? 組件包裝，并且僅在 props 中的 fruit 發(fā)生變化時發(fā)揮重新渲染。需要注意，memo組件執(zhí)行的是淺比較，因此如果需要更好地控制memo?組件何時重新渲染，可以提供自己的函數(shù)來執(zhí)行 props 比較。

import { memo } from "react";
const PreventRerenderHooks = props => {
  return (
    <div>
      <p>Fruit: {props.fruit}</p>
    </div>
  );
};
export default memo(PreventRerenderHooks, (prevProps, nextProps) => {
  return prevProps.fruit !== nextProps.fruit
});

6. Context API

Context API 是一個很好用的工具，可以為組件層次結(jié)構(gòu)中不同級別的組件提供值。可以使用 React 提供的 createContext? 方法創(chuàng)建新的上下文。先來看一個在類組件中使用 context 的例子。

Context Provider：

import { createContext } from "react";

export const UserContext = createContext();
export const UserActionsContext = createContext();

在父組件中，向消費者提供了 UserContext? 和 UserActionsContext。

import { Component, createContext } from "react";
import ContextApiClassConsumer from "./ContextApiClassConsumer.jsx";
import { UserContext, UserActionsContext } from "./userContext.js";
class ContextApiHooksProvider extends Component {
  state = {
    user: {
      name: "Class",
    },
  };
  setUser = user => this.setState({ user });
  render() {
    return (
      <UserContext.Provider value={this.state.user}>
        <UserActionsContext.Provider value={this.setUser}>
          <ContextApiClassConsumer />
        </UserActionsContext.Provider>
      </UserContext.Provider>
    );
  }
}
export default ContextApiHooksProvider;

這里 ContextApiClassConsumer? 組件就可以獲取到父組件提供的user和setUser。

Context Consumer：

import { Component } from "react";
import { UserContext, UserActionsContext } from "./userContext.js";
class ContextApiClassConsumer extends Component {
  render() {
    return (
      <UserContext.Consumer>
        {user => (
          <UserActionsContext.Consumer>
            {setUser => (
              <div>
                <input
                  type="text"
                  value={user.name}
                  onChange={e =>
                    setUser({
                      name: e.target.value,
                    })
                  }
                />
              </div>
            )}
          </UserActionsContext.Consumer>
        )}
      </UserContext.Consumer>
    );
  }
}
export default ContextApiClassConsumer;

在上面的例子中，UserContext.Consumer? 組件的子函數(shù)接收 user 狀態(tài)，UserActionsContext.Consumer? 的子函數(shù)接收 setUser 方法。

使用 Hooks 實現(xiàn)和上面的代碼非常類似，但是會更簡潔。同樣，我們使用 UserContext.Provider? 和 UserActionsContext.Provider? 組件來提供 user? 狀態(tài)和 setUser 方法。

Context Provider：

import { useState } from "react";
import ContextApiHooksConsumer from "./ContextApiHooksConsumer.jsx";
import { UserContext, UserActionsContext } from "./userContext.js";
const ContextApiHooksProvider = () => {
  const [user, setUser] = useState({
    name: "Hooks",
  });
  return (
    <UserContext.Provider value={user}>
      <UserActionsContext.Provider value={setUser}>
        <ContextApiHooksConsumer />
      </UserActionsContext.Provider>
    </UserContext.Provider>
  );
};
export default ContextApiHooksProvider;

在函數(shù)組件中，我們可以像在類組件中一樣使用 context?，但是，hooks 中有一種更簡潔的方法，我們可以利用 useContext? hook 來訪問 context 值。

Context Consumer：

import { useContext } from "react";
import { UserContext, UserActionsContext } from "./userContext.js";
const ContextApiHooksConsumer = () => {
  const user = useContext(UserContext);
  const setUser = useContext(UserActionsContext);
  return (
    <div>
      <input
        type="text"
        value={user.name}
        onChange={e =>
          setUser({
            name: e.target.value,
          })
        }
      />
    </div>
  );
};
export default ContextApiHooksConsumer;

7. 跨重新渲染保留值

在某些情況下，我們可能需要再組件中存儲一些數(shù)據(jù)。但是不希望將其存儲在狀態(tài)中，因為 UI 不以任何方式依賴這些數(shù)據(jù)。

例如，我們可能會保存一些希望稍后包含在 API 請求中的元數(shù)據(jù)。這在類組件中很容易實現(xiàn)，只需為類分配一個新屬性即可。

import { Component } from "react";
class PreservingValuesClass extends Component {
  state = {
    counter: 0,
  };
  componentDidMount() {
    this.valueToPreserve = Math.random();
  }
  showValue = () => {
    alert(this.valueToPreserve);
  };
  increment = () => this.setState(({ counter }) => ({ counter: counter + 1 }));
  render() {
    return (
      <div>
        <p>Counter: {this.state.counter}</p>
        <button onClick={this.increment}>Increment</button>
        <button onClick={this.showValue}>Show</button>
      </div>
    );
  }
}
export default PreservingValuesClass;

在這個例子中，當(dāng)組件被掛載時，我們在 valueToPreserve? 屬性上分配了一個動態(tài)隨機數(shù)。除此之外，還有 increment 方法來強制重新渲染，但是Show按鈕時會彈窗顯示保留的值。

這在類組件中很容易實現(xiàn)，但是在函數(shù)組件中就沒那么簡單了。這是因為，任何時候函數(shù)組件的重新渲染都會導(dǎo)致函數(shù)中的所有內(nèi)容重新執(zhí)行。這意味著如果我們有這樣的組件：

const MyComponent = props => {
  const valueToPreserve = Math.random()
  // ...
}

組件每次重新渲染時都會重新調(diào)用 Math.random() 方法，因此創(chuàng)建的第一個值將丟失。

避免此問題的一種方法是將變量移到組件之外。但是，這是行不通的，因為如果該組件被多次使用，則該值會將被它們中的每一個覆蓋。

恰好，React 提供了一個非常適合這個用例的 hook。我們可以通過使用 useRef hook 來保留函數(shù)組件中重新渲染的值。

import { useState, useRef, useEffect } from "react";
const PreserveValuesHooks = props => {
  const valueToPreserve = useRef(null);
  const [counter, setCounter] = useState(0);
  const increment = () => setCounter(counter => counter + 1);
  const showValue = () => {
    alert(valueToPreserve.current);
  };
  useEffect(() => {
    valueToPreserve.current = Math.random();
  }, []);
  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={showValue}>Show value</button>
    </div>
  );
};
export default PreserveValuesHooks;

valueToPreserve 是一個初始值為 null? 的 ref?。但是，它后來在 useEffect 中更改為我們想要保留的隨機數(shù)。

8. 如何向父組件傳遞狀態(tài)和方法？

盡管我們不應(yīng)該經(jīng)常訪問子組件的狀態(tài)和屬性，但是在某些情況下它可能會很有用。例如，我們想要重置某些組件的狀態(tài)或者訪問它的狀態(tài)。我們需要創(chuàng)建一個 Ref，可以在其中存儲對想要訪問的子組件的引用。在類組件中，可以使用 createRef? 方法，然后將該 ref 傳遞給子組件。

父組件：

import { Component, createRef } from "react";
import ExposePropertiesClassChild from "./ExposePropertiessClassChild";
class ExposePropertiesClassParent extends Component {
  constructor(props) {
    super(props);
    this.childRef = createRef();
  }
  showValues = () => {
    const counter = this.childRef.current.state.counter;
    const multipliedCounter = this.childRef.current.getMultipliedCounter();
    alert(`
      counter: ${counter}
      multipliedCounter: ${multipliedCounter}
    `);
  };
  increment = () => this.setState(({ counter }) => ({ counter: counter + 1 }));
  render() {
    return (
      <div>
        <button onClick={this.showValues}>Show</button>
        <ExposePropertiesClassChild ref={this.childRef} />
      </div>
    );
  }
}
export default ExposePropertiesClassParent;

子組件：

import { Component } from "react";
class ExposePropertiesClassChild extends Component {
  state = {
    counter: 0,
  };
  getMultipliedCounter = () => {
    return this.state.counter * 2;
  };
  increment = () => this.setState(({ counter }) => ({ counter: counter + 1 }));
  render() {
    return (
      <div>
        <p>Counter: {this.state.counter}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}
export default ExposePropertiesClassChild;

要訪問子組件的屬性，只需要在父組件中創(chuàng)建一個 ref 并傳遞它?，F(xiàn)在，讓我們看看如何使用函數(shù)組件和 hook 來實現(xiàn)相同的目標(biāo)。

父組件：

import { useRef } from "react";
import ExposePropertiesHooksChild from "./ExposePropertiesHooksChild";

const ExposePropertiesHooksParent = props => {
  const childRef = useRef(null);

  const showValues = () => {
    const counter = childRef.current.counter;
    const multipliedCounter = childRef.current.getMultipliedCounter();
    alert(`
      counter: ${counter}
      multipliedCounter: ${multipliedCounter}
    `);
  };

  return (
    <div>
      <button onClick={showValues}>Show</button>
      <ExposePropertiesHooksChild ref={childRef} />
    </div>
  );
};

export default ExposePropertiesHooksParent;

在父組件中，我們使用 useRef? hook 來存儲對子組件的引用。然后在 showValues 函數(shù)中訪問 childRef 的值?？梢钥吹?，這里與類組件中的實現(xiàn)非常相似。

子組件：

import { useState, useImperativeHandle, forwardRef } from "react";

const ExposePropertiesHooksChild = (props, ref) => {
  const [counter, setCounter] = useState(0);

  const increment = () => setCounter(counter => counter + 1);

  useImperativeHandle(ref, () => {
    return {
      counter,
      getMultipliedCounter: () => counter * 2,
    };
  });

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default forwardRef(ExposePropertiesHooksChild);

forwardRef? 將從父組件傳遞的 ref? 轉(zhuǎn)發(fā)到組件，而 useImperativeHandle 指定了父組件應(yīng)該可以訪問的內(nèi)容。

9. 小結(jié)

通過這篇文章，相信你對使用Hooks（函數(shù)組件）來重構(gòu)類組件有了一定了解。Hooks 的出現(xiàn)使得 React 代碼更加簡潔，并且?guī)砹烁玫臓顟B(tài)邏輯可重用性。在開始編寫 Hooks 之前，建議先閱讀 React Hooks 的官方文檔，因為在編寫時需要遵循某些規(guī)則，例如不要改變 Hooks 的調(diào)用順序。

到此這篇關(guān)于如何使用 React Hooks 重構(gòu)類組件？的文章就介紹到這了,更多相關(guān)React Hooks 重構(gòu)類組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: