本文最后更新于：13 天前

React制作音乐播放器日记总结-3

声明：文章仅为本人总结的经验，不代表这就是正确标准答案

控制是否执行替换动画

在 CSS Transition Group 标签中写 key 标签来切换，因为是通过 key 做相同判断标记

<TransitionGroup
  className="h30 por"
  childFactory={(child) => React.cloneElement(child, { classNames: 'info' })}
>
  <CSSTransition
    key={this.props.currentListId}
    timeout={1200}
    appear={true}
  >
    <div className="top_info">
      {/* code */}
    </div>
  </CSSTransition>
</TransitionGroup>

nth-child 选择器

使用这个选择器的时候会先找到该元素的父元素，然后在往下一级找相同层级的元素，所以做斑马纹组件的时候可以直接把这种选择器写在组件上

.black_list_item {
  background-color: #00000088;

  &:nth-child(even).use_zebra {
    background-color: #ffffff10;
  }
}

redux devTools 在特定情况下使得浏览器爆内存的情况

本篇主要是讲这个问题，还挺神奇的，一打开控制台的 redux 开发工具浏览器就爆内存，后面也是碰巧解决了问题，所以想在这里记录一下

问题场景

触发的机制是当歌曲播放的时候详细播放列表被打开后，再查看 redux 开发工具时就会出现浏览器内存高占用的情况

此时 redux 开发工具也直接崩溃，换了 chrome 浏览器也是一样

控制台有一句提示：Application state or actions payloads are too large making Redux DevTools serialization slow and consuming a lot of memory. See link to article on how to configure it.

跟着链接找到了这里：https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Troubleshooting.md#excessive-use-of-memory-and-cpu

这里是原文：

That is happening due to serialization of some huge objects included in the state or action. The solution is to sanitize them.

You can do that by including/omitting data containing specific values, having specific types... In the example below we're omitting parts of action and state objects with the key data

There's a more advanced example on how to implement that for ui-router.

The extension is in different process and cannot access the store object directly, unlike vanilla redux-devtools which doesn't have this issue. In case sanitizing doesn't fit your use case, you might consider including it directly as a react component, so there will be no need to serialize the data, but it would add some complexity.

这里提供的方法是让开发工具省略指定变化内容的抓取，照着整个文档写了一份可行的处理，代码如下

import { combineReducer, applyMiddleware, createStore } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'

const combineReducer = combineReducers({
// 你的 reducer
});

const middleware = [reduxThunk];

// 处理 action ， 与下面 state 处理同理
const actionSanitizer = (action: any) => {
  let newAction = { ...action };
  switch (action.type) {
    case CHANGEDETAILSONGLIST:
      newAction.data = 'LONG_DATA';
      break;

    default:
      break;
  }
  return newAction;
};

const composeEnhancers = composeWithDevTools({
  actionSanitizer,
  // 处理 state 此处在每次变化中都把开发工具捕获的 SongList 所有内容给替换成字符串，不影响使用
  stateSanitizer: (state) => {
    let newState: any = {
      ...state,
    };
    newState.SongList = 'Song_list_brief';
    return newState;
  }
});

const enhancers = composeEnhancers(applyMiddleware(...middleware));

export default createStore(combineReducer, enhancers)

但是这种方法治标不治本，后续我还是要看 SongList 的状态，我只好回头检查我里面的哪一项数据特别大，

查了一天后就查到了，在 SongList 列表状态中有一项内容层次特别深，而且都是我没见过的数据

于是就去查是哪里修改了这里的数据

vscode 搜索了一下，只有这一个地方引用了 props 传进来的值，使用的值也是通过 map 遍历返回了一份新的值，但是在新值里面修改后却影响到了原通过 props 传入的全局值，因此怀疑解构赋值并不是深拷贝所有内容，所以把原来解构赋值的方法换成了 JSON.parse(JSON.stringify()) 这种拷贝方法

let propData = JSON.parse(JSON.stringify(this.props.currentDetailList));
propData = propData.map((val: any) => {
  val.key = val.id;
  val.ar = val.ar.map((val: any) => `${val.name ? val.name : ''} `);
  val.operation = (
    <Fragment>
      <TransparentButton>
        <PlayCircleOutlined onClick={() => this.props.changeSong(val.id)} />
      </TransparentButton>
      <TransparentButton>
        <DownloadOutlined
          onClick={() => debounce(DownloadAudio, 2000)(val)}
        />
      </TransparentButton>
    </Fragment>
  );
  return val;
});