ionic-team / ionic-team/ionic-framework
bug: react IonTabs lifecycle
- 主要语言
- TypeScript
- 星标
- 52.7k
- 派生
- 13.3k
- 平均合并
- 1 天 15 小时
- 30 天内合并 PR
- 51
描述
### Prerequisites
- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.
### Ionic Framework Version
v8.x
### Current Behavior
1. **Ionic lifecycle methods do not fire on IonTabs pages**
When using `IonTabs`, lifecycle hooks such as `useIonViewDidEnter`, `useIonViewDidLeave`, etc., do not work on tab root pages.
The same issue occurs on nested tab pages.
https://github.com/user-attachments/assets/4f52f9fe-1019-4414-8d14-c58e9626321c
2. **Wrapping tab pages in `IonPage` makes lifecycle methods work, but breaks navigation**
If each tab page is wrapped in an `IonPage` component, lifecycle methods begin to work, but page transitions and navigation behavior become broken or inconsistent.
https://github.com/user-attachments/assets/73d8f5a3-41a7-456d-99dc-9bb5fc250b83
3. **Pages rerender multiple times when using `useEffect`**
If a simple `useEffect` is added to any tab page, the page rerenders many times.
Moreover, with every tab enter/exit, the number of rerenders increases, which suggests a mounting/unmounting loop or repeated component remounts.
### Expected Behavior
- Ionic lifecycle hooks (`useIonViewDidEnter`, `useIonViewDidLeave`, etc.) should:
- Fire correctly on tab root pages.
- Fire correctly on nested pages inside tabs.
- Wrapping tab pages in `IonPage` should not break navigation or cause incorrect rendering.
- Pages should rerender only when expected, not multiple times or with increasing frequency on each visit.
### Steps to Reproduce
1. Create a new Ionic React project with `IonTabs`.
2. Add pages inside the tab routes.
3. Inside each page, add lifecycle hooks such as:
```ts
useIonViewDidEnter(() => console.log("enter"));
useIonViewDidLeave(() => console.log("leave"));
4. Observe that lifecycle events do not fire.
5. Wrap pages in IonPage and observe:
- Lifecycle events start firing.
- Navigation/transitions break or behave incorrectly.
6. Add a simple useEffect:
```ts
useEffect(() => {
console.log("render");
});
7. Navigate between tabs and observe:
- Pages rerender excessively.
- Number of rerenders increases with each navigation event.
### Code Reproduction URL
https://stackblitz.com/edit/lxuxesz1-zspm2tce?file=src%2Fmain.tsx
### Ionic Info
Ionic:
Ionic CLI : 5.4.16
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v20.19.1
npm : 10.8.2
OS : Linux 5.0
### Additional Information
_No response_
贡献指南
评估
这个 Issue 还没有评估数据。