欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：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 可以編寫更簡(jiǎn)潔、更清晰的代碼，并為創(chuàng)建可重用的有狀態(tài)邏輯提供了更好的模式。

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

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

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

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

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 實(shí)現(xiàn)這個(gè)計(jì)數(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;

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

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

在某些情況下，我們可能需要在狀態(tài)更新時(shí)執(zhí)行某些操作。在類組件中，我們通常會(huì)在componentDidUpdate 生命周期中實(shí)現(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í)，我們將新的計(jì)數(shù)器值保存在 localStorage? 中。在函數(shù)組件中，我們可以通過使用 useEffect hook 來實(shí)現(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;

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

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

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

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?來實(shí)現(xiàn)上述功能。它會(huì)在第一次掛載之后執(zhí)行一次，然后在任何依賴發(fā)生變化時(shí)再次觸發(fā)。useEffect? 允許我們傳入一個(gè)空依賴數(shù)組作為第二個(gè)參數(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. 卸載組件時(shí)清理副作用

在卸載組件時(shí)清理副作用是非常重要的，否則可能會(huì)導(dǎo)致內(nèi)存泄露。例如，在一個(gè)組件中，我們想要監(jiān)聽一個(gè)事件，比如resize?或者scroll?，并根據(jù)窗口大小或滾動(dòng)的位置來做一些事情。下面來看一個(gè)類組件的例子，它會(huì)監(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ù)中返回一個(gè)函數(shù)來執(zhí)行清理操作，卸載組件時(shí)會(huì)調(diào)用此函數(shù)。下面，首先來定義一個(gè) updateWindowSize? 函數(shù)，然后在 useEffect? 中添加 resize 事件監(jiān)聽器。接下來返回一個(gè)匿名箭頭函數(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)化組件并確保它們不會(huì)過于頻繁地重新渲染是很有必要的。

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

父組件：

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}>挑一個(gè)水果</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 的引入，我們得到了一個(gè)新的高階組件，稱為 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}>挑一個(gè)水果</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ā)生變化時(shí)發(fā)揮重新渲染。需要注意，memo組件執(zhí)行的是淺比較，因此如果需要更好地控制memo?組件何時(shí)重新渲染，可以提供自己的函數(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 是一個(gè)很好用的工具，可以為組件層次結(jié)構(gòu)中不同級(jí)別的組件提供值?？梢允褂?React 提供的 createContext? 方法創(chuàng)建新的上下文。先來看一個(gè)在類組件中使用 context 的例子。

Context Provider：

import { createContext } from "react";

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

在父組件中，向消費(fèi)者提供了 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 實(shí)現(xiàn)和上面的代碼非常類似，但是會(huì)更簡(jiǎ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 中有一種更簡(jiǎn)潔的方法，我們可以利用 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. 跨重新渲染保留值

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

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

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;

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

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

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

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

避免此問題的一種方法是將變量移到組件之外。但是，這是行不通的，因?yàn)槿绻摻M件被多次使用，則該值會(huì)將被它們中的每一個(gè)覆蓋。

恰好，React 提供了一個(gè)非常適合這個(gè)用例的 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 是一個(gè)初始值為 null? 的 ref?。但是，它后來在 useEffect 中更改為我們想要保留的隨機(jī)數(shù)。

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

盡管我們不應(yīng)該經(jīng)常訪問子組件的狀態(tài)和屬性，但是在某些情況下它可能會(huì)很有用。例如，我們想要重置某些組件的狀態(tài)或者訪問它的狀態(tài)。我們需要?jiǎng)?chuàng)建一個(gè) Ref，可以在其中存儲(chǔ)對(duì)想要訪問的子組件的引用。在類組件中，可以使用 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)建一個(gè) ref 并傳遞它?，F(xiàn)在，讓我們看看如何使用函數(shù)組件和 hook 來實(shí)現(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 來存儲(chǔ)對(duì)子組件的引用。然后在 showValues 函數(shù)中訪問 childRef 的值?？梢钥吹?，這里與類組件中的實(shí)現(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é)

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

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

相關(guān)文章

  • react 可拖拽進(jìn)度條的實(shí)現(xiàn)

    react 可拖拽進(jìn)度條的實(shí)現(xiàn)

    本文主要介紹了react 可拖拽進(jìn)度條的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-04-04
  • 新建的React Native就遇到vscode報(bào)警解除方法

    新建的React Native就遇到vscode報(bào)警解除方法

    這篇文章主要為大家介紹了新建的React Native就遇到vscode報(bào)警解除方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-10-10
  • React?Suspense前后端IO異步操作處理

    React?Suspense前后端IO異步操作處理

    這篇文章主要為大家介紹了React?Suspense前后端IO異步操作處理示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-06-06
  • React自定義Hook-useForkRef的具體使用

    React自定義Hook-useForkRef的具體使用

    本文主要介紹了React自定義Hook-useForkRef的具體使用，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-03-03
  • react中form.setFieldvalue數(shù)據(jù)回填時(shí) value和text不對(duì)應(yīng)的問題及解決方法

    react中form.setFieldvalue數(shù)據(jù)回填時(shí) value和text不對(duì)應(yīng)的問題及解決方法

    這篇文章主要介紹了react中form.setFieldvalue數(shù)據(jù)回填時(shí) value和text不對(duì)應(yīng)的問題及解決方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2023-07-07
  • 在?React?中如何從狀態(tài)數(shù)組中刪除一個(gè)元素

    在?React?中如何從狀態(tài)數(shù)組中刪除一個(gè)元素

    這篇文章主要介紹了在?React?中從狀態(tài)數(shù)組中刪除一個(gè)元素,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2023-03-03
  • React服務(wù)端渲染原理解析與實(shí)踐

    React服務(wù)端渲染原理解析與實(shí)踐

    這篇文章主要介紹了React服務(wù)端渲染原理解析與實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-03-03
  • React中用@符號(hào)編寫文件路徑實(shí)現(xiàn)方法介紹

    React中用@符號(hào)編寫文件路徑實(shí)現(xiàn)方法介紹

    在Vue中，我們導(dǎo)入文件時(shí)，文件路徑中可以使用@符號(hào)指代src目錄，極大的簡(jiǎn)化了我們對(duì)路徑的書寫。但是react中，要想實(shí)現(xiàn)這種方式書寫文件路徑，需要寫配置文件來實(shí)現(xiàn)
    2022-09-09
  • 如何去除富文本中的html標(biāo)簽及vue、react、微信小程序中的過濾器

    如何去除富文本中的html標(biāo)簽及vue、react、微信小程序中的過濾器

    這篇文章主要介紹了如何去除富文本中的html標(biāo)簽及vue、react、微信小程序中的過濾器,在vue及react中經(jīng)常會(huì)遇到，今天通過實(shí)例代碼給大家講解，需要的朋友可以參考下
    2018-11-11
  • react hooks入門詳細(xì)教程

    react hooks入門詳細(xì)教程

    這篇文章主要介紹了react hooks入門詳細(xì)教程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2021-04-04

最新評(píng)論