看着我们 RN 项目，下意识会类比以往 iOS 项目中的搭建思路，首先划分基本差不多
我们某个页面基本构成
- api：请求接口
- interface: 参数模型
- style: 布局样式
- index.tsx： 引用调用
- XXXPhone.tsx: 主页面呈现 View（主要逻辑也在此）
确实我们平常搭建 iOS 页面差不多的，只是换了种方式，只是在主页面处有一些有意思的点，或者说从 iOS 角度看不习惯的点。
class RNTest extends React.Component {
render() {
return (
<View style={styles.container}>
XXXX
</View>
);
}
}
不习惯的点，记录于此:
- 一、各种 const 声明
- 二、箭头函数的不习惯
- 三、useState
- 四、useEffect
一、各种 const 声明
在 iOS 中，我们一般没有用直接用 const 的习惯，除了声明常用值
随便找一个页面，这些 Const 看的我好不习惯啊，慢慢体会
可以说，按照我们之前 iOS 的说法，方法和属性全都用 const 了
二、箭头函数的不习惯
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 });
};
还好可以自动补全的 =() =>{}
三、useState
useState也叫State Hook, 是 Hooks 最常见的IPA， 俗称状态钩子。
Hooks 是一种在函数式组件中使用有状态函数的方法。
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>
);
};
上述是网上一个很经典的例子, 可以很好的理解
const [steps, setSteps] = useState<IStep[]>([]);
const [withdrawal, setWithdrawal] = useState<IWithdrawalResult>();
setSteps(temp.data);
setWithdrawal(result.data);
上述该变量的值也就被修改了。而
State Hook的作用范围：因为Hooks只能应用与函数式组件，所以通过它声明的state的作用范围是函数内。
四、useEffect
useEffect也叫Effect Hook, 也是 Hooks 最常见的IPA， 俗称副作用钩子。
我们可以把 useEffect Hook 看做React class 的生命周期函数：componentDidMount、componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
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(() => {
//对应componentDidUpdate
function handleStatusChange(status: any) {
console.log(status);
}
const timer = setTimeout(() => {
doFetch();
}, 2000);
// 对应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>
);
};
上述也是一个经典的使用 useEffect 的例子, 目前我直接理解成进入页面刷新使用用到的点。
而单独的刷新又可以用到
useCallback, 所以到后来感觉 React Native 开发，当我们熟悉常用的几个钩子（ Hooks） 后加上之前的HTML CSS 基础就可以开干啦。
网友评论