国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

精讀《Function VS Class 組件》

FWHeart / 1027人閱讀

摘要:未來可能成為官方之一。討論地址是精讀組件如果你想參與討論,請點擊這里,每周都有新的主題,周末或周一發布。前端精讀幫你篩選靠譜的內容。

1. 引言

為什么要了解 Function 寫法的組件呢?因為它正在變得越來越重要。

那么 React 中 Function Component 與 Class Component 有何不同?

how-are-function-components-different-from-classes 這篇文章帶來了一個獨特的視角。

順帶一提,以后會用 Function Component 代替 Stateless Component 的說法,原因是:自從 Hooks 出現,函數式組件功能在不斷豐富,函數式組件不再需要強調其無狀態特性,因此叫 Function Component 更為恰當。
2. 概述

原文事先申明:并沒有對 Function 與 Classes 進行優劣對比,而僅僅進行特性對比,所以不接受任何吐槽。

這兩種寫法沒有好壞之分,性能差距也幾乎可以忽略,而且 React 會長期支持這兩種寫法。
Capture props

對比下面兩段代碼。

Class Component:

class ProfilePage extends React.Component {
  showMessage = () => {
    alert("Followed " + this.props.user);
  };

  handleClick = () => {
    setTimeout(this.showMessage, 3000);
  };

  render() {
    return ;
  }
}

Function Component:

function ProfilePage(props) {
  const showMessage = () => {
    alert("Followed " + props.user);
  };

  const handleClick = () => {
    setTimeout(showMessage, 3000);
  };

  return ;
}

(在線 Demo>))

這兩個組件都描述了同一個邏輯:點擊按鈕 3 秒后 alert 父級傳入的用戶名。

如下父級組件的調用方式:


那么當點擊按鈕后的 3 秒內,父級修改了 this.state.user,彈出的用戶名是修改前的還是修改后的呢?

Class Component 展示的是修改后的值:

); }

(在線 Demo)

在點擊 Send 按鈕后,再次修改輸入框的值,3 秒后的輸出依然是 點擊前輸入框的值。這說明 Hooks 同樣具有 capture value 的特性。

利用 useRef 可以規避 capture value 特性:

function MessageThread() {
  const latestMessage = useRef("");

  const showMessage = () => {
    alert("You said: " + latestMessage.current);
  };

  const handleSendClick = () => {
    setTimeout(showMessage, 3000);
  };

  const handleMessageChange = e => {
    latestMessage.current = e.target.value;
  };
}

只要將賦值與取值的對象變成 useRef,而不是 useState,就可以躲過 capture value 特性,在 3 秒后得到最新的值。

這說明了利用 Function Component + Hooks 可以實現 Class Component 做不到的 capture props、capture value,而且 React 官方也推薦 新的代碼使用 Hooks 編寫。

3. 精讀

原文 how-are-function-components-different-from-classes 從一個側面講述了 Function Component 與 Class Component 的不同點,之所以將 Function Component 與 Class Component 相提并論,幾乎都要歸功于 Hooks API 的出現,有了 Hooks,Function Component 的能力才得以向 Class Component 看齊。

關于 React Hooks,之前的兩篇精讀分別有過介紹:

精讀《React Hooks》

精讀《怎么用 React Hooks 造輪子》

但是,雖然 Hook 已經發布了穩定版本,但周邊生態跟進還需要時間(比如 useRouter)、最佳實踐整理還需要時間,因此不建議重構老代碼。

為了更好的使用 Function Component,建議時常與 Class Component 的功能做對比,方便理解和記憶。

下面整理一些常見的 Function Component 問題:

非常建議完整閱讀 React Hooks FAQ。
怎么替代 shouldComponentUpdate

說實話,Function Component 替代 shouldComponentUpdate 的方案并沒有 Class Component 優雅,代碼是這樣的:

const Button = React.memo(props => {
  // your component
});

或者在父級就直接生成一個自帶 memo 的子元素:

function Parent({ a, b }) {
  // Only re-rendered if `a` changes:
  const child1 = useMemo(() => , [a]);
  // Only re-rendered if `b` changes:
  const child2 = useMemo(() => , [b]);
  return (
    <>
      {child1}
      {child2}
    
  );
}

相比之下,Class Component 的寫法通常是:

class Button extends React.PureComponent {}

這樣就自帶了 shallowEqualshouldComponentUpdate。

怎么替代 componentDidUpdate

由于 useEffect 每次 Render 都會執行,因此需要模擬一個 useUpdate 函數:

const mounting = useRef(true);
useEffect(() => {
  if (mounting.current) {
    mounting.current = false;
  } else {
    fn();
  }
});

更多可以查看 精讀《怎么用 React Hooks 造輪子》

怎么替代 forceUpdate

React 官方文檔提供了一種方案:

const [ignored, forceUpdate] = useReducer(x => x + 1, 0);

function handleClick() {
  forceUpdate();
}

每次執行 dispatch 時,只要 state 變化就會觸發組件更新。當然 useState 也同樣可以模擬:

const useUpdate = () => useState(0)[1];

我們知道 useState 下標為 1 的項是用來更新數據的,而且就算數據沒有變化,調用了也會刷新組件,所以我們可以把返回一個沒有修改數值的 setValue,這樣它的功能就僅剩下刷新組件了。

更多可以查看 精讀《怎么用 React Hooks 造輪子》

state 拆分過多

useState 目前的一種實踐,是將變量名打平,而非像 Class Component 一樣寫在一個 State 對象里:

