React-Native研究

安裝教程

1. 安裝brew

         # brew 是一個Mac下快速安裝插件的工具雪情，類似Linux的yum\apt等命令行包安裝工具。安裝方式
   
         $ shell
         $ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
         $ 
         $
   

2. 安裝nvm

   brew install nvm
   

   nvm即node version manager,用來管理和支持Mac下多版本的node.js 打颤。

   安裝完后，根據(jù)終端提示，運行相關(guān)命令砚作，即可配置相關(guān)環(huán)境變量，終端提示輸入如下：

   You should create NVM's working directory if it doesn't exist:
   
   mkdir ~/.nvm
   
   Add the following to ~/.zshrc or your desired shell
   configuration file:
   
   export NVM_DIR=~/.nvm
   source $(brew --prefix nvm)/nvm.sh
   

   注意：source 方式可能找不到nvm.sh文件禁荸，或者在主目錄先找不到shell的幾個配置文件 .bashrc 或者 .zshrc 等右蒲，不能直接在終端輸入這些指令，否則只能在這個進程中安裝了赶熟。 最后我發(fā)現(xiàn)需要

   vim ~/.bashrc
   vim ~/.zshrc
   vim ~/.bashrc_profile
   

   在系統(tǒng)根目錄下生成這三個文件瑰妄，并配置好 source ／nvm.h。

   $  mkdir ~/.nvm
   $  export NVM_DIR=~/.nvm
   $  source $(brew --prefix nvm)/nvm.sh 映砖， 如果提示找不到nvm.sh,而cd到brew 目錄下發(fā)現(xiàn)有這個文件间坐，可以直接這么導入
   $ source /usr/local/opt/nvm.sh 
   

   ?
   ?

