最官方的react16.0更新功能

xingpingz 發布于2019-08-22 13:53 / 843人閱讀

摘要：修復了這一點，引入了的概念，中文譯為錯誤邊界，當某個組件發生錯誤時，我們可以通過捕獲到錯誤并對錯誤做優雅處理。擴展采用了最新的技術，你可以在點擊這里來閱讀官方文檔暫時就這么多，后續發現更多我再進行更新，希望大家喜歡

React v16.0

September 26, 2017 by Andrew Clark

新版本的render可以返回數組、字符串、react組件、數字、boolean值

如果返回數組必須給每一個數組元素添加一個唯一標識key，但是從v16.2開始reat

// 第一種返回數組
render() {
  // 這里不同于v15.x必須要一個標簽來包裹
  return [
    // key是必須的，一般不要把數組的index索引作為key，這樣可能會導致頁面不會按照你想象的效果進行渲染
    First item,
    Second item,
    Third item,
  ];
}

// 第二種返回字符串
render() {
  return "Look ma, no spans!";
}

更好的錯誤處理方式

之前react在渲染過程中或者是生命周期內出現了致命的錯誤，react會從根組件上把所有的組件都卸載下來，以防止展現錯誤的數據，但這不是最好的用戶體驗。React 16修復了這一點，引入了Error Boundary的概念，中文譯為“錯誤邊界”，當某個組件發生錯誤時，我們可以通過Error Boundary捕獲到錯誤并對錯誤做優雅處理。（注：它并不能捕獲runtime所有的錯誤，比如組件回調事件里的錯誤，可以把它想象成傳統的try-catch語句）

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
// 新增了componentDidCatch這個生命周期函數，它可以捕獲自身及子樹上的錯誤并對錯誤做優雅處理，包括上報錯誤日志、展示出錯提示，而不是卸載整個組件樹。
  componentDidCatch(error, info) {
    // 錯誤代理組件的展示與否
    this.setState({ hasError: true });
    // 在這里我們可以對錯誤進行記錄
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // 在這里我們可以書寫自己想要展示的ui組件
      return Something went wrong.;
    }
    return this.props.children;
  }
}

上面的組件是當頁面中有錯誤時我們想要展示的效果，具體用法如下:

render(){
  return (
    
          // 外層組件我們定義的錯誤組件
             // 內層組件是我們將要監視的自定義組件
      
      
    
  )
}

這個組件能夠不僅僅能夠監聽到本組件的錯誤，連同它下面的子組件的錯誤也可以監聽到

setState傳入null時不會再觸發更新

之前的setState不管傳入什么只要調用了這么方法就會渲染

selectCity(e){
  const newValue = e.target.value;
  this.setState((state)=>{
    if(state.city===newValue){
      return null;
    }
    return {city:newValue}
  })
)

v16.0支持自定義的dom屬性

之前的版本對于自定義屬性react會在屬性前加上data-**來進行處理，現在對于部分屬性去除了這種寫法，擁抱了原生dom，這樣可以減少react的代碼，提升了性能

從數據來說，React v16比v15.6版本縮小了32%

更好的服務器端渲染：React 16的SSR被完全重寫，新的實現非常快，接近3倍性能于React 15，現在提供一種流模式streaming，可以更快地把渲染的字節發送到客戶端。

擴展

react v16采用了最新的技術“Fiber.”，你可以在點擊這里來閱讀官方文檔

暫時就這么多，后續發現更多我再進行更新，希望大家喜歡

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92577.html

React 16 發布啦。。渣渣看了一下更新文檔~

摘要：又雙叒更新啦這次是，其實在前段時間就知道最近要發布了。協議更新了。。。這樣做是為了阻止損壞數據的顯示。協議的協議已經是協議了，當然，也把已經發布的頁改成協議了。 React 又雙叒更新啦~ 這次是React v16.0，其實在前段時間就知道最近要發布了。協議更新了。。。來看看其他的變化吧。自己看著玩的。。期待官方中文文檔的更新。。原文地址：React v16.0 我們很高興地宣布發...

xi4oh4o 2019-08-21 16:47 評論0 收藏0
重拾React: React 16.0

摘要：然而之前的相當于從最頂層的組件開始，自頂向下遞歸調用，不會被中斷，這樣就會持續占用瀏覽器主線程。眾所周知，是單線程運行，長時間占用主線程會阻塞其他類似于樣式計算布局繪制等運算，從而出現掉幀的情況。前言　　首先歡迎大家關注我的Github博客，也算是對我的一點鼓勵，畢竟寫東西沒法獲得變現，能堅持下去也是靠的是自己的熱情和大家的鼓勵，希望大家多多關注呀！從今年年初離開React開發崗，...

henry14 2019-08-23 13:57 評論0 收藏0
盤點 React 16.0 ~ 16.5 主要更新及其應用

摘要：大約一年前，團隊發布了。時至今日，已更新到。這其中有不少激動人心的特性如架構的引入新的周期函數全新等都值得開發者跟進學習。本文就以更新日志為引，選取幾個重要且用于工作的更新，和大家一起學習。所有示例代碼在配合文章一起食用更佳大約一年前，React 團隊發布了 React 16.0。時至今日，已更新到 16.5 。這其中有不少激動人心的特性(如 Fiber 架構的引入、新的周期函數、全...

idealcn 2019-08-23 12:03 評論0 收藏0
React16時代，該用什么姿勢寫 React ?

摘要：的返回值將作為的參數，如果返回，則不更新，不能返回或以外的值，否則會警告。在更新之前調用，此時已更新返回值作為的第個參數一般用于獲取之前的數據語法是從的返回值，默認是的使用場景一般是獲取組建更新之前的滾動條位置。 React16 后的各功能點是多個版本陸陸續續迭代增加的，本篇文章的講解是建立在 16.6.0 版本上本篇文章主旨在介紹 React16 之后版本中新增或修改的地方，所以對于...

Reducto 2019-08-23 15:33 評論0 收藏0