快捷導(dǎo)航

淺談react?16.8版本新特性以及對(duì)react開發(fā)的影響

更新時(shí)間：2022年03月15日 08:33:05 作者：Lewyon

本文主要介紹了react?16.8版本新特性以及對(duì)react開發(fā)的影響，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

react 16.8版本更新

react16.8版本更新標(biāo)志性的信息，是引入了hooks以及相關(guān)的一些api。

useState:

// 函數(shù)式組件初始化state和更改state：

const Counter = () =>{
const [num,setNum] = userState(0);
return(
  <div>
      <div>{count}</div>
       <button onClick={()=>setCount(num+ 1)}>+</button>
  </div>
  );
};

useEffect

userEffect副作用函數(shù)的組件，不僅取代了組件初始化，組件掛載成功，組件狀態(tài)更新這三個(gè)階段的生命周期函數(shù)

同時(shí)還能在這個(gè)階段處理一些內(nèi)存隊(duì)列：包括定時(shí)器等，解決了在16.8版本之前，在組件移除之后，異步隊(duì)列沒有被移除，占據(jù)內(nèi)存導(dǎo)致頁(yè)面卡頓等問題

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

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

組件復(fù)用更便捷

在更新的版本之前，復(fù)用組件，更多的是使用高階組件，以及封裝的組件，通過傳參和父子組件通信的形式去復(fù)用，

更新之后，可以通過函數(shù)式組件返回狀態(tài)的形式，去接受組件向外暴露的組件內(nèi)容。

實(shí)例

//舊版本
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(){
/**
 * 調(diào)用高階組件
 */
    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}
      />
    )
}

在我們上面提到的，清除定時(shí)器，以及解決在生命周期變化過程中，消除占用內(nèi)存的隊(duì)列等
函數(shù)式組件出現(xiàn)了狀態(tài)管理，在以往的react函數(shù)式編程過程中,react只能被動(dòng)去接收一個(gè)從父組件傳遞下來的一個(gè)props狀態(tài)，在hooks更新之后，可以使用hooks更新的方法，提高組件的功能性以及擴(kuò)展性，在函數(shù)式組件當(dāng)中擁有了像class組件一樣可控生命周期
useEffect取代了一部分生命周期函數(shù)，從代碼量的角度來說，簡(jiǎn)化了代碼，解決了在class組件在編寫過程中，需要不斷使用bind或者箭頭函數(shù)去綁定當(dāng)前的this，更專注于當(dāng)前狀態(tài)的管理

hooks和react diff算法

react diff這里不做深入講解，簡(jiǎn)單來說diff算法是react以及vue2.0版本當(dāng)中：

內(nèi)部有一套虛擬dom的算法，在組件渲染過程中，對(duì)每個(gè)dom渲染一個(gè)key值，

在state狀態(tài)更新過程時(shí)，對(duì)應(yīng)渲染的虛擬dom會(huì)去對(duì)比真實(shí)渲染在頁(yè)面上的dom元素，如果某個(gè)節(jié)點(diǎn)對(duì)比時(shí)發(fā)現(xiàn)有更改，對(duì)應(yīng)更改當(dāng)前虛擬dom節(jié)點(diǎn)的數(shù)據(jù)狀態(tài)，再渲染真實(shí)的dom到頁(yè)面當(dāng)中。

兩者的聯(lián)系：

hooks在更新之后，減少了對(duì)生命周期函數(shù)的執(zhí)行，同時(shí)更新狀態(tài)更為迅速，這樣在虛擬dom執(zhí)行過程中，提高diff執(zhí)行速度
hooks使得函數(shù)式組件有了自己內(nèi)部的狀態(tài)，在函數(shù)式組件執(zhí)行過程中，不需要等待裝載到父組件當(dāng)中，自己可以更新狀態(tài)，所以減少了部分dom的深度，在頁(yè)面渲染過程中，也算是變相提高了頁(yè)面渲染速度。

總結(jié)

hooks在出現(xiàn)之后，對(duì)react前端開發(fā)來說，標(biāo)志性的特點(diǎn)應(yīng)該是解決了類似定時(shí)器隊(duì)列占據(jù)內(nèi)存的問題，簡(jiǎn)化了react生命周期和組件代碼，追溯數(shù)據(jù)流向和狀態(tài)修改更為清晰。

在16.8版本之后的小版本更是出現(xiàn)了自定義hooks，還有usememo等api，

包含vue3.0新的api，這些版本的更新都在幫助前端開發(fā)者不用再花更多的時(shí)間去研究生命周期執(zhí)行和運(yùn)行的過程，去專注頁(yè)面上狀態(tài)的改變，快速和穩(wěn)健開發(fā)前端業(yè)務(wù)。

到此這篇關(guān)于淺談react 16.8版本新特性以及對(duì)react開發(fā)的影響的文章就介紹到這了,更多相關(guān)react 16.8新特性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: