那些React-Native踩過的的坑

時間 2020-08-06

標籤那些 react native 欄目 React 简体版

原文原文鏈接

這幾天開始邊學邊作新模式，也踩了很多坑，因此會記錄下來--俗話說好記心不如爛筆頭，況且尚未一顆好記心（-_-）。javascript

從學React-Native開發功能模塊大概5天，有些體會：1若是說按產品原型去作同樣東西，那是容易的，可是這會形成不少問題，第一個是機器人同樣寫代碼，你不會從項目總體思考，代碼的質量也比較差並且不容易維護）,因此決定天天寫個博客，看1個小時React-native基礎點。java

0x01 關於Reac-Native調試命令react-native start的坑node

windows環境下，開啓react項目（暫且將命令服務稱之爲後臺）後臺再通過一些操做後，立刻會出現下圖狀態operation not permitted,lstat '..\.git\inde.lock'..錯誤react

一開始根據翻譯的話說是對這個文件的操做不被容許：android

第一點：很容易想到是文件權限的問題，能夠打開這個路徑下的文件屬性（.git文件夾是項目倉庫，默認是隱藏的，文件管理設置顯示隱藏的項目）發現讀寫屬性沒問題git

第二點：cmd命令沒有以管理員方式運行，實測其實沒效果github

第三點：查看了github的Reac-Native issues 而後發現找到兩個已經關閉的issues算法

下面列了下方法：redux

1實際上是node_modules/react-native/local-cli/server/server.js 文件中找到process.on('uncaughtException'行的而後註釋process.exit(0)退出進程的代碼，親測可用比較方便。windows

2未安裝watchman引發的，這種方法沒有實測

參考：http://stackoverflow.com/questions/38701115/windows-android-react-native-server-crashes-very-often/38831876#38831876

0x02 佈局頁面中的某個部分頻繁刷新

我這邊作一個ListView中的一些item的須要倒計時顯示，一開始我把他放在整個item的render佈局中而後發現加載5個定時器的時候切換頁面的時候特別卡，後面嘗試把頁面切換的時候把定時器移除（一開始認爲切換後再回來頁面會從新建立），可是發現其實不會。後面聽了技術老大的說封裝這個定時器組件，這裏涉及到react-native底層原理，由於放在整個item的佈局中的話，每次更新時間實際上是用diff算法計算此次的virtual dom與上次的virtual dom不一樣之處，若是不同更新不一樣的地方，而若是item中的佈局比較複雜的話，計算會比較耗時，可是若是封裝到組件中若是更新時間只須要計算<View><Text></Text></View>很簡單的virtual dom，效率上會提高不少，實測效率提高不少。

封裝再單獨組件中檢測執行兩個定時器消耗697ms與816ms 內存開銷還沒測

關於這個點後續會實測具體時間來做說明。

0x03 關於state的實用用法

在react-native中state表明動態改變值的狀態，但如何應用到開發中是一個關鍵點？

應用方向：若是頁面中觸發一個事件會引發多個控件改變，那麼咱們只要設置設定一個state的屬性，不一樣地方判斷其值，若是改變的話對應全部帶有屬性的佈局都會更新，至關於簡單代碼實現多控件刷新。

具體例子：

0x01網絡請求的不一樣狀態：請求成功-無內容請求成功-有數據解析失敗接口錯誤

0x02播放器的詳情頁中點擊播放按鈕進度條開始往前走能夠設置一個播放狀態

而後若點擊播放

1按鈕改變按鈕圖標

2播放進度條開始往前走

0x03 關於react-native中ListView加載數據細節

頁面中常常會有上拉加載數據的狀況，若使用

那時候弄的頁面比直接使用快2.5秒左右，尤爲是頁面item佈局複雜的話效果更明顯。

0x04 Undefined is not a function(React.findNodehandle)

import {
  ...
  findNodeHandle,
  ...
} from 'react-native';
不使用類名調用方法:
 findNodeHandle(ref)

0x05 redux-form問題

問題：代碼以下

_onPress(index,value) {
    this.setState({currentIndex: index});
}

render() {

        const {title, menuData}=this.props;
        return (<div className="sub-sideBar">
            <div className="title">{title}</div>
            {menuData.map((value, index) => {
                if(!value)
                    return;
                return <a key={index} onClick={this._onPress(index,value)}
                          className={this.getItemCssClasses(index)}>
                    <span>{value.title}</span>
                </a>;
            })}
        </div>);
    }

warning.js:36Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

分析：