React-EffectHook的套用簡單範例

在React元件中，函數在正常返回之外的執行數據獲取，訂閱或手動修改DOM等操作被稱為副作用(effect)。useEffect()函數能給函陣列件增加操作副作用的能力，呼叫useEffect()函數表明在完成對DOM的更改後執行新增的副作用函數。

import { useEffect, useState } from "react";const infoMap = { beginInfo: '您已經單擊了', endInfo: '次按鈕', btnInfo: '計數器'}function EffectHookExampleOne() { const [count, setCount] = useState(0); // 相當於componentDidMount()方法 和 componentDidUpdate()方法: useEffect(() => { // 使用瀏覽器API更新頁面標題 document.title = infoMap.beginInfo + `${count} ` + infoMap.endInfo; }); return ( <div> <div>{infoMap.btnInfo}{count}{infoMap.endInfo}</div> <button onClick={() => setCount(count + 1)}> {infoMap.btnInfo} </button> </div> );}export default EffectHookExampleOne;

import React from "react";const infoMap = { beginInfo: '您已經單擊了', endInfo: '次按鈕', btnInfo: '計數器'}export default class EffectHookExampleTwo extends React.Component { constructor(props) { super(props); this.state = { count: 0 } } componentDidMount() { document.title = infoMap.beginInfo + `${this.state.count} ` + infoMap.endInfo; } componentDidUpdate() { document.title = infoMap.beginInfo+ `${this.state.count} ` + infoMap.endInfo } render() { return ( <div> <p>{infoMap.btnInfo}{this.state.count}{infoMap.endInfo}</p> <button onClick={() => this.setState({count: this.state.count + 1})}> {infoMap.btnInfo} </button> </div> ); }}

import { useState, useEffect } from "react";const infoMap = { idInfo: 1, subsrcibeToStatusOneInfo: 'Hook中的subsrcibeToStatusOneInfo()方法', unsubsrcibeFromStatusOneInfo: 'Hook中的unsubsrcibeFromStatusOneInfo()方法', loadInfo: '裝載...', onInfo: '線上', offInfo: '離線'}function subsrcibeToStatusOne(id, handleStatusChange, status){ console.log(infoMap.idInfo); console.log(infoMap.subsrcibeToStatusOneInfo); handleStatusChange(status);}function unsubsrcibeFromStatusOne(id, handleStatusChange, status){ console.log(infoMap.idInfo); console.log(infoMap.unsubsrcibeFromStatusOneInfo); handleStatusChange(status);}export default function EffectHookStatusOne(props) { const [isOnline, setIsOnline] = useState(null); useEffect(() => { function handleStatusChange(status) { setIsOnline(status.isOnline); } subsrcibeToStatusOne(props.id, handleStatusChange, status); return function cleanup(){ unsubsrcibeFromStatusOne(props.id, handleStatusChange, status); } }); if (isOnline === null){ return infoMap.loadInfo; } return isOnline ? infoMap.onInfo : infoMap.offInfo;}

import React from "react";const infoMap = { idInfo : 2, subsrcibeToStatusOneInfo: ' class中的subsrcibeToStatusOneInfo()方法', unsubsrcibeFromStatusOneInfo: ' class中的unsubsrcibeFromStatusOneInfo()方法', loadInfo: '裝載...', onInfo: '線上', offInfo: '離線'}function subsrcibeToStatusOne(id, handleStatusChange, status){ console.log(infoMap.idInfo); console.log(infoMap.subsrcibeToStatusOneInfo);}function unsubsrcibeFromStatusOne(id, handleStatusChange, status){ console.log(infoMap.idInfo); console.log(infoMap.unsubsrcibeFromStatusOneInfo);}export default class EffectHookStatusTwo extends React.Component { constructor(props){ super(props); this.state = { isOnline: null } this.handleStatusChange = this.handleStatusChange.bind(this); } componentDidMount(){ subsrcibeToStatusOne(this.props.id, this.handleStatusChange, this.state.status); } componentWillUnmount(){ unsubsrcibeFromStatusOne(this.props.id, this.handleStatusChange, this.state.status) } handleStatusChange(status){ this.setState({ isOnline: status.isOnline }); } render(){ const isOnline = this.state.isOnline; if (isOnline === null){ return infoMap.loadInfo; } return isOnline? infoMap.onInfo : infoMap.offInfo; }}

import EffectHookStatusOne from "./EffectHookStatusOne";import EffectHookStatusTwo from "./EffectHookStatusTwo";import EffectHookExampleOne from "./EffectHookExampleOne";import EffectHookExampleTwo from "./EffectHookExampleTwo";export default function EffectHookExample(){ return ( <div> <p>Effect Hook的綜合範例</p> <hr/> <EffectHookExampleOne/> <hr/> <p>等價實作計數器</p> <EffectHookExampleTwo/> <hr/> <p>需要清除的effect</p> <EffectHookStatusOne id={1}/> <hr/> <p>需要清除的effect 的等價實作</p> <EffectHookStatusTwo id={2}/> </div> );}