react 16.8版本新特性以及對react開發的影響

Lewyon發表於2022-03-14
React

Facebook團隊對社群上的MVC框架都不太滿意的情況下，開發了一套開源的前端框架react，於2013年釋出第一個版本。

react最開始倡導函數語言程式設計，使用function以及內部方法React.creactClass建立元件，之後在ES6推出之後，使用類元件Class構建包含生命週期的元件。

  • react 16.8版本更新

react16.8版本更新標誌性的資訊，是引入了hooks以及相關的一些api。

useState:

// 函式式元件初始化state和更改state：

const Counter = () =>{
const [num,setNum] = userState(0);
return(
  <div>
      <div>{count}</div>
       <button onClick={()=>setCount(num+ 1)}>+</button>
  </div>
  );
};
  • useEffect
    userEffect副作用函式的元件，不僅取代了元件初始化，元件掛載成功，元件狀態更新這三個階段的生命週期函式

同時還能在這個階段處理一些記憶體佇列：包括定時器等，解決了在16.8版本之前，在元件移除之後，非同步佇列沒有被移除，佔據記憶體導致頁面卡頓等問題

useEffect(() => {
  compoment.subscribe(id);
  return () => {
      compoment.unsubscribe(theId)    //取消訂閱
  }
});

  • react16.8版本更新解決了什麼問題

    • 元件複用更便捷

在更新的版本之前，複用元件，更多的是使用高階元件，以及封裝的元件，通過傳參和父子元件通訊的形式去複用，

更新之後，可以通過函式式元件返回狀態的形式，去接受元件向外暴露的元件內容。

例項

//舊版本
function children() {
  return function (WrappedComponent) {
    return class HighComponent extends React.Component {
      state = {
        childProps: xxx
      };
      render() {
        const { childProps } = this.state;
        return <WrappedComponent childProps={childProps} />;
      }
    };
  };
}

class App extends Component{
  render(){
/**
 * 呼叫高階元件
 */
    const { childProps} = this.props;
    return (
      <children
        columns={[...]}
      // tableProps包含pagination, onChange, dataSource等屬性。
        {...childProps}
      />
    )
  }
}


// 新版本
function children() {
  const [childProps, setChildProps] = useState(xxx);
  return childProps;
}

function App {
    const { childProps} = useTable();
    return (
      <Table 
        columns={[...]}
      // tableProps包含pagination, onChange, dataSource等屬性
        {...childProps}
      />
    )
}
    • 在我們上面提到的，清除定時器，以及解決在生命週期變化過程中，消除佔用記憶體的佇列等
    • 函式式元件出現了狀態管理，在以往的react函數語言程式設計過程中,react只能被動去接收一個從父元件傳遞下來的一個props狀態，在hooks更新之後，可以使用hooks更新的方法，提高元件的功能性以及擴充套件性，在函式式元件當中擁有了像class元件一樣可控生命週期
    • useEffect取代了一部分生命週期函式，從程式碼量的角度來說，簡化了程式碼，解決了在class元件在編寫過程中，需要不斷使用bind或者箭頭函式去繫結當前的this，更專注於當前狀態的管理

  • hooks和react diff演算法

  • react diff這裡不做深入講解，簡單來說diff演算法是react以及vue2.0版本當中：

內部有一套虛擬dom的演算法，在元件渲染過程中，對每個dom渲染一個key值，

在state狀態更新過程時，對應渲染的虛擬dom會去對比真實渲染在頁面上的dom元素，如果某個節點對比時發現有更改，對應更改當前虛擬dom節點的資料狀態，再渲染真實的dom到頁面當中。

兩者的聯絡：

  1. hooks在更新之後，減少了對生命週期函式的執行，同時更新狀態更為迅速，這樣在虛擬dom執行過程中，提高diff執行速度

  2. hooks使得函式式元件有了自己內部的狀態，在函式式元件執行過程中，不需要等待裝載到父元件當中，自己可以更新狀態，所以減少了部分dom的深度，在頁面渲染過程中，也算是變相提高了頁面渲染速度。

總結

hooks在出現之後，對react前端開發來說，標誌性的特點應該是解決了類似定時器佇列佔據記憶體的問題，簡化了react生命週期和元件程式碼，追溯資料流向和狀態修改更為清晰。

在16.8版本之後的小版本更是出現了自定義hooks，還有usememo等api，

包含vue3.0新的api，這些版本的更新都在幫助前端開發者不用再花更多的時間去研究生命週期執行和執行的過程，去專注頁面上狀態的改變，快速和穩健開發前端業務。

文章個人部落格地址：react 16.8版本新特性以及對react開發的影響

相關文章