react16和react17有哪些區(qū)別

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

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

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

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

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

React 16原理

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

React 17原理

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

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

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

總結(jié)

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

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

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

2、事件代理更改

在React 17中，將不再在后臺(tái)的文檔級(jí)別附加事件處理程序，不在document對(duì)象上綁定事件，改為綁定于每個(gè)react應(yīng)用的rootNode節(jié)點(diǎn)，因?yàn)楦鱾€(gè)應(yīng)用的rootNode肯定不同，所以這樣可以使多個(gè)版本的react應(yīng)用同時(shí)安全的存在于頁(yè)面中，不會(huì)因?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(<App />, rootNode);

總結(jié)

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

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

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

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

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

4、異步執(zhí)行

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

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

5、forwardRef 和 memo組件的行為

React 17中forwardRef 和 memo組件的行為會(huì)與常規(guī)函數(shù)組件和class組件保持一致。它們?cè)诜祷豼ndefined時(shí)會(huì)報(bào)錯(cuò)。

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

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

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