本篇內容介紹了“react16和react17有哪些區別”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

成都創新互聯公司專業為企業提供臨泉網站建設、臨泉做網站、臨泉網站設計、臨泉網站制作等企業網站建設、網頁設計與制作、臨泉企業網站模板建站服務，10余年臨泉做網站經驗，不只是建網站，更提供有價值的思路和整體網絡服務。

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

本教程操作環境：Windows7系統、react17.0.1版、Dell G3電腦。

react17相對react16改進了一些：

1、新的JSX轉換

React 16原理

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

React 17原理

React 17中的 JSX 轉換不會將 JSX 轉換為 React.createElement，

而是自動從 React 的 package 中引入新的入口函數并調用。

另外此次升級不會改變 JSX 語法，舊的 JSX 轉換也將繼續工作。

總結

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

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

之前的JSX轉換的方式將繼續存在，并且沒有計劃停止對其支持。

2、事件代理更改

在React 17中，將不再在后臺的文檔級別附加事件處理程序，不在document對象上綁定事件，改為綁定于每個react應用的rootNode節點，因為各個應用的rootNode肯定不同，所以這樣可以使多個版本的react應用同時安全的存在于頁面中，不會因為事件綁定系統起沖突。react應用之間也可以安全的進行嵌套。

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

ReactDOM.render(<App />, rootNode);

總結

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

React 17將在后調用rootNode.addEventListener（）。

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

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

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

4、異步執行

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

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

5、forwardRef 和 memo組件的行為

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

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

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

“react16和react17有哪些區別”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注創新互聯網站，小編將為大家輸出更多高質量的實用文章！

網站標題：react16和react17有哪些區別
轉載來源：http://www.yijiale78.com/article20/jdopjo.html

成都網站建設公司_創新互聯，為您提供、微信公眾號、定制開發、品牌網站設計、網站營銷、網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