react-devtools 是做什麼的？
從 agent-device 檢查並分析 React Native 元件樹。適用於 React Native 效能、分析、props、state、hooks、渲染原因、緩慢元件、過度重新渲染，或像是為何元件重新渲染等問題。
功能
- 元件樹檢視：檢查完整元件樹，包含 props、state 與 hooks。
- 效能分析：辨識緩慢元件與不必要的重新渲染。
- 互動式偵錯：在運行中的應用程式中修改元件狀態或 props。
- 渲染原因追蹤：確定特定元件為何重新渲染。
開始使用
確保你的 React Native 應用程式已啟用遠端除錯，或使用開發伺服器。然後透過代理程式指令呼叫工具：
react-devtools
使用方法
- 啟動你的 React Native 應用程式（開發模式）。
- 在代理程式中執行
react-devtools。 - 工具會自動連接到運行中的應用程式實例。
- 使用元件樹面板瀏覽元件。
- 點擊元件以檢查其 props、state 與 hooks。
- 使用效能標籤分析渲染時間與次數。
範例
// 範例：檢查元件狀態
const MyComponent = () => {
const [count, setCount] = useState(0);
return <Text>{count}</Text>;
};
啟動 DevTools 後，你可以查看 MyComponent 的目前 count 值，並直接從介面修改它。
環境變數
REACT_DEVTOOLS_PORT：DevTools 伺服器的連接埠（預設：8097）REACT_DEVTOOLS_HOST：DevTools 伺服器的主機（預設：localhost）
更多資訊
更多詳細資訊，請參閱 React DevTools 文件。