一、useEffect1、基本介绍useEffect 用于在函数式组件中执行副作用操作用于替代类组件中的生命周期钩子useEffect(() { // 副作用操作 return () { // 清理函数可选 }; }, [依赖项数组]);副作用操作发送请求数据获取、启动定时器、手动更改真实 DOM 等清理函数返回的函数会在组件卸载或下次执行前调用依赖项数组指定依赖项数组后只有依赖项数组中的值发生变化时才会执行副作用操作1. 不传依赖项每次渲染后执行 2. 空依赖项数组首次渲染后执行一次 3. 传依赖项首次渲染后 依赖项变化时执行可以把 useEffect 看做这三个函数的组合componentDidMount、componentDidUpdate、componentWillUnmount2、基本使用类式组件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 ); } }函数式组件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 ); }二、useRef1、基本介绍useRef 可以在函数组件中存储 / 查找组件内的标签或任意其它数据用于保存标签对象功能与React.createRef()一样constrefContaineruseRef()2、基本使用类式组件import { Component, createRef } from react; export default class App extends Component { myRef createRef(); show () { alert(this.myRef.current.value); }; render() { return ( div input typetext ref{this.myRef} / button onClick{this.show}点我提示数据/button /div ); } }函数式组件import { useRef } from react; export default function Demo() { const myRef useRef(); const show () { alert(myRef.current.value); }; return ( div input typetext ref{myRef} / button onClick{show}点我提示数据/button /div ); }三、Fragment1、基本介绍在 React 中组件只能返回一个根元素如果需要返回多个并列的元素传统做法是用一个div包裹它们Fragment 是一个让开发者能够在不添加额外 DOM 节点的情况下将一组子元素组合起来的组件2、基本使用完整写法需要引入 Fragment 组件import { Component, Fragment } from react; export default class Demo extends Component { render() { return ( Fragment input typetext / input typetext / /Fragment ); } }简写不需要引入 Fragment 组件import { Component } from react; export default class Demo extends Component { render() { return ( input typetext / input typetext / / ); } }3、带 key 的 Fragment当在循环中渲染列表时如果需要为 Fragment 添加 key 属性必须使用完整语法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 ); }