本篇內(nèi)容介紹了“react16和react17有哪些區(qū)別”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供臨泉網(wǎng)站建設(shè)、臨泉做網(wǎng)站、臨泉網(wǎng)站設(shè)計、臨泉網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、臨泉企業(yè)網(wǎng)站模板建站服務(wù)，10余年臨泉做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

區(qū)別：1、React16中JSX會轉(zhuǎn)換為“React.createElement”，而react17不會；2、React17不再在后臺的文檔級別附加事件處理程序，而React16會；3、React16中有事件池，React17去除了事件池。

本教程操作環(huán)境：Windows7系統(tǒng)、react17.0.1版、Dell G3電腦。

react17相對react16改進(jìn)了一些：

1、新的JSX轉(zhuǎn)換

React 16原理

babel-loader會預(yù)編譯JSX為React.createElement(...)

React 17原理

React 17中的 JSX 轉(zhuǎn)換不會將 JSX 轉(zhuǎn)換為 React.createElement，

而是自動從 React 的 package 中引入新的入口函數(shù)并調(diào)用。

另外此次升級不會改變 JSX 語法，舊的 JSX 轉(zhuǎn)換也將繼續(xù)工作。

總結(jié)

React 17支持新的JSX轉(zhuǎn)換。我們還將對它支持到React 16.14.0，React 15.7.0和0.14.10。

需要注意的是，這是完全選擇啟用的，您也不必使用它。

之前的JSX轉(zhuǎn)換的方式將繼續(xù)存在，并且沒有計劃停止對其支持。

2、事件代理更改

在React 17中，將不再在后臺的文檔級別附加事件處理程序，不在document對象上綁定事件，改為綁定于每個react應(yīng)用的rootNode節(jié)點(diǎn)，因?yàn)楦鱾€應(yīng)用的rootNode肯定不同，所以這樣可以使多個版本的react應(yīng)用同時安全的存在于頁面中，不會因?yàn)槭录壎ㄏ到y(tǒng)起沖突。react應(yīng)用之間也可以安全的進(jìn)行嵌套。

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(, rootNode);

總結(jié)

在React 16和更早的版本中，React將對大多數(shù)事件執(zhí)行document.addEventListener（）。

React 17將在后調(diào)用rootNode.addEventListener（）。

3、事件池(event pooling)的改變

React 17去除了事件池(event pooling)，不在需要e.persist()，現(xiàn)在可以直接在異步事件中（回掉或timeout等）拿到事件對象，操作更加直觀，不會令人迷惑。e.persist()仍然可用，但是不會有任何效果。

function handleChange(e) {
  // v16中,在異步方法中是拿不到e的，需要事先執(zhí)行e.persist()
  // e.persist();
  setTimeout(() => {
    console.log(e);
  }, 1000);
}

4、異步執(zhí)行

React 17將副作用清理函數(shù)(如果存在)改為異步執(zhí)行，即在瀏覽器渲染完畢后執(zhí)行。

useEffect(() => {
  return () => {
    // 會在瀏覽器渲染完畢后執(zhí)行
  }
})

5、forwardRef 和 memo組件的行為

React 17中forwardRef 和 memo組件的行為會與常規(guī)函數(shù)組件和class組件保持一致。它們在返回undefined時會報錯。

const Button = forwardRef(() => {
  // 這里忘記寫return，所以返回了undefined
  // React17不會忽略檢測它，會返回err
  ;
});

const Button = memo(() => {
  // 這里忘記寫return，所以返回了undefined
  // React17不會忽略檢測它，會返回err
  ;
});

“react16和react17有哪些區(qū)別”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！