hooks

admin管理员组

文章数量:1130349

hooks

文章目录

• • • • 1. hook
      • • 1.1 属性 行为 组合成了状态，除了状态还有作用
        • 1.2 keys
      • 2. useMemoized
      • 3. useCallback
      • 4. useRef
      • 5. useEffect
      • 6.1 其他钩子
      • 6.2 useXXXX 自定义钩子
      • 7. riverpod
      • 8. 常用Provider
      • 9. 局部刷新
      • 10. Consumer使用 ，局部刷新
      • 11. HookBuilder使用 ，局部刷新
      • 12. studyflutter代码

1. hook

需要继承HookWidget
useMemoized
useRef useCallback 通过内部使用useMemoized 只调用一次
useEffect

1.1 属性 行为 组合成了状态，除了状态还有作用

1.2 keys

指定是否应重用 [HookState] 或应创建新的对象列表。创建新的 [Hook] 时，框架会使用 [Hook.shouldPreserveState] 检查键是否匹配。如果没有，之前创建的 [HookState] 将被释放，并使用 [Hook.createState] 创建一个新的，然后是 [HookState.initHook]

2. useMemoized

缓存复杂对象的实例。
useMemoized->_MemoizedHook->_MemoizedHookState-> late final T value = hook.valueBuilder()
build 返回的一直都是value, 需要手动调用
一般useFuture useMemoized 配合使用

3. useCallback

缓存函数对象的实例

4. useRef

创建一个包含单个可变属性的对象。改变对象的属性是无效的。这对于在“构建”调用之间共享状态非常有用，而不会导致不必要的重构。

5. useEffect

对于需要取消的
useEffect->_EffectHook->_EffectHookState->initHook()->disposer = hook.effect()->dispose() => disposer?.call()
会在第一次build的时候主动调用，无需手动调用
dispose

6.1 其他钩子

useValueNotifier
useListenable->_ListenableHook->_ListenableStateHook->_listener->setState
useValueListenable->_UseValueListenableHook->_ListenableHook->
useValueListenable比useListenable多加了一个方法，有了返回值
useListenable相当于ValueListenableBuilder->_valueChanged->setState
useListenableSelector 多了一个条件，如果两个值不一样的时候才build

---

useAnimationController
useAnimation 相当于AnimatedBuilder->_handleChange->setState

---

useStreamController
useStream 相当于StreamBuilder

---

useFuture 相当于FutureBuilder

---

useReducer state一个是对象， action一个是参数
通过dispatch发送参数来返回新的state

6.2 useXXXX 自定义钩子

7. riverpod

runApp(const ProviderScope(child: App()));
需要继承ConsumerWidget 使用WidgetRef ref
继承 StateNotifier ChangeNotifier
ChangeNotifierProvider StateNotifierProvider
ref.watch 观察刷新
ref.read 修改
ref.listen 监听

8. 常用Provider

FutureProvider
StreamProvider.family可以传入参数
FutureProvider.autoDispose
StateNotifierProvider
StateController
Provider

9. 局部刷新

ValueListenableBuilder
ValueNotifier
Listenable

10. Consumer使用 ，局部刷新

提供程序更新时重建尽可能少的小部件

class Example extends StatefulWidget {@override_ExampleState createState() => _ExampleState();
}
class _ExampleState extends State<Example> {@overrideWidget build(BuildContext context) {return Consumer(builder: (context, ref, child) {final value = ref.watch(helloWorldProvider);return Text(value); // Hello world},);}
}

11. HookBuilder使用 ，局部刷新

 			HookBuilder(builder: (BuildContext context){final num = useState(8);print("HookBuilder-build");return TextButton(onPressed: () {num.value++;},child: Text("num=${num.value}"));})

12. studyflutter代码

代码

hooks

文章目录

• • • • 1. hook
      • • 1.1 属性 行为 组合成了状态，除了状态还有作用
        • 1.2 keys
      • 2. useMemoized
      • 3. useCallback
      • 4. useRef
      • 5. useEffect
      • 6.1 其他钩子
      • 6.2 useXXXX 自定义钩子
      • 7. riverpod
      • 8. 常用Provider
      • 9. 局部刷新
      • 10. Consumer使用 ，局部刷新
      • 11. HookBuilder使用 ，局部刷新
      • 12. studyflutter代码

1. hook

需要继承HookWidget
useMemoized
useRef useCallback 通过内部使用useMemoized 只调用一次
useEffect

1.1 属性 行为 组合成了状态，除了状态还有作用

1.2 keys

指定是否应重用 [HookState] 或应创建新的对象列表。创建新的 [Hook] 时，框架会使用 [Hook.shouldPreserveState] 检查键是否匹配。如果没有，之前创建的 [HookState] 将被释放，并使用 [Hook.createState] 创建一个新的，然后是 [HookState.initHook]

2. useMemoized

缓存复杂对象的实例。
useMemoized->_MemoizedHook->_MemoizedHookState-> late final T value = hook.valueBuilder()
build 返回的一直都是value, 需要手动调用
一般useFuture useMemoized 配合使用

3. useCallback

缓存函数对象的实例

4. useRef

创建一个包含单个可变属性的对象。改变对象的属性是无效的。这对于在“构建”调用之间共享状态非常有用，而不会导致不必要的重构。

5. useEffect

对于需要取消的
useEffect->_EffectHook->_EffectHookState->initHook()->disposer = hook.effect()->dispose() => disposer?.call()
会在第一次build的时候主动调用，无需手动调用
dispose

6.1 其他钩子

useValueNotifier
useListenable->_ListenableHook->_ListenableStateHook->_listener->setState
useValueListenable->_UseValueListenableHook->_ListenableHook->
useValueListenable比useListenable多加了一个方法，有了返回值
useListenable相当于ValueListenableBuilder->_valueChanged->setState
useListenableSelector 多了一个条件，如果两个值不一样的时候才build

---

useAnimationController
useAnimation 相当于AnimatedBuilder->_handleChange->setState

---

useStreamController
useStream 相当于StreamBuilder

---

useFuture 相当于FutureBuilder

---

useReducer state一个是对象， action一个是参数
通过dispatch发送参数来返回新的state

6.2 useXXXX 自定义钩子

7. riverpod

runApp(const ProviderScope(child: App()));
需要继承ConsumerWidget 使用WidgetRef ref
继承 StateNotifier ChangeNotifier
ChangeNotifierProvider StateNotifierProvider
ref.watch 观察刷新
ref.read 修改
ref.listen 监听

8. 常用Provider

FutureProvider
StreamProvider.family可以传入参数
FutureProvider.autoDispose
StateNotifierProvider
StateController
Provider

9. 局部刷新

ValueListenableBuilder
ValueNotifier
Listenable

10. Consumer使用 ，局部刷新

提供程序更新时重建尽可能少的小部件

class Example extends StatefulWidget {@override_ExampleState createState() => _ExampleState();
}
class _ExampleState extends State<Example> {@overrideWidget build(BuildContext context) {return Consumer(builder: (context, ref, child) {final value = ref.watch(helloWorldProvider);return Text(value); // Hello world},);}
}

11. HookBuilder使用 ，局部刷新

 			HookBuilder(builder: (BuildContext context){final num = useState(8);print("HookBuilder-build");return TextButton(onPressed: () {num.value++;},child: Text("num=${num.value}"));})

12. studyflutter代码

代码

本文标签： hooks