插件窝干货文章 React Native 最佳实践

React Native 最佳实践

class strong react text 836 来源： 2024-10-20

如果您是 react native 开发者初学者，或者有经验，那么您必须意识到代码实践是一项不容妥协的技能。作为开发人员，项目的交付是必须的，但编写可扩展且高质量的代码将对您和您的团队的未来有所帮助。

在我们继续之前，这些实践可以在 react native cli 或 expo 项目上使用。从 2024 年开始，rn 团队表示，expo 将成为构建 react native 项目的官方框架。

在这篇博客中，我们将学习 react native 项目的代码实践。请记住，一个好的项目是以下方面的平衡：

可扩展
一致性
可维护
可读性

阅读我的博客，了解如何作为 reactjs 开发人员开始使用 react native 开发人员

1、项目结构

开发人员的首要任务是拥有可维护、可读且可扩展的代码库。您的项目结构也将对未来的开发人员有所帮助。有了 expo，人们就有了项目的结构，但作为一名 react native 开发者，你应该根据你的项目来规划你的项目结构：

my-app/
├── assets/
│   ├── fonts/
│   ├── images/
│   └── icons/
├── components/
│   ├── button.js
│   ├── button.styles.js
│   └── header.js
├── screens/
│   ├── homescreen/
│   │   ├── homescreen.js
│   │   └── homescreen.styles.js
│   └── profilescreen/
│       ├── profilescreen.js
│       └── profilescreen.styles.js
├── navigation/
│   ├── appnavigator.js
│   ├── authnavigator.js
│   └── mainnavigator.js
├── redux/ (or store/ if using zustand, mobx, etc.)
│   ├── actions/
│   ├── reducers/
│   ├── store.js
│   └── types.js
├── services/
│   ├── api.js
│   └── auth.js
├── utils/
│   ├── helpers.js
│   └── constants.js
├── app.js
├── package.json
├── .babelrc
└── readme.md

2.导入别名

长导入路径会使您的代码更难以阅读和维护。不要编写像 ../../../components/button 这样的长相对路径，而是使用别名来缩短它们并使代码更具可读性。

import button from 'components/ui/button';
import header from 'components/layout/header';

3.进口订单

要自动管理导入的顺序，您可以使用一个为您处理此问题的插件来配置 babel。这可以保持您的导入清洁并减少人工干预。

npm install --save-dev babel-plugin-module-resolver

4.打字稿

在 typescript (ts) 和 javascript (js) 之间进行选择时几乎没有争议，特别是对于大型应用程序。 typescript 提供静态类型检查，有助于在编译时而不是运行时捕获错误，从而生成更可靠和可维护的代码。

5. 风格

可以通过多种方式设计 rn 项目。可以使用 nativewind 或 react native 的样式。面对如此多的选择，我们应该追求一致性、可扩展性和可维护性。在这里阅读我关于造型的博客

1。内联：对于大型项目来说根本不是一个好方法。

<view style="{{" backgroundcolor: padding:><text style="{{" color:>hello</text></view>

2。 stylesheet api： 很好，但是样式不能重用

import { stylesheet, view, text } from 'react-native';

const styles = stylesheet.create({
  container: {
    backgroundcolor: 'blue',
    padding: 10,
  },
  text: {
    color: 'white',
  },
});

const app = () =&gt; (
  <view style="{styles.container}"><text style="{styles.text}">hello</text></view>
);

3。单独的样式：这是我在大型项目中更喜欢的样式方式。创建一个单独的 style.js 并在您需要的组件中使用它。

/components
   ├── mycomponent.js
   ├── mycomponent.styles.js
/app.js

// mycomponent.styles.js
import { stylesheet } from 'react-native';

export default stylesheet.create({
  container: {
    flex: 1,
    justifycontent: 'center',
    alignitems: 'center',
    backgroundcolor: '#f5f5f5',
  },
  title: {
    fontsize: 24,
    fontweight: 'bold',
    color: '#333',
    marginbottom: 20,
  },
  button: {
    backgroundcolor: '#007bff',
    paddingvertical: 10,
    paddinghorizontal: 20,
    borderradius: 5,
  },
  buttontext: {
    color: '#fff',
    fontsize: 16,
    fontweight: '600',
  },
});

// mycomponent.js
import react from 'react';
import { view, text, pressable } from 'react-native';
import styles from './mycomponent.styles';

const mycomponent = () =&gt; {
  return (
    <view style="{styles.container}"><text style="{styles.title}">hello from mycomponent</text><pressable style="{styles.button}"><text style="{styles.buttontext}">click me</text></pressable></view>
  );
};

