React17事件委托的變更

為了實(shí)現(xiàn)漸進(jìn)式升級(jí)，React17 對(duì) React 的事件系統(tǒng)進(jìn)行修改。

React v17 中，React 不會(huì)再將事件處理添加到 document 上，而是將事件處理添加到渲染 React 樹的根 DOM 容器中：

const rootNode = document.getElementById('root');ReactDOM.render(<App />, rootNode);

在 React 16 及之前版本中，React 會(huì)對(duì)大多數(shù)事件進(jìn)行 document.addEventListener() 操作。React v17 開始會(huì)通過(guò)調(diào)用 rootNode.addEventListener() 來(lái)代替。

在 React 16 或更早版本中，React 會(huì)由于事件委托對(duì)大多數(shù)事件執(zhí)行 document.addEventListener()。但是一旦你想要局部使用 React，那么 React 中的事件會(huì)影響全局，如下面這個(gè)例子，當(dāng)把 React 和 jQuery 一起使用，那么當(dāng)點(diǎn)擊 input 的時(shí)候，document 上和 React 不相關(guān)的事件也會(huì)被觸發(fā)，這符合 React 的預(yù)期，但是并不符合用戶的預(yù)期。

查看問(wèn)題：issues：https://github.com/facebook/react/issues/7094

代碼如下：

var Search = React.createClass({    handleClick: function(e) {        e.stopPropagation();    },    render: function() {        return <input onClick={this.handleClick} />    }});document.addEventListener('click', function() {    console.log('propagation')}, false);

令人開心的是，這次的 React 17 就解決了這個(gè)問(wèn)題~，這次 React 不再將事件添加在 document 上，而是添加到渲染 React 樹的根 DOM 容器中：

const rootNode = document.getElementById('root');ReactDOM.render(<App />, rootNode);

這種改變不僅方便了局部使用 React 的項(xiàng)目，還可以用于項(xiàng)目的逐步升級(jí)，如一部分使用 React 18，另一部分使用 React 19，事件是分開的，這樣也就不會(huì)相互影響。當(dāng)然這并不是鼓勵(lì)大家在一個(gè)項(xiàng)目中使用多個(gè) React 版本，而只是作為一種臨時(shí)處理的過(guò)渡~