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

React函數(shù)式組件與類組件的不同你知道嗎

 更新時間:2022年03月29日 14:15:31   作者:南梔~zmt  
這篇文章主要為大家詳細介紹了React函數(shù)式組件與類組件的不同,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助

區(qū)別

區(qū)別函數(shù)組件類組件
生命周期
this
state
改變stateReact Hooks:useStatethis.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ù)字滾動的效果示例

    這篇文章主要介紹了react 不用插件實現(xiàn)數(shù)字滾動的效果示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-04-04
  • React?Context原理深入理解源碼示例分析

    React?Context原理深入理解源碼示例分析

    這篇文章主要為大家介紹了React?Context原理深入理解源碼示例分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-01-01
  • react-native 圓弧拖動進度條實現(xiàn)的示例代碼

    react-native 圓弧拖動進度條實現(xiàn)的示例代碼

    本篇文章主要介紹了react-native 圓弧拖動進度條實現(xiàn)的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • react+react-beautiful-dnd實現(xiàn)代辦事項思路詳解

    react+react-beautiful-dnd實現(xiàn)代辦事項思路詳解

    這篇文章主要介紹了react+react-beautiful-dnd實現(xiàn)代辦事項,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-06-06
  • React?state結構設計原則示例詳解

    React?state結構設計原則示例詳解

    這篇文章主要為大家介紹了React?state結構設計原則示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-06-06
  • react-redux中connect()方法詳細解析

    react-redux中connect()方法詳細解析

    connect()是React-redux中的核心方法之一,它將react組件預redux中的Store真正連接在一起,下面這篇文章主要給大家介紹了react-redux中connect()方法的相關資料,文中介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。
    2017-05-05
  • React報錯Type '() => JSX.Element[]' is not assignable to type FunctionComponent

    React報錯Type '() => JSX.Element[]&apos

    這篇文章主要為大家介紹了React報錯Type '() => JSX.Element[]' is not assignable to type FunctionComponent解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-12-12
  • 詳解在React項目中安裝并使用Less(用法總結)

    詳解在React項目中安裝并使用Less(用法總結)

    這篇文章主要介紹了詳解在React項目中安裝并使用Less(用法總結),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-03-03
  • jsoneditor二次封裝實時預覽json編輯器組件react版

    jsoneditor二次封裝實時預覽json編輯器組件react版

    這篇文章主要為大家介紹了jsoneditor二次封裝實時預覽json編輯器組件react版示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-10-10
  • React組件實例三大屬性state props refs使用詳解

    React組件實例三大屬性state props refs使用詳解

    這篇文章主要為大家介紹了React組件實例三大屬性state props refs使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09

最新評論