3. 安裝最新的node

   如果用brew或者其它方式安裝過node, 可以先刪除node

   brew remove --force node 
   sudo rm -r /usr/local/lib/node_modules
   
   brew prune
   sudo rm -r /usr/local/include/node
   
   #檢查brew是否正常
   brew doctor
   

   安裝最新的node

   nvm install node 
   

   將該node設(shè)置為默認的nvm管理的node

   nvm alias default node 
   

   安裝好node,其包管理工具npm, node package manager也安裝好了，可以參考其包管理工具的命令邑退。以下是npm常用指令：

   npm ls #查看當前目錄下安裝的包
   npm ls -g #查看全局安裝的包
   npm install xxx #安裝xxx包
   npm uninstall xxx
   npm info xxx 
   npm install xxx --save #安裝xxx包竹宋，并將xxx依賴命令寫入package.json
   npm update xxx
   
   #我的npm安裝路徑
   ~/.nvm/versions/node/v5.6.0/lib/node_modules/npm
   
   #nvm是用來管理node版本的工具，因此可以循該路徑找到node
   #我的node執(zhí)行的腳本bin
   /Users/schiller/.nvm/versions/node/v5.6.0/bin/node 
   
   #我們用react-native init myRNDemo來初始化RN項目,react-native命令的原理：
   $ cd ~/.nvm/versions/node/v5.6.0/lib/node_modules
   $ ls -a
   $ cd react-native-cli
   $ ls -a 
   .README.mdnode_modules
   ..index.jspackage.json
   
   $ vi package.json
   # package.json中有這么一段
   "bin": {  "react-native": "index.js"
   },
   $ vi index.js 
   
   if (args[0] === 'init') {
   if (args[1]) {
   init(args[1]);
   } else {
   }
   } else {
   ......
   }
   1地技、fs.writeFileSync(path.join(root, 'package.json'), JSON.stringify(packageJson));
   2蜈七、run('npm install --save react-native', function(e) {}
   #代碼1是動態(tài)生成package.json，代碼2是本地安裝react-native模塊莫矗。因此react native初始化項目困難飒硅，都是npm惹的禍
   

   經(jīng)過上面對"react-native-cli"與“react-native”的分析砂缩，可以看出Facebook應(yīng)該是推薦“react-native”模塊局部化，所以不論在React Native項目初始化的過程中三娩，還是clone已有的React Native項目庵芭，都需要在當前項目下下載和安裝“react-native”模塊，使得React Native 項目占用的空間越來越大雀监。

   over
   ?

4. 安裝watchman

   brew install watchman
   

   watchman為react代碼發(fā)生變化時双吆，完成相關(guān)的重建工具，實現(xiàn)LiveReload功能滔悉。
   ?
   ?

5. 安裝flow

   brew install flow 
   

   flow為javasript類型檢查器伊诵，實現(xiàn)靜態(tài)類型檢查

6. 安裝react-native

   $ npm install -g react-native-cli
   

   因為react-native 安裝后需要在所有目錄都可使用，因此需要全局安裝-

7. 安裝nrm

   npm install -g nrm 
   nrm ls #查看有哪些可用的源地址
   nrm use taobao #使用淘寶源
   

   nrm為管理node包源地址的管理器回官，因為node包默認為從國外服務(wù)器獲取曹宴，若不更換國內(nèi)源，在安裝時會非常慢

8. ?搭建私有npm歉提，提交創(chuàng)建項目的速度和減少緩存

起步笛坦，RN入門教程

1. 創(chuàng)建項目

     $ react-native init MyReactNativeProject
     # 分析項目目錄結(jié)構(gòu)，node_modules為react-native依賴的相關(guān)源代碼苔巨，package.json為rn依賴管理配置文件版扩，resources為資源目錄，如圖片資源
     # 通過package.json文件發(fā)現(xiàn)其實每次創(chuàng)建的新項目的react-native和react都是最新的版本侄泽。     
   

2. 啟動

   jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
   
   jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.116:8081/index.ios.bundle?platform=ios&dev=false"];
   
   jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
   

   原理：

   從jsCodeLocation的鏈接地址來看react-native是從本地端口拉取index.ios.js來執(zhí)行礁芦。如果將index.ios.js的名字改為test.ios.js，然后Appdelegate.m中的index.ios.bundle改為test.ios.bundle 重新執(zhí)行編譯通過悼尾，驗證假設(shè)柿扣。
   

   over.

3. 項目協(xié)作與遷移

   項目協(xié)作，遷移到新的服務(wù)器必須執(zhí)行nmp install重新更新項目的配置闺魏，否則會報錯未状。

   over.

ECMASCRIPT語法

1. Babel命令行轉(zhuǎn)碼工具

         > 通過npm安裝，babel用于命令行轉(zhuǎn)碼析桥，將es6轉(zhuǎn)成es5
         >
         > ``` shell
         > $ npm install --global babel-cli
         > ```
         >
         > Babel基本語法如下
         >
         > ``` shell
         > # 轉(zhuǎn)碼結(jié)果輸出到標準輸出
         > $ babel example.js
         >
         > # 轉(zhuǎn)碼結(jié)果寫入一個文件
         > # --out-file 或 -o 參數(shù)指定輸出文件
         > $ babel example.js --out-file compiled.js
         > # 或者
         > $ babel example.js -o compiled.js
         >
         > # 整個目錄轉(zhuǎn)碼
         > # --out-dir 或 -d 參數(shù)指定輸出目錄
         > $ babel src --out-dir lib
         > # 或者
         > $ babel src -d lib
         >
         > # -s 參數(shù)生成source map文件
         > $ babel src -d lib -s
         > ```
         > ?
   

2. Styles

   用如下方式定義樣式

   var styles = StyleSheet.create({
   base: {
   width: 38,
   height: 38,
   },
   background: {
   backgroundColor: '#222222'
   },
   active: {
   borderWidth: 2,
   borderColor: '#00ff00',
   },
   });
   

   Stylesheet.create構(gòu)造器是可選的司草，使用樣式

   <Text style={styles.base}>NICE</Text>
   <View sytle={[styles.base, styles.background]}></View>
   

   https://facebook.github.io/react-native/docs/style.html#content

   使用圖片

   //from local
   <Image source={require('./myImage.png')}  style={width: 40, height: 40}/>
   //from network
   <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 40, height: 40}}>
   
   

watchman take too long to load

這個錯誤facebook給出了官方的解決方法

$ brew uninstall watchman
$ brew install --HEAD watchman

over.

周末研究react總結(jié)

1. 完成一個Demo工程

React －Demo的基本

1. react-native各種控件的用法

ScrollView 、滑動視圖
ListView泡仗、列表視圖
Text 埋虹、label、自定義LabelView
TextInput 沮焕、輸入框
Image 吨岭、圖片、網(wǎng)絡(luò)圖片與本地圖片
DataPickerIOS峦树、日期欄
NavigatorIOS導航欄辣辫、導航頁面數(shù)據(jù)傳遞
TouchableHighlight 按鈕
ActivityIndicatorIOS 指示器

1. react-native自定義類和使用自定義類

