在反應中操作 DOM

Question

我知道在 React 中直接操作 DOM 並不是一個好的做法。 由於在比較虛擬 DOM 和真實 DOM 時，react 協調引擎會影響性能

但是如果我做這樣的事情呢？

顯示的場景僅用於解釋問題。 對於這種特定情況不需要答案，但這種做法一般都有缺點

場景：1

state = {
   innerHTML : ""
}

document.getElementById("test").innerHTML = this.state.innerHTML

handleChange(){
  //...handles change in state
}

場景：2

state = {
    color:"red"
}

document.getElementById("test").style.color = this.state.color

handleChange(color){
    this.setState({color})
}

在這種情況下，react 意識到它需要重新渲染，因為我正在更改狀態，從而保持 Virtual DOM 和 Real DOM 的一致性。

因此，在所有這些我可以使用狀態來保持一致性並對真實 DOM 進行更改的情況下，以這種方式對真實 DOM 進行更改仍然是一個壞主意嗎？

Answer 1

在這種情況下，與其直接設置innerHTML ，不如使用dangerouslySetInnerHTML ：

class Component extends React.Component {
  state = {
    innerHTML: '',
  }

  handleChange() {
    this.setState({ innerHTML: '...' });
  }

  render() {
    return <div dangerouslySetInnerHTML={ { __html: this.state.innerHTML } }></div>;
  }
}

如文檔中所述：

危險地SetInnerHTML

dangerouslySetInnerHTML是 React 在瀏覽器 DOM 中使用innerHTML的替代品。 一般來說，從代碼中設置 HTML 是有風險的，因為很容易在不經意間將用戶暴露給跨站點腳本 (XSS) 攻擊。 所以，你可以直接從 React 設置 HTML，但是你必須輸入dangerouslySetInnerHTML的__html並傳遞一個帶有__html鍵的對象，以提醒自己這是危險的。

此外，當使用dangerouslySetInnerHTML SetInnerHTML 時，React 將在區分虛擬 DOM 和真實 DOM（協調）時忽略 DOM 的那部分，因此它會更高效，因為它要做的工作更少。

無論如何，如果你這樣做：

document.getElementById('test').innerHTML = this.state.innerHTML;

在您的代碼中的某個時刻，可能在componentDidUpdate() ，然后再次調用render() （當您更新狀態或父組件重新渲染時），您的更改將被覆蓋，因此您需要不斷更新它，這可能會產生一個小而明顯的閃光並降低性能，因為每個渲染都必須更新 DOM 2 次（一次來自 React，另一次來自innerHTML ）。

Answer 2

你可以考慮使用 ReactRef 而不是直接操作 DOM，它更容易、更安全和更佳實踐。

在這里檢查