Android攻城獅前端遇坑指南

劉小帥發表於2019-02-22
Android前端

決定一個人命運的不是能力而是選擇

1.加快安裝

npm config set registry registry.npm.taobao.org

2.寫程式碼過程中webstorm底部一直閃爍，程式碼也提示不了

File->Invalidate Cahes/Restart -> Invalidate and Restart
複製程式碼

3.按鈕未點選自動執行點選事件

handlerClick = (questionId)=>{
    console.log('我執行了')
}
<button type="button"
   onClick={
    this.handlerClick(question_id)
  }>補習詳情
</button>
複製程式碼
handlerClick (questionId){
    console.log('我被點選了')
}
<button type="button"
   onClick={
    this.handlerClick.bind(this,question_id)
  }>補習詳情
</button>
複製程式碼
第一種和第二種是兩種常見的函式定義方法，第一種是箭頭函式，第二種是普通函式。推薦用箭頭函式
  • 避免普通函式this造成的一系列問題，而箭頭函式this指向函式定義的元件
  • 每次重新整理元件都會重新執行bind方法，對效能有影響
但是第一種箭頭函式確帶來了奇怪的問題：按鈕未點選handlerClick函式自動執行了，而不傳引數的話是不會自動執行的，這是為什麼？明明看起來兩種寫法差不多！在講這個問題之前我們首先來看一下匿名函式
function (){
    console.log('我執行了')
}
複製程式碼
忽略箭頭函式的內部細節，我們發現其實箭頭函式就是匿名函式。再來看看匿名函式是如何執行的
（function (){
    console.log('我執行了')
}）（）
複製程式碼
聰明的你應該發現問題了，第一種箭頭函式傳參就相當於匿名函式立即執行。講清楚了為什麼會立即執行，看下如何解決
<button type="button"
   onClick={()=>{
       this.handlerClick(question_id)
   }
  }>補習詳情
</button>
複製程式碼
這有什麼區別？第一種箭頭函式的寫法等價於
onClick=(function(){
    console.log('我執行了') 
})(questionId)
複製程式碼

第二種等價於

onClick=function(){
    return function handlerClick(questionId){
        console.log('我執行了') 
    }
}
複製程式碼
那麼bind為什麼不會立即執行？因為bind返回的還是函式

4.ant Design Select元件的坑

<Select defaultValue={0} onChange={this.handleClasses} className="selectClasses">
   {
   allClass.map((value, index) =>
          <Select.Option value={index}>{value.class_name}</Select.Option>
       )
    }
</Select>
複製程式碼
開始allClass是空陣列，等到網路請求返回allClass才有資料，然後元件會重新整理。這時候很奇怪defaultValue沒有重新整理，莫名其妙的設定不了預設資料。會出現下圖所示的情況

Android攻城獅前端遇坑指南

下面的寫法可以避免這種情況
{
 allClass.length !== 0 ?
   <Select defaultValue={0} onChange={this.handleClasses} className="selectClasses">
    {
      allClass.map((value, index) =>
       <Select.Option value={index}>{value.class_name}</Select.Option>
      )
    }
   </Select> : <div/>
}
複製程式碼
這種寫法更優雅
{
 allClass.length !== 0 &&
   <Select defaultValue={0} onChange={this.handleClasses} className="selectClasses">
    {
      allClass.map((value, index) =>
       <Select.Option value={index}>{value.class_name}</Select.Option>
      )
    }
   </Select>
}
複製程式碼

5.react.setState()之後不能獲取更新後的資料

下面獲取到的count還是-1
this.state={
    count = -1
};
this.setState({ count: 0 });
console.log(this.state.count);
複製程式碼
實際上setState並不會立馬執行，它會把狀態存到佇列中，稍後才會更新state的值，下面的寫法可以避免這種情況
this.setState({ count: 0 },
() => console.log(this.state.count))
複製程式碼

6.自己搞的簡易的react Componet

export default class Component {
    constructor(props = {}) {
        this.props = props;
    }

    setState(state) {
        const oldEl = this.el;
        this.state = state;
        this._renderDOM();
        if (this.onStateChange) this.onStateChange(oldEl, this.el);
    }

    _renderDOM() {
        this.el = this._createDOMFromString(this.render());
        if (this.onClick) {
            this.el.addEventListener('click', this.onClick.bind(this), false)
        }
        ;
        return this.el;
    }

    _createDOMFromString = (domString) => {
        const div = document.createElement('div');
        div.innerHTML = domString;
        return div;
    }
    
    mount = (component, wrapper) => {
        wrapper.appendChild(component._renderDOM());
        component.onStateChange = (oldEl, newEl) => {
            wrapper.insertBefore(newEl, oldEl);
            wrapper.removeChild(oldEl);
        }
    }

    onStateChange(oldEl, newEl) {}

    render() {}

    onClick() {}
}
複製程式碼

7.react-router-dom使用

函式方式跳轉傳參 
this.props.history.push({
      pathname: '/detail',
      state: {
        id: 3
     }
)

複製程式碼

防止重複跳轉死迴圈

this.props.history.replace('/detail');
複製程式碼

goBack返回

this.props.history.goBack();
複製程式碼

8.redux使用,redux用於資料共享

index.js註冊

import counter from './reducers/index';
import {createStore} from 'redux';

const store = createStore(counter);
const render = () =>
    ReactDOM.render(<App
        value={store.getState()}
        onIncrement={() => store.dispatch({type: 'INCREMENT'})}//action
        onDecrement={() => store.dispatch({type: 'DECREMENT'})}
    />, document.getElementById('root'));
render();
store.subscribe(render);
複製程式碼
creare函式

export default (state = 0, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state
    }
}
複製程式碼
元件

 const {value, onIncrement, onDecrement} = this.props;
 <p>{value}次數拉拉拉</p>
 <button onClick={onIncrement}>加上</button>
 <button onClick={onDecrement}>減去</button>
複製程式碼

9.js精度問題

0.07.toFixed()*100 = 7.00000000000000001%
複製程式碼
(0.07*100).toFixed() = 7%
複製程式碼

好用的js方法

1.正確返回字串長度 
function length(str) {
  return [...str].length;
}
複製程式碼

或者

function countSymbols(string) {
  return Array.from(string).length;
}
複製程式碼

2.判斷一個字元是單位元組還是雙位元組

function is32(c){
  return c.codePointAt(0) > 0xFFFFFF;
};
複製程式碼

3.正則判斷金額是否正確

let s = "1512.1";
let patter = /^\d+\.?\d{1,2}$/g.test(s);
複製程式碼

4.將陣列中布林值為false的成員轉為0

Array.from([1, , 2, , 3], (n) => n || 0)
複製程式碼

5.陣列去重

[...new Set([1,2,3,4,5,2])]
複製程式碼

6.去除重複字串

[...new Set('ababbc')].join('')
複製程式碼

相關文章