render 函數(shù)是用來渲染視圖的函數(shù)
StylesSheet.create創(chuàng)建css
var object = React.createClass()創(chuàng)建react類
exports 輸出 該類旦事，給外部使用，
var DatePickerExample = require('./DatePickerExample');調(diào)用外部定義好的類
constructor為構(gòu)造函數(shù)
componentDidMount() 生命周期函數(shù)
getInitialState() ES5生命周期
render()渲染仕途急灭，類似 initwithframe ,addsubview
var WithLabel = React.createClass({})  創(chuàng)建新的類
<WithLabel label='Timezone:'>
</WithLabel> 使用自定義的類
module.exports = DatePickerExample;ES5輸出該類
node.js的目錄結(jié)構(gòu)

1. 細節(jié)總結(jié)

over.

下周任務(wù)

• 如何在已有項目中集成react-native

• 使用ES6語法來定義類姐浮、掌握ES6語法

• 掌握css布局

• 如何實現(xiàn)react和native頁面的通訊

• 掌握基本react UI控件

• 熟悉和掌握node.js語法

• over.

ES6語法之類

1. 定義類

//定義類
class Point {
constructor(x, y) { //構(gòu)造函數(shù)
this.x = x;
this.y = y;
}
toString() { //內(nèi)部自定義函數(shù)
return '('+this.x+', '+this.y+')';
}
}
var point = new Point(2, 3); //定義類實例
point.toString() // (2, 3)
point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true

1. over

組件的生命周期

所有組件名首字母必須大寫，如HelloReact葬馋，不能寫成 helloReact卖鲤。

this.props對象的屬性與組件的屬性一一對應(yīng)，但有一個例外畴嘶，就是this.props.children蛋逾，它表示組件的所有子節(jié)點。如果當前組件沒有子節(jié)點窗悯，它就是undefined区匣，如果有一個節(jié)點，它的類型是object蒋院，如果有多個節(jié)點亏钩，數(shù)據(jù)類型就是array∑劬桑可以通過React.children來處理this.props.children姑丑。

組件的屬性可以接受任意值，字符串辞友、對象栅哀、函數(shù)都可以。組件類的PropTypes屬性称龙，就是用來驗證組件實例的屬性是否符合要求昌屉。如下Demo:

var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
}); 
//該組件的title屬性設(shè)置為string類型，而且是必須的茵瀑。外部使用這個組件時對title賦值時必須是字符串。
//可以用getDefaultProps方法用來設(shè)置組件屬性的默認值躬厌。

組件的生命周期分為三個狀態(tài):

Mouting: 已經(jīng)插入真實的DOM
Updating: 正在被重新渲染
Unmounting: 已經(jīng)移出真實DOM

React為每個狀態(tài)都提供兩種處理函數(shù)马昨，will函數(shù)處理進入狀態(tài)之前調(diào)用，did函數(shù)在進入狀態(tài)之后調(diào)用扛施，三種狀態(tài)共計五種處理函數(shù)：

componentWillMount()
componentDidMount()
componentWillUpdate(Object nextProps, object nextState)
componetDidUpdate(Object prevProps, object prevState)
componetWillUnmount()

此外鸿捧，React還提供兩種特殊狀態(tài)的處理函數(shù)：

componentWillReceiveProps(object nextProps): 已加載組件收到信的參數(shù)時調(diào)用
shouldComponentUpdate(object nextProps, object nextState):組件判斷是否重新渲染時調(diào)用

對于組件獲取真實的DOM節(jié)點。

組件并不是真實的DOM節(jié)點疙渣，而是存在于內(nèi)存中國年的一種數(shù)據(jù)結(jié)構(gòu)匙奴，叫做虛擬DOM(virtual DOM)，只有當它插入文檔以后妄荔，才會變成真實的DOM泼菌。根據(jù)React的設(shè)計谍肤，所有的DOM變動，都先在虛擬DOM上發(fā)生哗伯，然后再將實際發(fā)生的變動部分荒揣，反映在真實的DOM上，這種算法叫做 DOM diff焊刹，可以極大的提高網(wǎng)頁的性能表現(xiàn)系任。、

this.state屬性：

組件和用戶互動虐块，是React 一大創(chuàng)新俩滥，將組件看成一個狀態(tài)機，一開始有一個初始狀態(tài)贺奠，然后用戶互動霜旧，導致狀態(tài)發(fā)生變化，從而觸發(fā)重新渲染UI：

