React 過載元件
在本文中，我們將通過一個示例來介紹如何在 React 中重新載入元件。我們還將通過示例展示如何在更新元件時重新載入元件。
React 中的 Reload 元件是什麼
在處理廣泛的應用程式時，你可能需要在單擊按鈕時重新載入特定元件，或者在對元件進行更改時重新載入，而無需完全重新載入整個網頁。React 為我們提供了兩個選項，我們可以在其中重新載入元件。
我們可以使用 Vanilla JavaScript 重新載入元件，或者我們可以使用 state 在元件狀態發生更改時重新載入元件。
使用 Vanilla JavaScript 重新載入元件
首先，我們將建立一個新應用程式並通過匯入樣式表來設定它的樣式。
因此，讓我們使用以下命令建立一個新應用程式。
# react
npx create-react-app my-app
接下來，我們切換到應用程式目錄。
# react
cd my-app
執行 npm-start 以檢查所有依賴項是否已正確安裝。
# react
npm start
在應用程式中匯入樣式表。
# react
import "./styles.css";
建立應用程式模板。
# react
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>Hello Devs!</h1>
<h2>Click below to see some magic happen!</h2>
<button>
Click to reload!
</button>
</div>
);
}
接下來，讓我們通過新增 style.css 來設定應用程式的樣式。
# react
.App {
font-family: sans-serif;
text-align: center;
}
button{
background: black;
color: white;
border: none;
padding: 10px;
}
button:hover{
background: white;
color: black;
border: 1px solid black;
}
輸出
每當我們單擊此按鈕時，我們將使用 Vanilla JavaScript 重新載入元件。
Vanilla JavaScript 中的 reload 方法告訴瀏覽器重新載入當前頁面。
# react
window.location.reload(false);
此方法有一個可選引數，預設情況下設定為 false。如果我們從伺服器尋找完整的頁面重新整理，我們也可以將其設定為 true。
需要注意的一件重要的事情是，當我們將值設定為 false 時，它會重新載入頁面的快取版本，但是當我們將值設定為 true 時，它不會從快取版本的頁面重新整理頁面頁。
完成後，我們可以建立一個函式 reloadComponent 並使用 Vanilla JavaScript 重新載入元件並將此函式分配給我們在模板中建立的按鈕的 onClick 事件。
所以我們在 App.js 中的程式碼將如下所示。
import "./styles.css";
export default function App() {
function reloadComponent(){
window.location.reload(false);
}
return (
<div className="App">
<h1>Hello Devs!</h1>
<h2>Click below to see some magic happen!</h2>
<button onClick={reloadComponent}>
Click to reload!
</button>
</div>
);
}
輸出
當我們點選按鈕時頁面並沒有重新整理，而只是重新整理了 react 元件。
使用 useState 重新載入元件
當使用者使用某個值或多個值更新元件時，我們希望實時顯示使用者在該元件中選擇或輸入的值，我們需要使用元件重新載入來獲取資料並將其顯示給資料更新時的使用者。
在這裡，我們構建了一個 Todo-App，可以在不重新整理頁面的情況下將條目新增到列表中。
我們首先使用以下命令建立一個新應用程式。
# react
npx create-react-app my-app
接下來，我們切換到應用程式目錄。
# react
cd my-app
執行 npm-start 以檢查所有依賴項是否已正確安裝。
# react
npm start
在應用程式中匯入樣式表。
# react
import "./styles.css";
在 App.js 中匯入 React 和 useState。
# react
import React, { useState } from "react";
接下來，我們使用 useState 定義常量 todo 和 setTodo，在 return 中，我們將建立一個包含 4 個任務按鈕的模板。
當我們單擊任何任務按鈕時，它會將該任務新增到顯示的任務列表中，並且將重新載入該元件。我們將為所有按鈕 addTodo 新增 onClick 功能。
import React, { useState } from "react";
export default function TodoApp() {
const [todo, setTodo] = useState([]);
return (
<div className="app">
<div className="Todoitems">
<button value="Task1" onClick={addTodo}>
{" "}
Do Task 1
</button>
<button value="Task2" onClick={addTodo}>
{" "}
Do Task 2
</button>
<button value="Task3" onClick={addTodo}>
{" "}
Do Task 3
</button>
<button value="Task4" onClick={addTodo}>
{" "}
Do Task 4
</button>
</div>
<div className="todo">
Todo List
<ul></ul>
</div>
</div>
);
}
建立一個函式 addTodo() 以新增使用者選擇的任務。
# react
function addTodo(e) {
const todoItem = e.target.value;
console.log(todoItem);
setTodo([...todo, todoItem]);
}
在我們的 div todo 中對映待辦事項列表。
<div className="todo">
<h2>Todo List</h2>
<ul>
{todo.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
</div>
現在讓我們在 style.css 中新增一些樣式。
# react
.App {
font-family: sans-serif;
text-align: center;
}
button{
background: black;
color: white;
border: none;
padding: 10px;
margin-left: 10px;
}
button:hover{
background: white;
color: black;
border: 1px solid black;
}
.Todoitems{
text-align: center;
}
輸出
正如你在上面的示例中看到的，當我們單擊任何任務按鈕時，它會重新載入元件並更新待辦事項列表的值而不重新整理。
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn