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> );}