初學 react 技術總結

項目技術總結

初學 react，作了一個 簡單的 h5 項目

• 使用了 react 14，mbox，react-weui，bugsnag（捕獲報錯），lodash（函數庫），commitLint（git 提交工具）等。
• 主要是總結本身學習中產生的一些經驗之談和項目遇到的坑。

一、react

• 1.一、學習基礎的 react 基礎，class
• 1.二、學習 react-router 路由的使用
• 1.三、學習 react 父子級傳數據
• 1.四、學習 mobx

react 遇到的坑和初學的經驗之談

• 1A: 遇到的第一個問題就是子父級傳值的問題，傳值這個問題的解決方案在本身寫的 blog 中能夠看到。

  • 解決方案：父子，子父傳值筆記
  • 解決方案：鬍子-react 小書

• 1B: 同級之間傳值問題

  • 解決方案：同級傳值的方案
  • 固然咱們也能夠看看 react 小書，使用的方法就是使用同一個父級，先傳值給父級而後再分發數據。

• 1C:使用 react-router 的時候遇到的跳轉的問題，在配合 個人 tab 的使用的時候，主界面因爲有兩個小的 tabs(外海銀行和社保平臺)，開始直接使用的 react-weui的 tab 切換，可是發如今不少界面跳轉的時候會出現跳轉的時候並非跳轉到對應的正確的界面。

  • 分析： 主要是由於沒有使用路由的緣由，而後被迫出了使用 react-router 中的 history的傳值的方法（state 等），致使 code 結構比較亂。
  • 解決方案：最後仍是改回了使用路由的方法。

• 1D: 每一個組件的結構問題，應該多使用無狀態的組件，耦合度過高。須要優化

  • 解決方案 ： 多看大佬的代碼

• 1E: 用戶數據和一些狀態的接口數據每次在頁面加載的時候都要獲取一次，比較浪費內存和加載時間

  • 解決方案： 使用 mobx 和 sercuity.js提早獲取用戶信息，而後在須要的頁面直接使用 mobx 載入獲取。節約時間

react 優化

• 1F:函數方法寫法優化

// old one
onChange={this.handleContentChange.bind(this)} />
 
// good one
onChange={e=>{this.handleContentChange(e)}} />

複製代碼

• 1G：合理的使用_render()來處理數據的變化

//合理的使用 _render(),把須要作數據處理和轉換的 render 先分離出來再作 render 處理
//部分引用代碼就不貼了
_render() {
    const { user } = this.state;

    return (
        user && (
            <div className="box">
               <ul>
                    <li> 姓名: {user.name || '暫無'}</li>
                    <li> 狀態: {user.status || '暫無'}</li>
                    <li> 手機: {user.tel || '暫無'}</li>
               </ul>
            </div>
        )
    );
}

render() {
    return (
        <Page className="page">
            <Title title="詳細信息" />
            {this._render()}
        </Page>
    );
}

複製代碼

• 1H:當須要調用接口的時候，必定有 loading 和 error 錯誤提示；給用戶一個比較好的體驗

//仍是剛剛那個栗子

getUser = async () => {
    this.setState({
        loading: true,
        error: null
    });

    try {
        const { data } = await http.get(API.user());

        this.setState({
            user: data
        });
    } catch (error) {
        this.setState({
            error
        });
    }

    this.setState({
        loading: false
    });
};

_render() {
    // 固然咱們首先要根據項目來自定義咱們的 loading 框和 error 框，一些開源的 UI 框架也有這些設計，直接用也能夠。
   const { loading, error, user } = this.state;

    if (loading) {
        return <Loading className="loading" />;
    }

    if (error) {
        return <ErrorBox error={error} onClick={this.getUser} />;
    }

    return (
        user && (
            <div className="box">
               <ul>
                    <li> 姓名: {user.name || '暫無'}</li>
                    <li> 狀態: {user.status || '暫無'}</li>
                    <li> 手機: {user.tel || '暫無'}</li>
               </ul>
            </div>
        )
    );
}

render() {
    return (
        <Page className="page">
            <Title title="詳細信息" />
            {this._render()}
        </Page>
    );
}
複製代碼

二、es6+

• 2.一、對象，數組解構
• 2.二、跟加合理的使用函數值
• 2.三、活用一些 es6 的最新的函數方法

遇到的坑和初學的經驗之談

• 2A: 寫法問題，super 和 constructor 寫法

// old one
class CommentInput extends Component {
  constructor () {
    super()
    this.state = {
      username: '',
      content: ''
    }
  }
  ...
}

//good one
/* ** 咱們能夠不用 super 來繼承了，如今能夠簡寫 */
class CommentInput extends Component {
    state = {
      username: '',
      content: ''
    }
  
  ...
}
複製代碼

• 2B: 使用複雜的多重解構，進行精確取值

this.props.$formutil = { 
    $params: { amount: 100 }, 
    a: 'test',
    b:[{ c:'hello' },2,3]
    
}
 //可使用同數據結構相同的方法直接拿到內部的 amount
 const { $params: { amount }, a , b:[{ c }] } = this.props.$formutil;
 
複製代碼

三、react-weui

• 3.1 簡介：ui 框架相似於 weui 的其餘框架，主要和微信的 UI 風格近似。
• 3.2 使用：直接引用組件，看文檔就可使用

遇到的坑

• 3A、在使用 react-weui 的 dialog 組建的時候，因爲層級的關係，致使在 apple 手機上顯示有問題。
  • 解決方案：開始覺得是 dialog 的 type 選項的問題(andiord 和 ios的問題)，修改也不行，強行修改 style 也不行，最後使用了項目本身寫的 dialog 的組件解決：
  • 總結：底層樣式問題，開始的佈局沒有好好寫，react-weui 組件問題。

引用

• 鬍子小書
• 官網