React - useEffect、useRef、Fragment

一、useEffect

1、基本介绍

useEffect 用于在函数式组件中执行副作用操作，用于替代类组件中的生命周期钩子

jsx 复制代码

useEffect(() => {
    // 副作用操作
    return () => {
        // 清理函数（可选）
    };
}, [依赖项数组]);

副作用操作：发送请求数据获取、启动定时器、手动更改真实 DOM 等
清理函数：返回的函数会在组件卸载或下次执行前调用
依赖项数组：指定依赖项数组后，只有依赖项数组中的值发生变化时，才会执行副作用操作
1. 不传依赖项：每次渲染后执行
2. 空依赖项数组：首次渲染后执行一次
3. 传依赖项：首次渲染后 + 依赖项变化时执行

可以把 useEffect 看做这三个函数的组合：componentDidMount、componentDidUpdate、componentWillUnmount

2、基本使用

类式组件

jsx 复制代码

import { Component } from "react";
import ReactDOM from "react-dom";

export default class App extends Component {
    state = { count: 0 };

    unmount = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById("root"));
    };

    componentDidMount() {
        this.timer = setInterval(() => {
            this.setState((state) => ({ count: state.count + 1 }));
        }, 1000);
    }

    componentWillUnmount() {
        clearInterval(this.timer);
    }

    render() {
        return (
            <div>
                <h2>当前求和为：{this.state.count}</h2>
                <button onClick={this.unmount}>卸载组件</button>
            </div>
        );
    }
}

函数式组件

jsx 复制代码

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";

export default function Demo() {
    const [count, setCount] = useState(0);

    function unmount() {
        ReactDOM.unmountComponentAtNode(document.getElementById("root"));
    }

    useEffect(() => {
        const timer = setInterval(() => {
            setCount((count) => count + 1);
        }, 1000);
        return () => {
            clearInterval(timer);
        };
    }, []);

    return (
        <div>
            <h2>当前求和为：{count}</h2>
            <button onClick={unmount}>卸载组件</button>
        </div>
    );
}

二、useRef

1、基本介绍

useRef 可以在函数组件中存储 / 查找组件内的标签或任意其它数据，用于保存标签对象，功能与 React.createRef() 一样

js 复制代码

const refContainer = useRef()

2、基本使用

类式组件

jsx 复制代码

import { Component, createRef } from "react";

export default class App extends Component {
    myRef = createRef();

    show = () => {
        alert(this.myRef.current.value);
    };

    render() {
        return (
            <div>
                <input type="text" ref={this.myRef} />
                <button onClick={this.show}>点我提示数据</button>
            </div>
        );
    }
}

函数式组件

jsx 复制代码

import { useRef } from "react";

export default function Demo() {
    const myRef = useRef();

    const show = () => {
        alert(myRef.current.value);
    };

    return (
        <div>
            <input type="text" ref={myRef} />
            <button onClick={show}>点我提示数据</button>
        </div>
    );
}

三、Fragment

1、基本介绍

在 React 中，组件只能返回一个根元素，如果需要返回多个并列的元素，传统做法是用一个 <div> 包裹它们
Fragment 是一个让开发者能够在不添加额外 DOM 节点的情况下，将一组子元素组合起来的组件

2、基本使用

完整写法，需要引入 Fragment 组件

jsx 复制代码

import { Component, Fragment } from "react";

export default class Demo extends Component {
    render() {
        return (
            <Fragment>
                <input type="text" />
                <input type="text" />
            </Fragment>
        );
    }
}

简写，不需要引入 Fragment 组件

jsx 复制代码

import { Component } from "react";

export default class Demo extends Component {
    render() {
        return (
            <>
                <input type="text" />
                <input type="text" />
            </>
        );
    }
}

3、带 key 的 Fragment

当在循环中渲染列表时，如果需要为 Fragment 添加 key 属性，必须使用完整语法

jsx 复制代码

import { useState, Fragment } from "react";

export default function App() {
    const [items] = useState([
        { id: 1, term: "React", description: "A JavaScript library for building user interfaces." },
        { id: 2, term: "React Native", description: "A framework for building native mobile apps using React." },
    ]);

    return (
        <dl>
            {items.map((item) => (
                <Fragment key={item.id}>
                    <dt>{item.term}</dt>
                    <dd>{item.description}</dd>
                </Fragment>
            ))}
        </dl>
    );
}