我知道在 componentDidMount() 中立即呼叫 setState() 是一個性能問題，在某些情況下最好使用建構式。
但是在 React 檔案的最后一句話中，它談到了一個用例，它指出如果 setState() 是可行的，則立即在 componentDidMount() 中呼叫 setState()，該用例是什么意思。
檔案反應：
您可以立即在 componentDidMount() 中呼叫 setState()。它會觸發額外的渲染，但會在瀏覽器更新螢屏之前發生。這保證了即使在這種情況下 render() 將被呼叫兩次，用戶也不會看到中間狀態。請謹慎使用此模式，因為它通常會導致性能問題。在大多數情況下，您應該能夠在 constructor() 中分配初始狀態。但是，對于模態和工具提示等情況，當您需要在渲染取決于其大小或位置的內容之前測量 DOM 節點時，它可能是必要的。
我想要一個簡單的例子（帶代碼），請，因為我無法單獨用文字看到它
uj5u.com熱心網友回復：
有時你可能需要訪問由 React 管理的 DOM 元素——例如，聚焦一個節點，滾動到它，或者測量它的大小和位置。在 React 中沒有內置的方法來做這些事情，所以你需要一個 DOM 節點的 ref。在第一次渲染期間，尚未創建 DOM 節點，因此 ref.current 將為空。并且在渲染更新期間，DOM 節點還沒有更新。所以現在閱讀它們還為時過早。這就是為什么有時您必須等待讀取 ref 并在 componentDidMount 或 useEffect 中設定功能組件的狀態
獲取元素高度的示例：
class DivSize extends Component {
constructor(props) {
super(props)
this.state = {
height: 0
}
}
componentDidMount() {
const height = this.divElement.clientHeight;
this.setState({ height });
}
render() {
return (
<div
ref={ (divElement) => { this.divElement = divElement } }
>
Size: <b>{this.state.height}px</b> but it should be 18px after the render
</div>
)
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/510235.html