日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

淺談react?16.8版本新特性以及對react開發的影響_React

作者：Lewyon ? 更新時間： 2022-05-16 編程語言

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(
  

      
{count}

       
  

  );
};

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 ;
      }
    };
  };
}

class App extends Component{
  render(){
/**
 * 調用高階組件
 */
    const { childProps} = this.props;
    return (
      
    )
  }
}

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

function App {
    const { childProps} = useTable();
    return (
      
    )
}

    

  • 在我們上面提到的，清除定時器，以及解決在生命周期變化過程中，消除占用內存的隊列等
    • 

  • 函數式組件出現了狀態管理，在以往的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到頁面當中。
兩者的聯系：
    

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

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

總結
hooks在出現之后，對react前端開發來說，標志性的特點應該是解決了類似定時器隊列占據內存的問題，簡化了react生命周期和組件代碼，追溯數據流向和狀態修改更為清晰。
在16.8版本之后的小版本更是出現了自定義hooks，還有usememo等api，
包含vue3.0新的api，這些版本的更新都在幫助前端開發者不用再花更多的時間去研究生命周期執行和運行的過程，去專注頁面上狀態的改變，快速和穩健開發前端業務。
原文鏈接：https://www.cnblogs.com/akari16/p/16004571.html














    
        
        

    
  





 
    
     


 
  
   
   
  

 




  • <table id="keciy"></table><li id="keciy"></li>
          2.