React函數(shù)式組件與類組件的不同你知道嗎
區(qū)別
區(qū)別 | 函數(shù)組件 | 類組件 |
---|---|---|
生命周期 | 無 | 有 |
this | 無 | 有 |
state | 無 | 有 |
改變state | React Hooks:useState | this.setState() |
性能 | 高(不用實例化) | 低(需要實例化) |
其他區(qū)別
ProfilePageClass.js
import React from 'react'; class ProfilePageClass extends React.Component { showMessage = () => { alert('Folloed' + this.props.user); }; handleclick = () => { setTimeout(this.showMessage,3000); }; render(){ return <button onClick={this.handleclick}>Follow</button> } } export default ProfilePageClass;
ProfilePageFunction.js
import React from 'react'; function ProfilePageFunction(props){ const showMessage = () => { alert('Followed'+ props.user); } const handleClick = () => { setTimeout(showMessage,3000); } return( <button onClick={handleClick}>Follow</button> ) } export default ProfilePageFunction;
Home.js
import React from "react"; import ProfilePageFunction from './ProfilePageFunction'; import ProfilePageClass from './ProfilePageClass'; class Home extends React.Component { state = { user: 'Dan', }; render() { return ( <> <label> <b>Choose profile to view: </b> <select value={this.state.user} onChange={e => this.setState({ user: e.target.value })} > <option value="Dan">Dan</option> <option value="Sophie">Sophie</option> <option value="Sunil">Sunil</option> </select> </label> <h1>Welcome to {this.state.user}'s profile!</h1> <p> <ProfilePageFunction user={this.state.user} /> <b> (function組件)</b> </p> <p> <ProfilePageClass user={this.state.user} /> <b> (class組件)</b> </p> <p> Can you spot the difference in the behavior? </p> </> ) } } export default Home;
頁面展示:
進行如下操作發(fā)現(xiàn)問題:(初始用戶為Dan)
1.點擊其中的Follow按鈕
2.3s內切換選中的賬號
3.查看彈出的文本。
點擊函數(shù)組件的Follow:
點擊類組件的Follow:
點擊件的Follow按鈕時,執(zhí)行handleClick(),3s后顯示用戶的姓名。
函數(shù)組件:若你在點擊Follow按鈕3s內切換用戶,3s后調用的函數(shù)輸出的用戶仍未之前的用戶姓名。
類組件:若你在點擊Follow按鈕3s內切換用戶,3s后調用的函數(shù)輸出的用戶為改變之后的用戶姓名。
此時類組件就有一個問題:我之前的handleClick()執(zhí)行的是A用戶的操作,但操作還沒執(zhí)行,切換用戶后,直接調用執(zhí)行了B用戶的相同操作。
此案例中,當父組件的state改變時,子組件進行重新渲染,子組件的props改變;
類組件:
- 改變props(Dan-Sophie),類組件也改變了值,永遠保持一致。
- 原因:類組件捕獲最新的值(永遠保持一致)當實例的props屬性發(fā)生修改時,class組件直接使用this(組件的實例),所以可以直接獲取組件最新的props。
函數(shù)組件:函數(shù)式組件捕獲了渲染所用的值。
- 當我改變props時(Dan->Sophie),你會發(fā)現(xiàn)函數(shù)組件會渲染之前的值Dan這個名字。
- 原因:函數(shù)式組件捕獲了渲染所使用的值。在函數(shù)組件中,之前的props參數(shù),已經(jīng)因為javascript閉包的特性,保存在內存之中,無法從外部進行修改(維護多個人的狀態(tài))。所以在定時器執(zhí)行callback時,打印的還是舊值。
使用Hooks,同樣的原則也適用于state??催@個例子:
MessageThread.js
import {useState} from 'react'; function MessageThread() { const [message, setMessage] = useState(''); const showMessage = () => { alert('You said: ' + message); }; const handleSendClick = () => { setTimeout(showMessage, 3000); }; const handleMessageChange = (e) => { setMessage(e.target.value); }; return ( <> <input value={message} onChange={handleMessageChange} /> <button onClick={handleSendClick}>Send</button> </> ); } export default MessageThread;
說明了同樣的觀點:如果我發(fā)送一條特定的消息,組件不應該對實際發(fā)送的是哪條消息感到困惑。這個函數(shù)組件的message變量捕獲了“屬于”返回了被瀏覽器調用的單擊處理函數(shù)的那一次渲染。
所以當我點擊“發(fā)送”時message被設置為那一刻在input中輸入的內容。
在函數(shù)式組件中,你也可以擁有一個在所有的組件渲染幀中共享的可變變量,它被成為“ref”。 ref可以隨時讀取當前值。
需要自己手動管理。
import React, { useState, useEffect, useRef } from "react"; import ReactDOM from "react-dom"; function MessageThread() { const [message, setMessage] = useState(''); // Keep track of the latest value. const latestMessage = useRef(''); useEffect(() => { latestMessage.current = message; }); const showMessage = () => { alert('You said: ' + latestMessage.current); }; const handleSendClick = () => { setTimeout(showMessage, 3000); }; const handleMessageChange = (e) => { setMessage(e.target.value); }; return ( <> <input value={message} onChange={handleMessageChange} /> <button onClick={handleSendClick}>Send</button> </> ); } export default MessageThread;
總結
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關注腳本之家的更多內容!
相關文章
react 不用插件實現(xiàn)數(shù)字滾動的效果示例
這篇文章主要介紹了react 不用插件實現(xiàn)數(shù)字滾動的效果示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-04-04react-native 圓弧拖動進度條實現(xiàn)的示例代碼
本篇文章主要介紹了react-native 圓弧拖動進度條實現(xiàn)的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04react+react-beautiful-dnd實現(xiàn)代辦事項思路詳解
這篇文章主要介紹了react+react-beautiful-dnd實現(xiàn)代辦事項,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06React報錯Type '() => JSX.Element[]&apos
這篇文章主要為大家介紹了React報錯Type '() => JSX.Element[]' is not assignable to type FunctionComponent解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12jsoneditor二次封裝實時預覽json編輯器組件react版
這篇文章主要為大家介紹了jsoneditor二次封裝實時預覽json編輯器組件react版示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10React組件實例三大屬性state props refs使用詳解
這篇文章主要為大家介紹了React組件實例三大屬性state props refs使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09