ReactJS - testRenderer.update() 方法

---

---

在使用 React 時，我們可能會遇到一個名為 testRenderer.update() 的函式。因此，我們將用簡單的術語來解釋此函式的功能，以便即使是 React 新手也能理解。

要使用新的根節點重新渲染或重新整理記憶體中的樹，請使用 testRenderer.update() 函式。想象一下我們的 React 應用就像一棵樹，每個元件都像一個樹枝。當我們使用此函式時，它表示對樹的根的更新。

當我們呼叫 testRenderer.update() 時，這就像告訴 React 重新繪製整棵樹。新的根元素作為重新整理的起點。可以將其視為 React 處理更新的方式。如果新元素與上一個元素具有相同的型別和鍵，則 React 會更新樹。否則，它會建立一個新的樹。

語法

testRenderer.update(element)

引數

element − 這是更新記憶體中樹時要使用的新的根元素。這與向 React 提供一個新的起點來重新整理我們的應用相同。

返回值

函式 testRenderer.update(element) 沒有顯式返回任何內容。相反，它透過根據給定的元素重新渲染記憶體中的樹來採取行動。如果新元素與舊元素具有相同的型別和鍵，則樹將被更新。否則，將掛載一個新的樹。

示例

讓我們看一些簡單的應用，以便在實踐中理解 testRenderer.update() 方法。

示例 - 基本更新

在這個應用中，我們將定義一個簡單的 App 元件，該元件接收一個 text prop 並將其顯示在 <div> 中。最初，它使用文字“Hello, React!”進行渲染並記錄輸出。然後，它使用新的 text prop (“Updated Text!”) 更新元素並記錄更新後的輸出。

import React from 'react';
import TestRenderer from 'react-test-renderer';

const App = ({ text }) => <div>{text}</div>;
export default App;
const testRenderer = TestRenderer.create(<App text="Hello, React!" />);

// Initial Output
console.log(testRenderer.toJSON());

// Update the element
testRenderer.update(<App text="Updated Text!" />);

// Updated Output
console.log(testRenderer.toJSON());

輸出

初始渲染顯示一個 div 元素，其中包含文字“Hello, React!”。更新後，div 仍然存在，但內部的文字已更改為“Updated Text!”。

示例

在這個應用中，我們將有一個 App 元件，它根據 showText prop 顯示不同的文字。最初，它使用 showText={true} 進行渲染，顯示“Hello, React!”並記錄輸出。然後，它使用 showText={false} 更新元素，導致它顯示“Text Hidden”，並記錄更新後的輸出。

import React, { useState } from 'react';
import TestRenderer from 'react-test-renderer';

const App = ({ showText }) => {
   const textToShow = showText ? "Hello, React!" : "Text Hidden";
   return <div>{textToShow}</div>;
};

export default App;

const testRenderer = TestRenderer.create(<App showText={true} />);

// Initial Output
console.log(testRenderer.toJSON());

// Update the element conditionally
testRenderer.update(<App showText={false} />);

// Updated Output
console.log(testRenderer.toJSON());

輸出

最初，div 根據 showText prop 為 true 顯示“Hello, React!”。更新後，div 現在顯示“Text Hidden”，因為 showText prop 設定為 false。

示例

在這個應用中，我們將提供一個 App 元件，其中包含一個按鈕，該按鈕接收 buttonText 和 onClick props。最初，它使用“Click me!”進行渲染並記錄輸出。然後，它將使用“Updated Text!”和一個新的 onClick 函式更新元素，並記錄更新後的輸出。

import React, { useState } from 'react';
import TestRenderer from 'react-test-renderer';

const App = ({ buttonText, onClick }) => (
   <div>
      <button onClick={onClick}>{buttonText}</button>
   </div>
);

export default App;

const testRenderer = TestRenderer.create(
   <App buttonText="Click me!" onClick={() => console.log("Button Clicked!")} />
);

// Initial Output
console.log(testRenderer.toJSON());

// Update the element dynamically
testRenderer.update(
   <App buttonText="Updated Text!" onClick={() => console.log("Updated Click!")} />
);

// Updated Output
console.log(testRenderer.toJSON());

輸出

初始渲染包括一個帶有“Click me!”按鈕和一個 onClick 函式的 div。更新後，按鈕的文字更改為“Updated Text!”，而 onClick 函式保持不變。

總結

testRenderer.update() 是 React 用於管理應用中更改的工具。這就像為我們的應用提供了一個重新整理按鈕，它允許它響應新資訊或使用者活動。無論是小的更改還是完整的更改，此函式都能使我們的 React 應用保持活躍和響應。

因此，我們使用此函式為應用建立了一些測試。以上示例展示瞭如何使用 testRenderer.update(element) 方法修改 React 元件並在渲染輸出中檢視更改。