React 16 新功能有哪些？ react16的新功能與功能的介紹

本篇文章主要的介紹了關於react16的一些新特性，還有關於react16的詳細功能介紹。下面就讓我們一起來看這篇文章的正文內容吧

React 16更新

新js環境需求

react16依靠Map和Set集合和requestAnimationFrame（一个针对动画效果的API）

新功能

- Fragments：render函数可以返回数组和字符串
- error boundaries：错误处理
- portals ：支持声明性地将子树渲染到另一个DOM节点
- custom DOM attributes ：ReactDom允许传递非标准属性
- improved server-side rendering:提升服务端渲染性能

1. Fragments

   render() {
     return [
       <li key="A"/>First item</li>,
       <li key="B"/>Second item</li>,
       <li key="C"/>Third item</li>,
     ];
   }

   詳見API

2. #error boundaries

   之前，一旦某個元件發生錯誤，整個元件樹將會從根節點被unmount下來。 React 16修復了這一點，引入了Error Boundary的概念，中文譯為“錯誤邊界”，當某個組件發生錯誤時，我們可以通過Error Boundary捕獲到錯誤並對錯誤做優雅處理，如使用Error Boundary提供的內容替代錯誤組件。 Error Boundary可以看作是一種特殊的React元件，新增了componentDidCatch這個生命週期函數，它可以捕捉自身及子樹上的錯誤並對錯誤做優雅處理，包括上報錯誤日誌、展示出錯提示，而不是卸載整個組件樹。 （註：它並不能捕捉runtime所有的錯誤，例如元件回呼事件裡的錯誤，可以把它想像成傳統的try-catch語句）

   實作：

   抽像出檢查錯誤邊界公共元件：

   class ErrorBoundary extends React.Component{
       constructor(props){
           super(props);
           this.state=({
               ifError:false
           });
       }
   
       componentDidCatch(err, info) {
           this.setState({ ifError: true })
           console.log(err);
       }
   
       render(){
           if(this.state.ifError){
               return `this or its children has error`;
           }
           return this.props.children
       }
   }

   建立一個簡單的包含錯誤的子元件：

   class ErrorComponent extends React.Component{
       render(){
           const str = '123';
           return str.toFixed(2);
       }
   }

   使用錯誤邊界元件包裹可能出錯的元件

   class MainShowComponent extends React.Component{
       render(){
           return (
               <p>
                   <ErrorBoundary>
                       <ErrorComponent/>
                   </ErrorBoundary>
               </p>
           )
       }
   }

   當被錯誤邊界元件包裹的子組件中出現錯誤，會將錯誤組件替換為字串：this or its children has error，而不會導致整體組件樹被卸載。 （想看更多就到PHP中文網React參考手冊欄位中學習）

3. #Portals

   Portals提供了一個一流的方法來將子代呈現到父元件的DOM層次結構之外的DOM節點。

   ReactDOM.createPortal(
     child,
     container
   );

   第一個參數（child）是任何可渲染的React子元素，如元素，字串或片段。第二個參數（container）是一個DOM元素。

   通常，當您從元件的render方法傳回一個元素時，它將作為最近的父節點的子元素裝載到DOM中：

   render() {
     // React mounts a new p and renders the children into it
     return (
       <p>
         {this.props.children}
       </p>
     );
   }

   但是，有時會將子項插入到DOM中的其他位置會很有用：

   render() {
     // React does *not* create a new p. It renders the children into `pNode`.
     // `pNode` is any valid DOM node, regardless of its location in the DOM.
     return React.createPortal(
       this.props.children,
       pNode,
     );
   }

   有關Portals 和其事件冒泡詳見官網和CodePen範例

4. ##custom DOM attributes
   支援非標準的自訂DOM屬性，在先前的版本中，React會忽略無法辨識的HTML和SVG屬性，自訂屬性只能透過data-*形式添加，現在它會把這些屬性直接傳遞給DOM，這個改動讓React可以去掉屬性白名單，從而減少了檔案大小。但當DOM傳遞的自訂屬性是函數類型或event handler類型時，也會被React忽略。

   <p a={()=>{}}></p>   //错误

5. improved server-side rendering
   提升服務端渲染效能，React 16的SSR被完全重寫，新的實作非常快，接近3倍效能於React 15，現在提供一種串流模式streaming，可以更快地把渲染的位元組傳送到客戶端。

打破改變

• 調度和生命週期的改變

