Flutter Hooks使用构建期间调用的useEffect - setState()或markNeedsBuild()获取数据 - 腾讯云开发者社区

Flutter Hooks 是 Flutter 框架中引入的一种新特性，它允许开发者在函数组件中使用状态和生命周期特性，而不需要转换为 StatefulWidget。useEffect 是 Flutter Hooks 中的一个核心 API，类似于 React 中的 useEffect，它允许你在组件渲染之后执行一些代码，比如数据获取、订阅等。

基础概念

useEffect: 用于处理副作用操作，比如数据获取、订阅或手动更改 DOM 等。
setState(): 用于通知 Flutter 框架，组件的状态已经改变，需要重新调用 build 方法来更新 UI。
markNeedsBuild(): 用于标记组件需要重建，Flutter 框架会在下一个事件循环中调用 build 方法。

类型

useEffect 接受两个参数：一个执行副作用的函数和一个依赖数组。当依赖数组中的值发生变化时，副作用函数会被执行。

应用场景

数据获取: 在组件挂载后获取数据，并更新状态。
订阅: 订阅某个事件或数据流，并在组件卸载时取消订阅。
手动更改 UI: 在某些情况下，可能需要手动触发 UI 的更新。

示例代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('useEffect Example')),
        body: DataFetchingWidget(),
      ),
    );
  }
}

class DataFetchingWidget extends StatefulWidget {
  @override
  _DataFetchingWidgetState createState() => _DataFetchingWidgetState();
}

class _DataFetchingWidgetState extends State<DataFetchingWidget> {
  String _data = 'Loading...';

  @override
  void initState() {
    super.initState();
    // 初始化时获取数据
    fetchData();
  }

  void fetchData() async {
    // 模拟网络请求
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      _data = 'Data Fetched!';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(child: Text(_data));
  }
}

遇到的问题及解决方法

问题：为什么在 `useEffect` 中调用 `setState()` 或 `markNeedsBuild()` 会导致无限循环？

原因：当 useEffect 的依赖数组中包含了状态变量，并且在 useEffect 中调用 setState() 或 markNeedsBuild() 时，会触发组件的重新渲染，从而导致 useEffect 再次执行，形成无限循环。

解决方法：

确保 useEffect 的依赖数组中不包含会导致 setState() 或 markNeeds规范Build() 调用的状态变量。
如果需要在 useEffect 中调用 setState() 或 markNeedsBuild()，可以考虑使用 useRef 来存储需要更新的状态，而不是直接使用状态变量。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('useEffect Example')),
        body: DataFetchingWidget(),
      ),
    );
  }
}

class DataFetchingWidget extends StatefulWidget {
  @override
  _DataFetchingWidgetState createState() => _DataFetchingWidgetState();
}

class _DataFetchingWidgetState extends State<DataFetchingWidget> {
  String _data = 'Loading...';
  final _dataRef = GlobalKey();

  @override
  void initState() {
    super.initState();
    // 初始化时获取数据
    fetchData();
  }

  void fetchData() async {
    // 模拟网络请求
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      _dataRef.currentState?.setState(() {
        _data = 'Data Fetched!';
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(_data),
      key: _dataRef,
    );
  }
}