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>
           <h1>Effect Hook的综合示例</h1>
           <hr/>
           <EffectHookExampleOne/>
           <hr/>
           <h1>等价实现计数器</h1>
           <EffectHookExampleTwo/>
           <hr/>
           <h1>需要清除的effect</h1>
           <EffectHookStatusOne id={1}/>
           <hr/>
           
           <h1>需要清除的effect 的等价实现</h1>
           <EffectHookStatusTwo id={2}/>
        </div>
    );
}