• 呼叫setState返回null將不會更新render，這樣可以讓你在更新方法中自己決定是否更新。

  this.setState(
      (state)=>{
          if(state.curCount%2 === 0){
              return {curCount:state.curCount+1}
          }else{
              return null;
          }
  
      }
  )

• 在render方法中呼叫setState總是會導致更新，之前版本不支持，但盡量不要在render中呼叫setState。

• setState的回呼函數會在componentDidMount/ componentDidUpdate 執行之後立即執行，而不是在所有元件渲染之後。

      this.setState(
          (state)=>{
              if(state.curCount%2 === 0){
                  return {curCount:state.curCount+1}
              }else{
                  return null;
              }
  
          },
          ()=>{
              console.log(this.state.curCount);
          }
      )

1. ReactDOM.render()和ReactDom.unstable_renderIntoContainer()如果在生命週期函數中呼叫將會傳回null。所以解決這類問題可以使用portals或refs

2. setState的改變：

3. 當兩個元件

   和 >發生替換時，B.componentWillMount總是會在A.componentWillUnmount之前執行，在之前，A.componentWillUnmount有可能會提前執行。

4. 之前版本，當改變一個元件的ref時，ref和dom會在元件的render方法被呼叫之前分離。現在，我們延遲了ref的改變，直到dom元素改變了，ref才會和dom分離。

5. 對於不使用React而是使用其他方法來重新渲染容器是不安全的。這在以前的版本中也許會生效，但是我們覺得不支援這樣做。現在對於這種情況我們會發出一個警告，而且你需要使用ReactDOM.unmountComponentAtNode來清空你的節點樹。

   ReactDOM.render(<App />, p);
   p.innerHTML = 'nope';
   ReactDOM.render(<App />, p);//渲染一些没有被正确清理的东西

   而你需要：

   ReactDOM.render(<App />, p);
   ReactDOM.unmountComponentAtNode(p);
   p.innerHTML = 'nope';
   ReactDOM.render(<App />, p); // Now it's okay

   查看此issue

6. #componentDidUpdate生命週期不再接受prevContext參數。

7. 使用不唯一的key可能會導致子元件的複製或遺失，使用不唯一的key並不支持，也從未支持，但之前這是一個硬性錯誤。

8. Shallow renderer（淺層渲染）不再觸發componentDidUpdate()，因為DOM的refs是不可用的。這也使得它與componentDidMount()之前版本中的呼叫一致。

9. Shallow renderer不再支援unstable_batchedUpdates()。

10. ReactDOM.unstable_batchedUpdates 現在回呼之後只有一個額外的參數。

單一檔案瀏覽器版本的名稱和路徑已經改變，以強調開發和生產版本之間的差異

• #react/dist/react.js → react/umd/react.development.js

• react/dist/react.min.js → react/umd/react.production.min .js

• react-dom/dist/react-dom.js → react-dom/umd/react-dom.development.js

• react-dom/dist/react-dom.min.js → react-dom/umd/react-dom.production.min.js

##重寫並改進伺服器渲染器

• 伺服器渲染不再使用標記驗證，而是盡力附加到現有的DOM，警告不一致。它也不再使用每個節點上的空白元件和資料回饋屬性的註解。

• 為伺服器渲染容器現在有一個明確的API。使用ReactDOM.hydrate而不是ReactDOM.render如果你正在恢復伺服器呈現的HTML。繼續使用，ReactDOM.render如果你只是做客戶端渲染。

當未知的屬性傳遞給DOM元件時，如果是有效的值，React會渲染進DOM。檢視文件

在render和生命週期函數中的錯誤預設會卸載整個DOM樹，為了阻止這個，可以在UI的對應位置新增錯誤邊界。

棄用

• 不再建構react-with-addons.js，所有相容的外掛程式都是在npm上單獨發布的，如果你需要它們，可以使用單一文件瀏覽器版本。

• 在15.x版本中的棄用已經從核心包中刪除，React.createClass現在可以作為create-react-class，React.PropTypes可以作為prop-types，React .DOM 作為react-dom-factories，react-addons-test-utils 作為react-dom/test-utils使用， shallow renderer 作為react-test-renderer/shallow使用。請參閱15.5.0和15.6.0文件參考。

本篇文章到這就結束了（想看更多就到PHP中文網

React使用手冊欄位中學習），有問題的可以在下方留言提問。

以上是React 16 新功能有哪些？ react16的新功能與功能的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！