本文介紹了React基本語法概念和React Native環(huán)境搭建及示例。
本文首發(fā)：http://yuweiguocn.github.io/
《春夜喜雨》
好雨知時節(jié)，當春乃發(fā)生。
隨風(fēng)潛入夜，潤物細無聲。
野徑云俱黑，江船火獨明。
曉看紅濕處，花重錦官城。
—唐，杜甫
React基本語法及概念
React（有時叫React.js或ReactJS）是一個為數(shù)據(jù)提供渲染為HTML視圖的開源JavaScript 庫 —— 維基百科。React 的核心思想是：封裝組件。
環(huán)境搭建
Homebrew是Mac OSX上的軟件包管理工具，能在Mac中方便的安裝軟件或者卸載軟件。安裝Homebrew：
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Node.js是基于JavaScript語言和 Chrome V8 引擎的開源Web服務(wù)器項目。簡單的說Node.js 就是運行在服務(wù)端的JavaScript。安裝Node.js時會順帶安裝一個名為 npm 的包管理工具，用來管理模塊依賴。安裝Node.js：
brew install node
Yarn是Facebook提供的替代npm的工具，可以加速node模塊的下載。React Native的命令行工具用于執(zhí)行創(chuàng)建、初始化、更新項目、運行打包服務(wù)（packager）等任務(wù)。安裝Yarn及RN命令行工具：
npm install -g yarn react-native-cli
安裝完yarn之后就可以用yarn代替npm了，例如用yarn代替npm install命令，用yarn add 某第三方庫名代替npm install --save 某第三方庫名。
Watchman是由Facebook提供的監(jiān)視文件系統(tǒng)變更的工具。安裝此工具可以提高開發(fā)時的性能（packager可以快速捕捉文件的變化從而實現(xiàn)實時刷新）。安裝Watchman：
brew install watchman
創(chuàng)建一個React Native工程，并運行到Android設(shè)備上：
react-native init RNTest
cd RNTest
npm insatll //根據(jù)配置文件安裝依賴module
react-native run-android
圖 工程結(jié)構(gòu)
可以通過搖一搖調(diào)出開發(fā)菜單，或者使用命令行：
adb shell input keyevent 82
組件
先來看一個簡單的示例：
import React, { Component } from 'react';
import { StyleSheet,View,Text } from 'react-native';
export default class HelloWorldApp extends Component {
render() {
return (
<View style={styles.parent}>
<Text style={styles.hello}>Hello world!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
parent: {
flex: 1,
justifyContent: 'center',
backgroundColor: "#F2F2F2"
},
hello: {
fontSize:30,
textAlign: 'center',
color: '#FF0000'
}
});
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
上面的代碼定義了一個名為 HelloWorldApp 的新的 組件（Component） ，StyleSheet用于控制組件樣式，并且使用了名為 AppRegistry 的內(nèi)置模塊進行了“注冊”操作。你在編寫React Native應(yīng)用時，肯定會寫出很多新的組件。而一個App的最終界面，其實也就是各式各樣的組件的組合。組件本身結(jié)構(gòu)可以非常簡單——唯一必須的就是在 render 方法中返回一些用于渲染結(jié)構(gòu)的JSX語句。
AppRegistry 模塊則是用來告知React Native哪一個組件被注冊為整個應(yīng)用的根容器。
JSX
React 使用 JSX 來替代常規(guī)的 JavaScript。JSX是一種在 JavaScript 中嵌入XML結(jié)構(gòu)的語法。
Virtual DOM
當組件狀態(tài) state 有更改的時候，React 會自動調(diào)用組件的 render 方法重新渲染整個組件的 UI。當然如果真的這樣大面積的操作 DOM，性能會是一個很大的問題，所以 React 實現(xiàn)了一個Virtual DOM，組件 DOM 結(jié)構(gòu)就是映射到這個 Virtual DOM 上，React 在這個 Virtual DOM 上實現(xiàn)了一個 diff 算法，當要重新渲染組件的時候，會通過 diff尋找到要變更的 DOM 節(jié)點，再把這個修改更新到瀏覽器實際的 DOM 節(jié)點上，所以實際上不是真的渲染整個 DOM 樹。這個 Virtual DOM 是一個純粹的 JS 數(shù)據(jù)結(jié)構(gòu)，所以性能會比原生 DOM 快很多。
Data Flow
Data Flow 只是一種應(yīng)用架構(gòu)的方式，比如數(shù)據(jù)如何存放，如何更改數(shù)據(jù)，如何通知數(shù)據(jù)更改等等，所以它不是 React 提供的額外的什么新功能，可以看成是使用React 構(gòu)建大型應(yīng)用的一種最佳實踐。單向數(shù)據(jù)綁定是 React 推崇的一種應(yīng)用架構(gòu)的方式。當應(yīng)用足夠復(fù)雜時才能體會到它的好處，雖然在一般應(yīng)用場景下你可能不會意識到它的存在，也不會影響你開始使用 React，你只要先知道有這么個概念。
state
React 把組件看成是一個狀態(tài)機（State Machines）。通過與用戶的交互，實現(xiàn)不同狀態(tài)，然后渲染 UI，讓用戶界面和數(shù)據(jù)保持一致。React 里，只需更新組件的 state，然后 React 會自動根據(jù)新的 state 重新渲染用戶界面。
props
state 和 props 主要的區(qū)別在于 props 是不可變的 ，而 state 可以根據(jù)與用戶交互來改變。這就是為什么有些容器組件需要定義 state 來更新和修改數(shù)據(jù)，而子組件只能通過 props 來傳遞數(shù)據(jù)。
介紹完以上概念，我們來看一個例子：
import React, {Component} from 'react';
import {StyleSheet, Text, Button, View} from 'react-native';
class CountText extends Component {
render() {
return (<Text>{this.props.count}</Text>);
}
}
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
}
}
pressButton = () => {
this.setState(previousState => {
return {count:previousState.count+1}
})
};
render() {
return (
<View style={styles.container}>
<Button onPress={this.pressButton}
title="Click Me"
color="#841584"/>
<CountText style={styles.countText} count={this.state.count} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
countText: {
fontSize: 20,
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
圖 示例效果
在這個例子中，我們自定義了一個組件CountText，用于渲染 count 屬性值。在App組件中定義了 state 對象，包含一個 count 屬性。App渲染了一個Button及自定義組件CountText，當點擊按鈕時調(diào)用 this.setState 更新state的值，CountText組件就會被重新渲染。在示例中，我們使用 props 給子組件傳遞數(shù)據(jù)，子組件通過 this.props.count 獲取，使用 state 更新 count 值，通過 this.state.count 傳遞給子組件的 count 屬性。
組件生命周期
每一個組件都有幾個你可以重寫以讓代碼在處理環(huán)節(jié)的特定時期運行的“生命周期方法”。方法中帶有前綴 will 的在特定環(huán)節(jié)之前被調(diào)用，而帶有前綴 did 的方法則會在特定環(huán)節(jié)之后被調(diào)用。
這些方法會在組件實例被創(chuàng)建和插入DOM中時被調(diào)用：
- constructor()
- componentWillMount()
- render()
- componentDidMount()
屬性或狀態(tài)的改變會觸發(fā)一次更新。當一個組件在被重渲時，這些方法將會被調(diào)用：
- componentWillReceiveProps()
- shouldComponentUpdate()
- componentWillUpdate()
- render()
- componentDidUpdate()
當一個組件被從DOM中移除時，該方法被調(diào)用：
- componentWillUnmount()
查看完整源碼：https://github.com/yuweiguocn/RNTest
查看React Native學(xué)習(xí)筆記相關(guān)文章。
