网易云开发又忘记第几天

总有那么一段旅途触碰到你内心最柔软的地方。

(1) table-layout属性

在做歌单列表的时候用到了table，遇到一个问题，给th设置了固定的宽度。但是最终宽度依然和内容有关。后来发现是table-layout属性的影响，默认为auto，改成table {table-layout: fixed;}就好了。

(2)background作为对象属性时

1	background: `transparent url(${require("../../assets/coverall.png")}) no-repeat 0 -986px`;

因为是本地路径，不能直接url("../../assets/coverall.png")

(3)解决Ubuntu16.04解压压缩zip文件中文乱码

zip压缩包发送到我Ubuntu系统下直接就乱码了。

//查看系统支持的字符集
$ cat /usr/share/i18n/SUPPORTED
//将上面的中文字符集全部添加进去 zh_CN.
$ sudo vim /var/lib/locales/supported.d/local
//更新
$ sudo locale-gen
//安装7-zip和convmv
$ sudo apt-get install convmv p7zip-full
//解压zip文件
$ LANG=C 7z x 你的zip文件名

(4)useEffect解决一个循环公告

代码比较简单，直接贴了

import React, { useState, useEffect, useRef } from 'react'
import './index.less'
export default function Safe () {
  const [annouces, setAnnouces] = useState([])
  let [left, setLeft] = useState(0)
  let [leftTimer, setTimer] = useState(0)
  const [padLeft, setPadLeft] = useState(0)
  const [width, setWidth] = useState(2050)
  const [i, setI] = useState(1)
  const [timers, setTimers] = useState([])
  const ref = useRef(null)
  
  const data =  
  useEffect(() => {
    console.log(timers)
    setAnnouces([
      '公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1',
      '公告2公告2公告2公告2公告2公告2',
      '公告3公告3公告3公告3公告3公告3',
      '公告4公告4公告4公告4公告4公告4',
      '公告5公告5公告5公告5公告5公告5'
    ])
    leftTimer = setTimer(setInterval(() => setLeft(left--), 20))
    setTimers([leftTimer])
  }, [])
  useEffect(() => {
    if (left < -322 * i) {
      setI(i + 1)
      annouces.push(annouces.shift())
      setWidth(width + 322)
      setPadLeft(322 * i)
      setAnnouces(annouces)
    }
  }, [left, i])

  const style = {
    width: `${width}px`,
    position: 'relative',
    overflow: 'hidden',
    left: `${left}px`,
    paddingLeft: `${padLeft}px`
  }

  return (
    <div className='safe'>
      <a>
        <strong>公告:</strong>
      </a>
      <div className='aqts'>
        <div className='temp-wrap'>
          <ul className='aqtslist' ref={ref} style={style}>
            {
              annouces.map((item, index) => {
                return (
                  <li key={index} onMouseEnter={() => { clearInterval(leftTimer) }} onMouseLeave={() => { setTimer(setInterval(() => setLeft(left--), 20)) }}>
                    <a title={item}>{item}</a>
                  </li>
                )
              })
            }
          </ul>
        </div>
      </div>
    </div>
  )
}

还有一些问题，未修复。

bug修复：定时器频繁点击的bug(定时器叠加bug，返回相同id的定时器)

1
2

(5)一不小心浏览器就死机了

1 2	//打开任务管理器 $ gnome-system-monitor

然后杀死浏览器进程

(6)强大的Hooks

项目遇到的路由问题，需要在组件更新后更新state里面的type(获取的路由参数)，但是我们都知道class是没有办法在componentWillUpdata或者componentDidUpdate里面使用this.seState()来更新组件状态的，否则将会造成死循环。
而hooks的useEffect()能完成class组件生命周期函数的功能，在组件更新后,利用函数组件useState()定义的方法就可以改变组件自己的状态了。