看著我們 RN 項(xiàng)目勉盅，下意識會類比以往 iOS 項(xiàng)目中的搭建思路，首先劃分基本差不多
- api：請求接口
- interface: 參數(shù)模型
- style: 布局樣式
- index.tsx： 引用調(diào)用
- XXXPhone.tsx: 主頁面呈現(xiàn) View（主要邏輯也在此）
確實(shí)我們平常搭建 iOS 頁面差不多的顶掉，只是換了種方式草娜，只是在主頁面處有一些有意思的點(diǎn)，或者說從 iOS 角度看不習(xí)慣的點(diǎn)痒筒。
class RNTest extends React.Component {
render() {
return (
<View style={styles.container}>
XXXX
</View>
);
}
}
不習(xí)慣的點(diǎn)宰闰，記錄于此:
- 一、各種 const 聲明
- 二凸克、箭頭函數(shù)的不習(xí)慣
- 三议蟆、useState
- 四闷沥、useEffect
一萎战、各種 const 聲明
在 iOS 中，我們一般沒有用直接用 const 的習(xí)慣舆逃，除了聲明常用值
可以說路狮，按照我們之前 iOS 的說法虫啥，方法和屬性全都用 const 了
二、箭頭函數(shù)的不習(xí)慣
const closeModal = () => {
setModel(false);
};
const getWithdrawalDetail = async (id: number) => {
return await ApiWithdrawalDetail({ billId: `${id}` });
};
export const ApiWithdrawalDetail = (
params: IWithdrawalParam
): Promise<IResponse<IWithdrawalResult>> => {
return http.get('xxxx/detail', { params });
};
還好可以自動補(bǔ)全的 =() =>{}
三奄妨、useState
useState也叫State Hook, 是 Hooks 最常見的IPA涂籽， 俗稱狀態(tài)鉤子。
Hooks 是一種在函數(shù)式組件中使用有狀態(tài)函數(shù)的方法砸抛。
import React, { useState } from 'react';
import {
SafeAreaView,
Text,
TouchableOpacity
} from 'react-native';
import Constants from './expand/dao/Constants';
import { post } from './expand/dao/HiNet';
export default (props: any) => {
const [msg, setMsg] = useState('');
const doFetch = () => {
const formData = new FormData();
formData.append("requestPrams", 'RN');
post(Constants.test.api)(formData)().then(result => {
setMsg(JSON.stringify(result));
}).catch(e => {
console.log(e);
setMsg(JSON.stringify(e));
})
}
return (
<SafeAreaView>
<TouchableOpacity onPress={doFetch}>
<Text>加載</Text>
</TouchableOpacity>
<Text>{msg}</Text>
</SafeAreaView>
);
};
上述是網(wǎng)上一個(gè)很經(jīng)典的例子, 可以很好的理解
const [steps, setSteps] = useState<IStep[]>([]);
const [withdrawal, setWithdrawal] = useState<IWithdrawalResult>();
setSteps(temp.data);
setWithdrawal(result.data);
上述該變量的值也就被修改了评雌。而
State Hook的作用范圍：因?yàn)?code>Hooks只能應(yīng)用與函數(shù)式組件，所以通過它聲明的state的作用范圍是函數(shù)內(nèi)直焙。
四景东、useEffect
useEffect也叫Effect Hook, 也是 Hooks 最常見的IPA， 俗稱副作用鉤子奔誓。
我們可以把 useEffect Hook 看做React class 的生命周期函數(shù)：componentDidMount斤吐、componentDidUpdate 和 componentWillUnmount 這三個(gè)函數(shù)的組合。
import React, { useState, useEffect } from 'react';
import {
SafeAreaView,
StyleSheet,
Text,
TouchableOpacity
} from 'react-native';
import Constants from './expand/dao/Constants';
import { post } from './expand/dao/HiNet';
export default (props: { navigation: any }) => {
const [msg, setMsg] = useState('');
useEffect(() => {
//對應(yīng)componentDidUpdate
function handleStatusChange(status: any) {
console.log(status);
}
const timer = setTimeout(() => {
doFetch();
}, 2000);
// 對應(yīng)componentWillUnmount
return function cleanup() {
timer && clearTimeout(timer);
};
});
const doFetch = () => {
const formData = new FormData();
formData.append("requestPrams", 'RN');
post(Constants.test.api)(formData)().then(result => {
setMsg(JSON.stringify(result));
}).catch(e => {
console.log(e);
setMsg(JSON.stringify(e));
})
}
return (
<SafeAreaView>
<TouchableOpacity onPress={doFetch}>
<Text>加載</Text>
</TouchableOpacity>
<Text>{msg}</Text>
</SafeAreaView>
);
};
上述也是一個(gè)經(jīng)典的使用 useEffect 的例子, 目前我直接理解成進(jìn)入頁面刷新使用用到的點(diǎn)。
而單獨(dú)的刷新又可以用到
useCallback, 所以到后來感覺 React Native 開發(fā)和措，當(dāng)我們熟悉常用的幾個(gè)鉤子（ Hooks） 后加上之前的HTML CSS 基礎(chǔ)就可以開干啦庄呈。
