react+react-native混合App開發--初次上手

一、開發前準備

1、安裝 react 依賴

在項目下安裝依賴

cnpm install react react-dom --save

cnpm install babel-preset-react --dev

修改配置文件 .babelrc ：

{
	"presets":["evn","stage-0","react"]
}

2、爲 jsx 進行配置

在 webpack.config.js 中，修改 js 爲 jsx?

module:{
	rules:[
		{ test: /\.jsx?$/, use: 'babel-loader', exclude: /node_modules/ }
	]
}

到這裏，項目開發前的準備工作結束，接下來就可以開始代碼編寫了

---

二、知識說明：函數組件和類組件

3、函數組件和類組件的區別

關於 props 的使用，這兩類組件有幾個區別：

• 獲取props屬性的區別
• 讀寫props屬性值的區別

關於 state 的使用，有以下區別：

• 類組件中有自己的私有 state（稱爲有狀態組件），函數組件中沒有私有 state（稱爲無狀態組件）

關於 生命週期，有以下區別：

• 類組件中有自己的生命週期函數，函數組件中沒有

3.1 獲取 props 的區別

在函數組件中，如果想要使用 props，必須先定義：在參數中寫入 props

function MyCom(props) {
	return <p>{props.name}</p>
}

在類組件中，使用 props 不需要定義，可以直接通過 this 來拿到

class MyCom extends React.Component{
	render() {
		return <p>{this.props.name}</p>
	}
}

3.2 讀寫 props 的區別

針對 props，二者均爲只讀

在函數組件中，對於 props 屬性值，是隻讀的（read only）
在類組件中，對於 props 屬性值，是隻讀的（read only）

4、函數組件和類組件的使用場景

若一個組件需要有私有數據，或者需要在不同階段執行不同的業務邏輯（即需要生命週期），那麼使用類組件合適

若一個組件只需要根據外界傳來的 props，渲染固定的頁面結構，那麼使用函數組件合適