利用React，您可以根據瀏覽器動態調整網頁上元素的佈局視窗大小。但是，當視窗調整大小並且視圖不會自動更新時，您可能會遇到問題。本文解決了一個常見問題：如何在瀏覽器視窗大小調整時觸發重新渲染。
考慮以下React 應用程序，其元件層次結構由MyApp 元件、代表頁面上各個區塊的Block 元件，以及代表區塊集合的Blocks 元件：
除了使用jQuery 的視窗調整大小事件之外，是否有更「React」的監聽方式用於瀏覽器調整大小事件並觸發重新渲染？
React Hooks 提供了更乾淨、更實用的方法。您可以建立一個自訂Hook 來監聽視窗調整大小事件：
<code class="javascript">function useWindowSize() {
const [size, setSize] = useState([0, 0]);
useLayoutEffect(() => {
function updateSize() {
setSize([window.innerWidth, window.innerHeight]);
}
window.addEventListener('resize', updateSize);
updateSize();
return () => window.removeEventListener('resize', updateSize);
}, []);
return size;
}</code>在React 類別中，您可以在componentDidMount 生命週期方法中監聽調整大小事件：
<code class="javascript">componentDidMount() {
window.addEventListener('resize', this.updateDimensions);
}
componentWillUnmount() {
window.removeEventListener('resize', this.updateDimensions);
}</code>這種方法更加冗長，但仍然提供了一個乾淨的實作。
以上是如何在 React 中重新渲染瀏覽器調整大小的視圖：jQuery 與 React Hooks 和類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
