最官方的react16.0更新功能

React v16.0

September 26, 2017 by Andrew Clark

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

• 若是返回數組必須給每個數組元素添加一個惟一標識key，可是從v16.2開始reat

  // 第一種返回數組
  render() {
    // 這裏不一樣於v15.x必需要一個標籤來包裹
    return [
      // key是必須的，通常不要把數組的index索引做爲key，這樣可能會致使頁面不會按照你想象的效果進行渲染
      <li key="A">First item</li>,
      <li key="B">Second item</li>,
      <li key="C">Third item</li>,
    ];
  }
  
  // 第二種返回字符串
  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 <h1>Something went wrong.</h1>;
      }
      return this.props.children;
    }
  }

• 上面的組件是當頁面中有錯誤時咱們想要展現的效果，具體用法以下:

  render(){
    return (
      <div>
        <ErrorBoundary>    // 外層組件咱們定義的錯誤組件
          <Profile user={this.state.user} />     // 內層組件是咱們將要監視的自定義組件
        </ErrorBoundary>
        <button onClick={this.onClick}>Update</button>
      </div>
    )
  }

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

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.」，你能夠在點擊這裏來閱讀官方文檔
• 暫時就這麼多，後續發現更多我再進行更新，但願你們喜歡