class Index extends Component {
constructor(props) {
super(props);
this.state = { liked: false}
}
render() {
const aTexts = this.state.liked ? 'shit' : 'noshit'
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => this.setState({liked: !this.state.liked})}>
<Text style={styles.titletext}>React Native: {aTexts}</Text>
</TouchableOpacity>
</View>
);
}
}
//上述代碼中是一個組件敞嗡，在constructor方法中定義好state對象颁糟，這個對象可以通過 this.state來屬性讀取。當用戶點擊組件時喉悴，導致狀態(tài)發(fā)生變化棱貌，this.setState方法就修改狀態(tài)值，每次修改以后箕肃，自動調(diào)用this.render方法再次渲染組件婚脱。
//this.props和this.state都用于描述組件的特性，可能會產(chǎn)生混淆勺像。一個簡單的區(qū)分方法是障贸，this.props用來表示一旦定義，就不再發(fā)生變化的特性吟宦，而this.state是會隨著用戶互動而產(chǎn)生變化的特性篮洁。
//用一個函數(shù)_onPress()來定義點擊事件發(fā)生錯誤。錯誤原因不明殃姓。

over.

react-native報錯

1. OnlyChild報錯

報錯：React Native: Fix for "Invariant Violation: onlyChild Must Be Passed a Children With Exactly One Child"
原因：某些組件必須有且僅有一個子組件袁波，否則報錯
return (
<TouchableHighlight>
</TouchableHighlight>
); // Error: onlyChild must be passed a children with exactly one child
return (
<TouchableHighlight>
<Text>foo</Text>
</TouchableHighlight>
); // OK
return (
<TouchableHighlight>
<Text>foo</Text>
<Text>bar</Text>
</TouchableHighlight>
); // Error: onlyChild must be passed a children with exactly one child

1. over

node.js學習筆記

1. node常用命令

$ node /user/helloworld.js

1. node REPL(Read-eval-print loop)模式

2. 創(chuàng)建HTTP服務(wù)器(前提是你已經(jīng)安裝好node)

var http = require('http');

http.createServer(function(request, response) {
response.writeHead(200, {'Content-Type': 'text/html'});
response.write('<h1>Node.js</h1>');
response.end('<p>Hello world</p>');
}).listen(3000);
console.log("HTPP server is listening at port 3000");
#運行這段代碼，然后在瀏覽器中訪問：http://127.0.0.1:3000

1. supervisor解決調(diào)試問題

$ npm info supervisor
$ npm install supervisor
$ supervisor helloworld.js

1. 異步 I/O與事件式編程

1.阻塞與線程
2.同步I/O或阻塞式I/O
3.異步I/O或非阻塞式I/O
4.事件循環(huán)
#異步讀取文件蜗侈，異步I/O通過回調(diào)函數(shù)實現(xiàn)
var fs = require('fs');
fs.readFile('/Users/schiller/Desktop/file.txt', 'utf-8', function(error, data) {
  if(error) {
    console.log(error);
}else { 
console.log(data);
}
});
console.log('end');
#我們會發(fā)現(xiàn)先打印end 再打印file.txt的content
#同步讀取文件篷牌，阻塞之后再讀取
var fs = require('fs');
var data = fs.readFileSync('file.txt', 'utf-8'); 
console.log(data);
console.log('end.');

1. express框架研究

$ npm install -g express 
$ /Users/gaolong/.nvm/versions/node/v5.7.0/lib
$ 仔細閱讀Readme.md文檔
$ npm install -g express-generator@4
$ express fisrtExpressDemo
$ cd firstExpressDemo && npm install  //install
dependencies
$ npm start //啟動應(yīng)用
$ 瀏覽器輸入 'http://localhost:3000'
$ DEBUG=firstExpressDemo:* npm start //run the app 
#examples
$ git clone git://github.com/expressjs/express.git --depth 1
$ cd express
$ npm install
$ node examples/content-negotiation

1. react-native學習計劃

1.持續(xù)學習ES6，了解ES5
2.RN官方文檔
3.node.js了解js服務(wù)器編程踏幻，了解RN調(diào)試

1. JavaScript高級特性

1.作用域
var v1 = 'v1';
var f1 = function() {
console.log(v1); //v1
}

var v2 = "global";
var f2 =function() {
console.log(v2);//undefined,javascript會先搜索f2作用域
v2 = "scope";
}

var f = function() {
var scope = 'f0';
(function() {
var scope = 'f1';
(function() {
console.log(scope); //f1 ,這里取得的是其父作用域的值
})();             //函數(shù)作用域的嵌套關(guān)系是定義時決定的枷颊，不是調(diào)用時決定的
})();
};
f();