class ClassComponent extends React.PureComponent {
  state = {
    left: 0,
    top: 0,
    width: 100,
    height: 100
  };
}

// VS

function FunctionComponent {
  const [left,setLeft] = useState(0)
  const [top,setTop] = useState(0)
  const [width,setWidth] = useState(100)
  const [height,setHeight] = useState(100)
}

實際上在 Function Component 中也可以聚合管理 State:

function FunctionComponent() {
  const [state, setState] = useState({
    left: 0,
    top: 0,
    width: 100,
    height: 100
  });
}

只是更新的時候,不再會自動 merge,而需要使用 ...state 語法:

setState(state => ({ ...state, left: e.pageX, top: e.pageY }));

可以看到,更少的黑魔法,更可預期的結果。

獲取上一個 props

雖然不怎么常用,但是畢竟 Class Component 可以通過 componentWillReceiveProps 拿到 previousPropsnextProps,對于 Function Component,最好通過自定義 Hooks 方式拿到上一個狀態:

function Counter() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);
  return (
    

Now: {count}, before: {prevCount}

); } function usePrevious(value) { const ref = useRef(); useEffect(() => { ref.current = value; }); return ref.current; }

通過 useEffect 在組件渲染完畢后再執行的特性,再利用 useRef 的可變特性,讓 usePrevious 的返回值是 “上一次” Render 時的。

可見,合理運用 useEffect useRef,可以做許多事情,而且封裝成 CustomHook 后使用起來仍然很方便。

未來 usePrevious 可能成為官方 Hooks 之一。
性能注意事項

useState 函數的參數雖然是初始值,但由于整個函數都是 Render,因此每次初始化都會被調用,如果初始值計算非常消耗時間,建議使用函數傳入,這樣只會執行一次:

function FunctionComponent(props) {
  const [rows, setRows] = useState(() => createRows(props.count));
}
useRef 不支持這種特性,需要寫一些冗余的函判定是否進行過初始化。

掌握了這些,Function Component 使用起來與 Class Component 就幾乎沒有差別了!

4. 總結

Function Component 功能已經可以與 Class Component 媲美了,但目前最佳實踐比較零散,官方文檔推薦的一些解決思路甚至不比社區第三方庫的更好,可以預料到,Class Component 的功能會被五花八門的實現出來,那些沒有被收納進官方的 Hooks 乍看上去可能會眼花繚亂。

總之選擇了 Function Component 就同時選擇了函數式的好與壞。好處是功能強大,幾乎可以模擬出任何想要的功能壞處是由于可以靈活組合,如果自定義 Hooks 命名和實現不夠標準,函數與函數之間對接的溝通成本會更大。

討論地址是:精讀《Stateless VS Class 組件》 · Issue #137 · dt-fe/weekly

如果你想參與討論,請 點擊這里,每周都有新的主題,周末或周一發布。前端精讀 - 幫你篩選靠譜的內容。

關注 前端精讀微信公眾號

special Sponsors

DevOps 全流程平臺

版權聲明:自由轉載-非商用-非衍生-保持署名(創意共享 3.0 許可證)

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/109204.html

相關文章

  • 精讀《useEffect 完全指南》

    摘要:引言工具型文章要跳讀,而文學經典就要反復研讀。原文非常長,所以概述是筆者精簡后的。這是理解以及的關鍵,后面還會詳細介紹。從幾個疑問開始假設讀者有比較豐富的前端開發經驗,并且寫過一些。 1. 引言 工具型文章要跳讀,而文學經典就要反復研讀。如果說 React 0.14 版本帶來的各種生命周期可以類比到工具型文章,那么 16.7 帶來的 Hooks 就要像文學經典一樣反復研讀。 Hooks...

    April 評論0 收藏0
  • 精讀《Vue3.0 Function API》

    摘要:拿到的都是而不是原始值,且這個值會動態變化。精讀對于的與,筆者做一些對比。因此采取了作為優化方案只有當第二個依賴參數變化時才返回新引用。不需要使用等進行性能優化,所有性能優化都是自動的。前端精讀幫你篩選靠譜的內容。 1. 引言 Vue 3.0 的發布引起了軒然大波,讓我們解讀下它的 function api RFC 詳細了解一下 Vue 團隊是怎么想的吧! 首先官方回答了幾個最受關注的...

    voyagelab 評論0 收藏0
  • 理解 React Hooks 的 Capture Value 特性

    摘要:在讀了一些文章后,大致是找到自己總是掉坑的原因了沒理解中的特性。通過這個示例,相信會比較容易地理解特性,并如何使用來暫時繞過它。在知道并理解這個特性后,有助于進一步熟悉了的運行機制,減少掉坑的次數。 由于剛使用 React hooks 不久,對它的脾氣還拿捏不準,掉了很多次坑;這里的 坑 的意思并不是說 React hooks 的設計有問題,而是我在使用的時候,因為還沒有跟上它的理念導...

    curlyCheng 評論0 收藏0
  • 精讀《Epitath 源碼 - renderProps 新用法》

    摘要:精讀源碼一共行,我們分析一下其精妙的方式。更多討論討論地址是精讀新用法如果你想參與討論,請點擊這里,每周都有新的主題,周末或周一發布。前端精讀幫你篩選靠譜的內容。 1 引言 很高興這一期的話題是由 epitath 的作者 grsabreu 提供的。 前端發展了 20 多年,隨著發展中國家越來越多的互聯網從業者涌入,現在前端知識玲瑯滿足,概念、庫也越來越多。雖然內容越來越多,但作為個體的...

    Magicer 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<