BlocSelector

state的某一项数据改变时(BlocSelector)

BlocSelector는 Flutter에서 Bloc 또는 Cubit 패턴을 사용할 때, 특정 상태 변화에만 반응하여 UI를 업데이트하는 위젯입니다. BlocBuilder와 비슷하지만, BlocSelector는 전체 상태가 아닌 상태의 특정 부분에만 관심을 가집니다. 이를 통해 불필요한 UI 재구성을 최소화하여 성능을 향상시킬 수 있습니다.

사용 방법

BlocSelector는 Bloc 또는 Cubit의 상태 중 특정 부분에 대한 변화를 감지하고, 해당 부분이 변경될 때만 UI를 다시 빌드합니다.

BlocSelector<BlocType, BlocState, SelectedState>(
  selector: (state) => state.selectedPart,
  builder: (context, selectedState) {
    return Text('Selected state: $selectedState');
  },
)

• BlocType: 관찰하고자 하는 Bloc 또는 Cubit의 타입입니다.
• BlocState: 해당 Bloc 또는 Cubit의 전체 상태의 타입입니다.
• SelectedState: 관심 있는 상태의 부분을 나타내는 타입입니다.(state的某一项变量数据类型)
• selector: 전체 상태(BlocState)에서 관심 있는 부분(SelectedState)을 선택하는 함수입니다.(state的某一项变量)
• builder: 선택된 상태(SelectedState)에 대한 UI를 구성하는 함수입니다.

특징

• 성능 최적화: 전체 상태가 아닌, 관심 있는 상태의 일부분만을 감시함으로써 불필요한 위젯 빌드를 줄일 수 있습니다.
• 좁은 관심 영역: 상태의 특정 부분에만 집중함으로써 관련 없는 상태 변화에는 반응하지 않습니다.

예시

BlocSelector<CounterBloc, CounterState, int>(
  selector: (state) => state.count,
  builder: (context, count) {
    return Text('Count value is $count');
  },
)

이 예시에서 BlocSelector는 CounterState의 count 필드에만 관심을 가지고, 이 값이 변경될 때만 Text 위젯을 재구성합니다.

주의 사항

• selector 함수는 상태의 일부를 효율적으로 선택해야 하며, 복잡한 계산을 포함하지 않는 것이 좋습니다.

BlocSelector는 Bloc 또는 Cubit의 상태 관리에서 UI 성능을 최적화하는 데 유용한 도구입니다. 필요한 상태 부분에만 반응하여 더 효율적이고 효과적인 UI 업데이트를 할 수 있게 해줍니다.