#全局作用域與全局對象
global對象、window對象、DOM對象 
2.閉包
var generateClosure = function() {
var count = 0;
var get = function() {
count++;
return count;
};
return get;
};

var counter = generateClosure();
console.log(counter()); //1
console.log(counter()); //2
console.log(counter()); //3
#當一個函數(shù)返回它內(nèi)部定義的一個函數(shù)時夭苗，就產(chǎn)生一個閉包信卡，閉包不但包括被返回的函數(shù)，還包括這個函數(shù)的定義環(huán)境听诸。上例中couter和generateClosure()的局部變量就是一個閉包坐求。
#閉包用作：嵌套的回調(diào)函數(shù)、實現(xiàn)私有成員
3.對象
var foo = {};
foo.pro_1 = 'bar';
foo.prop_2 = false;
foo.prop_3 = function() {
return 'Hello world';
};
foo['pro_4'] = '關(guān)聯(lián)數(shù)組';
console.log(foo.prop_3);
console.log(foo.pro_4);
console.log(foo['pro_4']);
#使用關(guān)聯(lián)數(shù)組創(chuàng)建晌梨、訪問對象成員桥嗤、使用對象初始化器創(chuàng)建對象
#構(gòu)造函數(shù)創(chuàng)建對象
function User(name, uri) {
this.name = name;
this.uri = uri;
this.display = function() {
console.log(this.name);
console.log(this);
}
}
var someUser = new User('gaolong', 'http://gaolong.com');
console.log(someUser.name);
someUser.display();
#this指針是引用所屬的對象
#call、aplly的功能是允許一個對象去調(diào)用另一個對象的成員函數(shù)Ｗ序颉７毫臁！
#call 和apply的功能是一致的敛惊，區(qū)別在于call以參數(shù)表來接收被調(diào)用函數(shù)的參數(shù)渊鞋，而apply以數(shù)組來接收被調(diào)用函數(shù)的參數(shù)。
#bind
var someGirl = {
name: 'beauty',
func: function() {
console.log(this.name);
}
};
var foo = {
name: 'ugly',
};
foo.func = someGirl.func;
foo.func(); //ugly

foo.func1 = someGirl.func.bind(someGirl);
foo.func1(); //beauty

func = someGirl.func.bind(foo);
func();//ugly
func2 = func;
func2(); //ugly
#原型
1.構(gòu)造函數(shù)內(nèi)定義的屬性繼承方式與原型不同,子對象需要顯式調(diào)用父對象才能繼承構(gòu) 造函數(shù)內(nèi)定義的屬性瞧挤。
2.構(gòu)造函數(shù)內(nèi)定義的任何屬性,包括函數(shù)在內(nèi)都會被重復創(chuàng)建,同一個構(gòu)造函數(shù)產(chǎn)生的 兩個對象不共享實例锡宋。
3.構(gòu)造函數(shù)內(nèi)定義的函數(shù)有運行時閉包的開銷,因為構(gòu)造函數(shù)內(nèi)的局部變量對其中定義 的函數(shù)來說也是可見的。
function FooMe() {
var innerVar = 'hello tomorrow';
this.prop1 = 'gaolongxiaoxiao';
this.func1 = function () {
innerVar = '';
}
}
FooMe.prototype.prop2 = 'Carbo';
FooMe.prototype.func2 = function () {
console.log(this.prop2);
}
var foo1 = new FooMe();
var foo2 = new FooMe();
console.log(foo1.func1 == foo2.func1); //false
console.log(foo1.func2 == foo2.func2); //true
//除非必須用構(gòu)造函數(shù)閉包特恬，否則盡量用原型定義成員函數(shù)执俩，因為這樣可以減少開銷
//盡量在構(gòu)造函數(shù)內(nèi)定義一般成員，尤其是對象數(shù)組癌刽，因為用原型定義的成員是多個實例共享的役首。
#原型鏈
特殊對象：Object 、 Function
Object.prototype是所有對象的祖先显拜，F(xiàn)unction.prototype是所有函數(shù)的原型衡奥，包括構(gòu)造函數(shù)。
用戶創(chuàng)建的對象：new 顯式構(gòu)造的對象
構(gòu)造函數(shù)對象：普通的構(gòu)造函數(shù),即通過 new 調(diào)用生成普通對象的函數(shù)远荠。
原型對象：特指構(gòu)造函數(shù) prototype 屬性指向的對象
這三類對象中每一類都有一個 __proto__ 屬 性,它指向該對象的原型,從任何對象沿著它開始遍歷都可以追溯到 Object.prototype矮固。
function FooYou() {

}
Object.prototype.name = 'My Object';
FooYou.prototype.name = 'Bar';
var obj = new Object();
var foo = new FooYou();
console.log(obj.name); //'My Object'
console.log(foo.name); // 'Bar'
console.log(foo.__proto__.name); // 'Bar'
console.log(foo.__proto__.__proto__.name); // 'My Object'
console.log(foo.__proto__.constructor.prototype.name); // 'Bar'

