Question

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

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

App.js where stack navigation is defined

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

CalendarYearView.js where navigating to

我尝试过的事情：

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

Answer 1

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

使用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);

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

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

因此，如果可能的话，请减少您的视图并以更多的样式获得结果。

使用无状态（纯）组件。您的页面中有几个导入的组件，例如MonthCalendar，CalendarAppHeader，YearButton等。如果这些组件不需要状态，则可以将它们与props一起使用。

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

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

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

1 个答案: