搭建 RN 项目页面不习惯的一些点

看着我们 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 基础就可以开干啦。

参考

最后编辑于：2022.03.25 17:15:31