foo: __proto__ 
FooYou:__proto__.prototype
Foo.prototype:__proto__.constructor
Function: __proto__ & prototype
Function.prototype: __proto__ & constructor
obj: __proto__
Object: __proto__.protype 
Object.prototype: __proto__ & constructor

__proto__是實例為獲取其類的原型而設(shè)置的一個屬性！Ｆ┐尽乏屯！

在 JavaScript 中,繼承是依靠一套叫做原型鏈(prototype chain)的機制實現(xiàn)的。屬性 繼承的本質(zhì)就是一個對象可以訪問到它的原型鏈上任何一個原型對象的屬性瘦赫。例如上例的foo 對象,它擁有 foo. __proto__ 和 foo. __proto__.__proto__ 所有屬性的淺拷 貝(只復制基本數(shù)據(jù)類型,不復制對象)。所以可以直接訪問foo.constructor(來自foo. __proto__,即Foo.prototype),foo.toString(來自foo. __proto__.__proto__, 即Object.prototype)蛤迎。 

console.log(foo.__proto__); //FooYou { name: 'Bar'}
console.log(FooYou.prototype); //FooYou{ name: 'Bar'}
console.log(FooYou.prototype.__proto__); //{name: 'My Object'}
console.log(FooYou.prototype.__proto__.constructor); //[Function : Ojbect]
console.log(FooYou.prototype.__proto__.prototype); // null
console.log(FooYou.prototype.__proto__.__proto__); // undefined
console.log(foo.prototype); //undefined

#對象的復制
淺拷貝VS深拷貝
淺拷貝：共享對象屬性
Object.prototype.clone = function() {
var newObj = {};
for (var i in this) {
newObj[i] = this[i];
}
return newObj;
}

var obj = {
name: 'gaolongxiaohua',
likes: ['node', 'OC']
};

var newObj = obj.clone();
obj.likes.push('python');
console.log(obj.likes); //[ 'node', 'OC', 'python' ]
console.log(newObj.likes); //[ 'node', 'OC', 'python' ]
深拷貝：遞歸實現(xiàn)确虱、對象中可能有對象
Object.prototype.deepClone = function() {
var newOjb = {};
for (var i in this) {
if (typeof(this[i]) == 'object' || typeof(this[i]) == 'function') {
newObj[i] = this[i].deepClone();
}else {
newObj[i] = this[i];
}
}
return newObj;
}

Array.prototype.deepClone = function() {
var newArray = [];
for (var i=0; i < this.length; i++) {
if (typeof(this[i]) == 'object' || typeof(this[i]) == 'function') {
newArray[i] = this[i].deepClone();
}else {
newArray[i] = this[i];
}
}
return newArray;
}

Function.prototype.deepClone = function() {
var that = this;
var newFunc = function() {
return that.apply(this, arguments);
};
for (var i in this) {
newFunc[i] = this[i];
}
return newFunc;
};

var obj33 = {
name: 'xiaohua',
likes: ['hua', 'shit'],
display: function() {
console.log('chishi');
}
};

var newObj33 = obj.deepClone();
newObj33.likes.push('shishishihis');
console.log(obj33.likes); //['hua', 'shit']
console.log(newObj33.likes);// ['hua', 'shit','shishishihis']
#注意:這種實現(xiàn)方式對于循環(huán)引用無法生效，甚至出現(xiàn)循環(huán)遞歸

1. 原型鏈

[圖片上傳失敗...(image-39b111-1527822985817)]

1. over
2. over

RN組件替裆、API

1. PixelRatio

   static get() //返回設(shè)備的像素密度
   static getFontScale() //返回字體大小縮放比例
   static getPixelSizeForLayoutSize(layoutSize:number)//將一個布局尺寸轉(zhuǎn)換成像素尺寸
   

2. ?