欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2022年03月15日 08:33:05   作者:Lewyon  
本文主要介紹了react?16.8版本新特性以及對react開發(fā)的影響,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

Facebook團隊對社區(qū)上的MVC框架都不太滿意的情況下,開發(fā)了一套開源的前端框架react,于2013年發(fā)布第一個版本。

react最開始倡導函數(shù)式編程,使用function以及內(nèi)部方法React.creactClass創(chuàng)建組件,之后在ES6推出之后,使用類組件Class構(gòu)建包含生命周期的組件。

react 16.8版本更新

react16.8版本更新標志性的信息,是引入了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)更新這三個階段的生命周期函數(shù)

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

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

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

組件復用更便捷

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

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

實例

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

hooks和react diff算法

  • react diff這里不做深入講解,簡單來說diff算法是react以及vue2.0版本當中:

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

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

兩者的聯(lián)系:

  • hooks在更新之后,減少了對生命周期函數(shù)的執(zhí)行,同時更新狀態(tài)更為迅速,這樣在虛擬dom執(zhí)行過程中,提高diff執(zhí)行速度

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

總結(jié)

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

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

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

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

相關(guān)文章

  • 詳解React中setState回調(diào)函數(shù)

    詳解React中setState回調(diào)函數(shù)

    這篇文章主要介紹了詳解React中setState回調(diào)函數(shù),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-06
  • 模塊化react-router配置方法詳解

    模塊化react-router配置方法詳解

    這篇文章主要介紹了模塊化react-router配置方法詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-06-06
  • 淺談React 屬性和狀態(tài)的一些總結(jié)

    淺談React 屬性和狀態(tài)的一些總結(jié)

    下面小編就為大家?guī)硪黄獪\談React 屬性和狀態(tài)的一些總結(jié)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-11-11
  • 深入理解react 組件類型及使用場景

    深入理解react 組件類型及使用場景

    這篇文章主要介紹了深入理解react 組件類型及使用場景,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-03-03
  • React創(chuàng)建組件的的方式匯總

    React創(chuàng)建組件的的方式匯總

    React 是一個用于構(gòu)建用戶界面的 JAVASCRIPT 庫。這篇文章主要介紹了React組件的兩種創(chuàng)建方式,一種是使用函數(shù)創(chuàng)建組件另一種是使用類創(chuàng)建組件,需要的朋友可以參考下
    2021-11-11
  • react-router-dom?降低版本的兩種方法詳解

    react-router-dom?降低版本的兩種方法詳解

    這篇文章主要介紹了react-router-dom?降低版本的兩種方法,本篇文章就記錄下如何降低 react-router-dom 為 v5 版本的兩種方法,需要的朋友可以參考下
    2022-12-12
  • react函數(shù)組件類組件區(qū)別示例詳解

    react函數(shù)組件類組件區(qū)別示例詳解

    這篇文章主要為大家介紹了react函數(shù)組件類組件區(qū)別示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-08-08
  • React18中的useDeferredValue示例詳解

    React18中的useDeferredValue示例詳解

    這篇文章主要介紹了React18中的useDeferredValue的相關(guān)知識,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-03-03
  • 每天一個hooks學習之useUnmount

    每天一個hooks學習之useUnmount

    這篇文章主要為大家介紹了每天一個hooks學習之useUnmount,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-05-05
  • 在React中如何優(yōu)雅的處理事件響應(yīng)詳解

    在React中如何優(yōu)雅的處理事件響應(yīng)詳解

    這篇文章主要給大家介紹了關(guān)于在React中如何優(yōu)雅處理事件響應(yīng)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面跟著小編來一起學習學習吧。
    2017-07-07

最新評論