React Native之DeviceEventEmitter发送和接收消息完成事件处理

今天在Demo这样一个项目的时候，首先遇到的第一个问题就是，每次通过dialog选择【本周、本月、本天】时，伴随着内容重新渲染的时候，tab navigator每次都重新创建和渲染，造成性能浪费和用户体验差的问题

问题分析：

由于tab navigator是在render()函数中动态创建的，因此每次随着状态的改变，render都会重新渲染，从而导致的问题是，每次都要重新动态创建tab navigator。

解决方案

将创建好的tabNav给绑定到当前this上，如果当前tabNav已经存在，则直接返回。

伪代码

export default class TrendingPage extends Component<Props> {

    constructor(props) {

	super(props);

        this.tabNames = ['All', 'C', 'C#', 'PHP', 'JavaScript'];

    }

 /**

     * 优化tabNav 避免每次render的时候都要重新动态的创建nav

     *

     *  优化效率：根据需要选择是否重新创建TabNavigator，通常tab改变后才重新创建

     * @returns

     * @memberof TrendingPage

     */

    _tabNav() {

        if (!this.tabNav) {

            this.tabNav = createMaterialTopTabNavigator(

                this._genTabs(), {

                    tabBarOptions: {

                        tabStyle: styles.tabStyle,

                        upperCaseLabel: false, //是否标签大写，默认为true

                        scrollEnabled: true, // 选项卡排不下的时候，可以滚动，默认为false

                        style: {

                            backgroundColor: '#678',

                            height: 30,

                        },

                        indicatorStyle: typeAlias.indicatorStyle, // 标签指示器的样式

                        labelStyle: styles.labelStyle

                    }

                }

            );

        }

        return this.tabNav;

    }

    _genTabs() {

	const tabs = {};

	this.tabNames.forEach((item, index) => {

		tabs[`tab${index}`] = {

			// screen: PopTab,

			screen: props => <TrendingTabPage {...props} timeSpan={this.state.timeSpan} tabLabel={item} />,

			navigationOptions: {

				title: item

			}

		}

	})

	return tabs;

    }

    /* 省略其他代码*/

}

但是随之出现了接下来的问题，就是当我们通过在dialog选择完【本周】后，导航栏不变的情况下不重新动态创建了，下面的数据也不刷新了，从而导致该功能失效。

问题分析

由于带有信息list的screen是绑定在创建tab navigator中，因此当tab navigator不重新创建时，screen内容将不会重新渲染，那么我们又要保持当tab不改变的时候不重新创建和渲染，又想要当前tab下的内容根据用户操作而改变。

解决方案

使用react-native官方的一个API-----DeviceEventEmitter

使用方法

componentDidMount() {

        this.loadData();

        this.timeSpanChangeListener = DeviceEventEmitter.addListener(EVENT_TYPE_TIME_SPAN_CHANGE, (timeSpan) => {  //将监听事件绑定到当前this上的目的是在组件卸载时能撤销事件

            this.timeSpan = timeSpan;

            this.loadData();

        })

	}

    componentWillUnmount() {

        if (this.timeSpanChangeListener) {

            this.timeSpanChangeListener.remove();

        }

    }

DeviceEventEmitter.addListener（）注册上事件，第一个参数是事件，第二个参数是事件触发时候的回调。注意在组件卸载时撤销事件的绑定，避免性能浪费。

    /**

     * 当从selection中选择一个触发的回调

     *

     * @param {*} tab

     * @memberof TrendingPage

     */

    onSelectTimeSpan(tab) {

        this.dialog.dismiss();

        this.setState({

            timeSpan: tab

        });

        DeviceEventEmitter.emit(EVENT_TYPE_TIME_SPAN_CHANGE, tab)

    }

    /**

     * 创建一个TrendingDialog

     *

     * @returns

     * @memberof TrendingPage

     */

    renderTrendingDialog() {

        return <TrendingDialog

            ref={dialog => this.dialog=dialog}

            onSelect={tab=>this.onSelectTimeSpan(tab)}

        />

    }

然后，我们给【本周、本天、本月】添加上回调onSelectTimeSpan，当用户操作的时候，触发回调，然后通过DeviceEventEmitter.emit()方法触发绑定的事件，执行回调，更新内容。

巴特西

React Native之DeviceEventEmitter发送和接收消息完成事件处理

问题分析：

解决方案

伪代码

问题分析

解决方案

使用方法

最新文章

热门文章