react-document-title

最新推荐文章于 2024-08-24 08:04:09 发布

郭从墨

最新推荐文章于 2024-08-24 08:04:09 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_21901233/article/details/86593281

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

前几天在代码中看到react-document-title这个插件，一查才明白原来它可以实现在单页应用中根据不同路由来改变文档的title，正好有时间就看一下其内部实现的原理是怎么样的

该组件内部主要使用的是一个高阶组件，通过修改document.title来实现文档的title改变的功能，这个高阶组件就是react-side-effect。该组件主要接受两个参数：reducePropsToState, handleStateChangeOnClient。每当组件渲染或者props改变的时候，会触发reducePropsToState这个函数，该函数会把计算后的新的state传递给handleStateChangeOnClient这个函数来处理。

在该组件里面关键的函数如下：

function emitChange() {
      state = reducePropsToState(mountedInstances.map(function (instance) {
        return instance.props;
      }));

      if (SideEffect.canUseDOM) {
        handleStateChangeOnClient(state);
      } else if (mapStateOnServer) {
        state = mapStateOnServer(state);
      }
    }

每当组件的props发生改变或者更新的时候都会触发该函数。reducePropsToState会接收当前所有的挂载组件的props，handleStateChangeOnClient函数会接收新的state来做相应的变更。所以该组件内部会维护一个挂载组件实例的数组，每当挂载的时候将其push进数组，当卸载的时候再将其弹出。

同时该组件中还使用到了exenv这个模块，用来判断当前是否可以处理dom