导航到具有许多视图的组件时，屏幕会冻结

Question

我正在使用DashboardComponent导航（使用react-navigation）到CalendarYearView组件（在react-native中）。按下按钮时屏幕冻结约5秒钟。

CalendarYearView组件具有许多子视图（显示日历）。如果我在CalendarYearView导航中删除渲染功能的内容，则会立即发生。

video of screen freeze when navigation

video when render function is empty

App.js where stack navigation is defined

Dashboard.js where screen freezes

this.props.navigation.navigate({ routeName: CalendarYearView.SCREEN_KEY });

CalendarYearView.js where navigating to

我尝试过的：

1. 导航时创建延迟。
2. 在异步等待函数中导航。
3. 删除渲染功能中的所有视图。 （高速）
4. 使用InteractionManager runAfterInteractions（在这种情况下，屏幕不会冻结，但导航会在很长一段时间后发生）
5. 下一帧（同样的事情）

Answer 1

基本问题在CalendarYearView.js中。该页面中有许多内容可以改进：

1. 使用像map这样的迭代时，请避免使用箭头函数。因为箭头函数是匿名的，所以它们在每次迭代时反复创建。如果将箭头函数定义为命名函数，则只会创建一次，这确实会影响性能：

monthNum => {
    return (<MonthCalendar
            events={{"2018-11-09": [{ dotColor: 'green'},{dotColor: 'blue'}],"2018-03-11": {}}}month={monthNum}
            year={this.state.year}
            key={monthNum}/>);
    }

您应该将以下箭头函数定义为组件中的命名函数：

renderMonthCalendar(monthNum) {
    return (<MonthCalendar
            events={{"2018-11-09": [{ dotColor: 'green'},{dotColor: 'blue'}],"2018-03-11": {}}}month={monthNum}
            year={this.state.year}
            key={monthNum}/>);
    }
}

称之为：

monthNumbers.map(this.renderMonthCalendar);

这也将为您注入参数。您可以对页面中的其他箭头功能执行此操作。

2. 如果可能，请避免使用额外的组件，视图等。如果您记录并检查调试器的性能选项卡，您将看到页面中的额外组件如何影响性能。如果将鼠标悬停在项目上，则会显示每个组件导致的延迟：

因此，如果可能的话，减少您的视图并通过更多样式实现结果。

3. 使用无状态（纯）组件。你的页面中有几个导入的组件，如MonthCalendar，CalendarAppHeader，YearButton等。如果这些组件不需要状态，你可以只使用它们。

const YearButton = (props) => {
    return(
    );
}

您甚至可以将CalendarAppView转换为无状态组件。我在页面中只看到一个setState。你可以通过道具来控制它。