為了便于演示，我在代碼沙箱中簡化了我的問題。將此計數器類視為更復雜的外部庫。
解釋
我有一個類，它具有一個計數和方法的屬性，它將增加該計數。
interface Counter {
count: number;
increment(): void;
autoIncrement(): void;
}
export class MyCounter implements Counter {
public count: number;
constructor() {
this.count = 0;
}
public increment() {
this.count = this.count 1;
console.log(this.count);
}
autoIncrement() {
setInterval(() => {
this.count = this.count 1;
}, 1000);
}
}
在一個反應??應用程式中，我初始化了該類并將其放入備忘錄中以防止對其進行不必要的初始化。
const counter = useMemo(() => {
return new MyCounter();
}, []);
然后我在我的 React App 中顯示計數以及一個增加它的按鈕。
然后我“觀察”按鈕點擊的變化，useEffect如下所示：
useEffect(() => {
console.log("counter", counter.count);
}, [counter]);
但是單擊按鈕并增加計數不會在 React 組件中更新。
這是為什么？根據我對 Hooks 的理解，它應該可以作業，但我可能從根本上錯過了理解這里發生的事情。
我嘗試將類實體傳遞給子組件并將其用作道具，但仍然無濟于事。
uj5u.com熱心網友回復：
...但是單擊按鈕并增加計數不會在 React 組件中更新。
這是為什么？
因為 中的值（counter對Counter物件的參考）沒有改變；修改count屬性不會創建新物件。如果您想觀察對 的更改counter.count，那應該是依賴陣列中的內容：
useEffect(() => {
console.log("counter", counter.count);
}, [counter.count]);
// ^^^^^^
（或者你可以使用[counter, counter.count].）
但是，如果您counter.count在渲染時使用，它應該處于狀態，因此對其進行更改會導致重新渲染。（如果counter處于狀態，則每次遞增計數器時都需要創建一個新實體，因為您不能直接修改狀態物件。）
uj5u.com熱心網友回復：
React js 組件僅在您的情況下狀態更改或道具更改時才重新渲染。counter.count 不是道具，也不是狀態，因此您的 App.js 不會重新渲染以顯示 count 變數的新值。我不明白你為什么使用新類來做到這一點，你可以簡單地用狀態來做。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/409817.html
標籤：
上一篇：使用反應路由器來保存頁面狀態