export default mycomponent;

4。样式化组件：大型项目的另一种首选方式。

import styled from 'styled-components/native';

const container = styled.view`
  background-color: blue;
  padding: 10px;
`;

const styledtext = styled.text`
  color: white;
`;

const app = () =&gt; (
  <container><styledtext>hello</styledtext></container>
);

5。原生风： nativewind 是设计应用程序风格的好方法。安装原生 wind 后，您可以使用这些类来设计您的应用程序。这样您就可以委托造型工作。

import react from 'react';
import { view, text, pressable } from 'react-native';
import { styled } from 'nativewind';

const app = () =&gt; {
  return (
    <view classname="flex-1 justify-center items-center bg-gray-100"><text classname="text-2xl font-bold text-blue-500 mb-4">
        welcome to nativewind!
      </text><pressable classname="bg-blue-500 px-4 py-2 rounded"><text classname="text-white font-semibold">press me</text></pressable></view>
  );
};

export default app;

6.道具

props 用于 react native 中组件之间的通信，允许数据从父组件流向子组件。就像样式一样，管理道具的方法也有多种。一致性是关键，因此建议在整个项目中坚持使用一种方法。

此外，始终解构 props 以获得更清晰、更易读的代码。解构不仅提高了可读性，还可以更轻松地发现组件正在使用哪些 props。

const mycomponent = ({ title, subtitle }) =&gt; {
  return (
    <view><text>{title}</text><text>{subtitle}</text></view>
  );
};

7. 状态管理

高效的状态管理可确保应用程序随着代码库的增长而保持高性能和可管理性。如今，我们有很多选择来选择最好的状态管理人员。

a.更喜欢本地状态而不是全局状态

b.使用 context api 实现简单状态

c.使用状态管理库处理复杂状态

d.不可变状态更新

e.更喜欢 redux 工具包而不是 redux

import { createslice } from '@reduxjs/toolkit';

const booksslice = createslice({
  name: 'books',
  initialstate: [],
  reducers: {
    addbook: (state, action) =&gt; {
      state.push(action.payload);
    },
    removebook: (state, action) =&gt; {
      return state.filter(book =&gt; book.id !== action.payload);
    },
  },
});

export const { addbook, removebook } = booksslice.actions;
export default booksslice.reducer;

8. 崩溃分析

为了确保应用程序的健康并减少崩溃，实施崩溃分析和错误跟踪非常重要：

a。使用崩溃分析工具：实施 firebase crashlytics 或 sentry

等服务

b。测试您的应用程序的稳定性

运行自动化测试和手动压力测试以捕获边缘情况崩溃。利用 testflight 或 google play beta 测试等服务。

您可以跟踪本机崩溃（ios/android）和 javascript 错误。使用 errorboundary 捕获 javascript 错误并将其记录到崩溃分析服务。

c.跟踪 js 和本机错误

import react from 'react';
import * as sentry from '@sentry/react-native';

class errorboundary extends react.component {
  componentdidcatch(error, errorinfo) {
    sentry.captureexception(error, { extra: errorinfo });
  }

  render() {
    if (this.state.haserror) {
      return <text>something went wrong.</text>;
    }

    return this.props.children;
  }
}

9. 日志记录

日志记录有助于跟踪应用行为、调试问题和收集分析。

a。使用日志框架

react native logger：专为 react native 设计的易于使用的记录器。
winston：一个可以与 react native 和 node.js 一起使用的多传输日志库。

import logger from 'react-native-logger';

logger.log('This is a debug log');
logger.warn('This is a warning log');
logger.error('This is an error log');

b。区分日志级别

使用适当的日志级别，例如调试、信息、警告和错误。
在生产中，通过仅允许错误和警告日志来最大程度地减少日志记录的冗长性，而在开发模式下，请使用调试和信息。

c.远程记录

考虑将日志发送到远程日志服务，例如：

纸迹
洛格利
firebase analytics

d.仔细记录敏感信息

避免记录敏感的用户信息，例如密码、令牌或个人数据。

10. 测试

每个项目的测试都至关重要。作为开发商，质量是开发商的责任。在 react native 世界里有：

单元测试
集成测试
端到端测试

至少要花时间进行端到端测试。有很多工具可用于测试。

快乐学习！！

上一篇：了解 React 应用程序中的渲染和重新渲染：它们如何工作以及如何优化它们

下一篇：魅力我的标记：太阳系