前端小知識10點

前言：
這裏記錄我在工做或學習中用到的小技巧

一、獲取指定日期的上一週或上上週（moment.js）
好比獲取2019-01-01的上一週的起始日期或者是上N周的起始日期

<script src="moment.js"></script>
<script>
let date='2019-01-01'
let when=-1 //-1表示上一週，-2表示上上週，0 表示本週。
//獲取 date 所在的第幾周
const weeknumber=moment(date).isoWeek() //1
const startDate=moment(date)
                  .week(+weeknumber+when) //.week(0)
                  .isoWeekday(1) //獲取所在周的週一
                  .format('YYYY-MM-DD');  // 2018-12-24

const endDate=moment(date)
                  .week(+weeknumber+when)
                  .isoWeekday(7) //獲取所在周的週日
                  .format('YYYY-MM-DD'); // 2018-12-30
</script>
複製代碼

注意！若是你截取了 year 來獲取某週日期的話，會出錯!
獲取2018-12-31所在周的起始日期

錯誤示範：

let date='2018-12-31'
let when=0 //本週
const weeknumber=moment(date).isoWeek()
const dateArr=date.split('-')

const startDate=moment()
                  .year(+dateArr[0]) 
                  .week(+weeknumber+when)
                  .isoWeekday(1)
                  .format('YYYY-MM-DD');  // 2018-01-01 

const endDate=moment()
                  .year(+dateArr[0])
                  .week(+weeknumber+when)
                  .isoWeekday(7)
                  .format('YYYY-MM-DD'); // 2018-01-07
複製代碼

能夠看到：2018-12-31所在周是第一週，但你想固然覺得所在年是2018年，致使獲取的是2018年的第一週的起始日期2018-01-01~2018-01-07！

正確示範：

  let date='2018-12-31'
  let when=0
  const weeknumber=moment(date).isoWeek()
  const startDate=moment(date)
    .week(+weeknumber+when)
    .isoWeekday(1)
    .format('YYYY-MM-DD'); //2018-12-31

  const endDate=moment(date)
    .week(+weeknumber+when)
    .isoWeekday(7)
    .format('YYYY-MM-DD'); //2019-01-06
複製代碼

2018-12-31所在周的起始日期爲2018-12-31~2019-01-06

二、antd的<Tooltip>組件的title內容換行顯示
正確示範：

<Tooltip 
  title={"aaa\r\nbbb\r\nccc"}
  overlayStyle={{whiteSpace:'pre-wrap'}}
  >
    <span>Tooltip will show on mouse enter.</span>
  </Tooltip>
複製代碼

錯誤示範：

<Tooltip 
  //或者是 title={"aaa\r\nbbb\r\nccc"}
  title={"aaa\nbbb\nccc"}
  >
    <span>Tooltip will show on mouse enter.</span>
  </Tooltip>
複製代碼

注意：
（1）只寫\n無效，必須寫\r\n
（2）overlayStyle中的屬性必須有whiteSpace:'pre-wrap'

三、React更新的方式有三種：
（1）ReactDOM.render() || hydrate（ReactDOMServer渲染）
（2）setState
（3）forceUpdate

詳情請參考：
React源碼解析之ReactDOM.render()
React源碼解析之setState和forceUpdate

四、func.bind()
func.bind(xx)的意思是func裏的this綁定的是xx，
也就是說是xx調用func方法：

 function func(){
    console.log(this.name)
  }

  const xx={name:"chen"}
  func.bind(xx)(); //chen
複製代碼

注意：
func.bind(xx)這僅僅是綁定，它會返回一個新函數，而不是調用：

 function func(){
    console.log(this.name)
  }

  const xx={name:"chen"}
  const newFunc=func.bind(xx)
  newFunc(); //chen

  //newFunc();
  func() //這時是 windows 在調用，由於 沒有使用.bind()後綁定返回的新函數
複製代碼

五、超過的字顯示成三點，但鼠標懸浮會顯示隱藏內容

<span
    title="鼠標懸浮，顯示隱藏內容"
    style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 128px;display: inline-block;">
      鼠標懸浮，顯示隱藏內容
  </span>
複製代碼

六、setState形成死循環的常見兩種狀況：
（1） 在 render() 中無條件調用 setState()
注意：
有條件調用 setState() 的話，是能夠放在 render() 中的

render(){  
  if(xxx){  
    this.setState({ yyy })
  }
}
複製代碼

（2） 以下圖，在 shouldComponentUpdate() 和 componentWillUpdate() 中調用 setState()

image.png

七、爲何不直接從 JSX 直接渲染構造 DOM 結構，而是要通過中間一層？（具體看下圖）

① 當拿到一個 JSX 的 React 對象時，不必定會將其渲染到 瀏覽器頁面 上，多是 canvas 或 react-native 上，而後再由 canvans 渲染到頁面上

② 當數據變化，須要更新組件時，用 diff 算法去操做 JSX 對象，而不是直接操做，這樣儘可能減小瀏覽器重排，極大優化性能

八、爲何React 的 props 不可修改？
由於 React 但願組件在輸入「肯定的 props」後，可以輸出 「肯定的 UI」 ，
若是 props 在渲染的過程當中被修改，會致使該組件的顯示和行爲不可預測

九、React 點擊 A 頁面跳轉到 B頁面並滾動到指定位置

render(){

const flag = window.localStorage.getItem(' flag');
  if (flag === 'true' && $('html, body') && $('#pageB')[0]) {
    // 滾動到指定位置
    $('html, body').animate(
      {
        scrollTop: 3200,
      },
      1000
    );
    window.localStorage.setItem('flag', 'false');
  }

}
複製代碼

注意：
須要設置一個 flag 保存在 localStroage 中，做爲頁面滾動的tirgger

若是是跨域的話，能夠經過router，判斷前一個 router 是不是 頁面 A 的 router

十、什麼是高階組件？（HOC — Higher-Oder Components）
項目中的封裝的可複用的組件不是高階組件，由於它是一個組件，而不是函數

ant-design-Pro中的connect（也就是封裝的 redux）是高階組件：

將須要的數據傳給組件 componentA

export default connect(({ haha, }) => ({
  hahaData: haha.hahaData,
}))(componentA);
複製代碼

高階組件是一個函數，而不是組件！：

export default (WrappedComponent)=>{
  class NewComponet extends Component{
    //作自定義的邏輯
    render(){
      return <WrappedComponent />
    }  
  }
  return NewComponent
}
複製代碼

HOC 與普通組件的區別：
普通組件是將 props 轉爲 UI
高階組件是將 組件轉換爲另外一個組件

高階組件的設計模式是裝飾者模式

什麼是裝飾者模式？
segmentfault.com/p/121000000…

---

（完）