每个开发人员都应该使用的十大 React 技巧

发现一组所有开发人员都应该知道的 React 最佳编码实践、技巧和窍门。

要点 -

使用状态管理库（Redux、MobX、Apollo）
使用事件监听器代替静态方法
移除 UnMount 中的所有监听器
环境设置配置 || 测试 || 现场 || 暂存
使用上下文进行主题管理 Dark || Live Theme
使用 Storybook - 隔离 | | 可重用组件开发
尽量减少使用第三方库 || 而是创建自己的代码逻辑
缩放和调整图像大小 || 缓存图像
Firebase 性能监控
使用 useMemo、useCallBack 避免重新渲染

1. 使用状态管理库（Redux、MobX、Apollo）

很多时候，我们使用特定于组件的局部变量、数组、对象声明，但同样的情况也会在其他组件中使用，然后使用状态管理库，这样您就可以通过应用程序访问您的变量、数组、对象，您可以在任何组件中更新和监听更改。

Redux、Redux Saga、Redux Rematch、MobX State Tree、Apollo都是流行的状态管理库，它们允许开发人员通过应用程序访问状态变量，并且它将持久保存您的数据，以便下次用户返回时从存储中获取应用程序数据并将其分配给状态变量。

2. 使用事件监听器代替静态方法

我们在一个组件上，想要调用前一个组件或任何其他组件的某个函数，这时我们会在类组件中使用静态方法。我没有使用静态方法，而是使用 React Native 事件监听器。你可以在需要监听的组件中添加监听器，并在需要调用函数的地方发出事件。集成起来非常简单。

查看react-native-event-listeners

npm install --save react-native-event-listeners
or
yarn add react-native-event-listeners

import { EventRegister } from 'react-native-event-listeners'

/*
 * RECEIVER COMPONENT
 */
class Receiver extends PureComponent {
    constructor(props) {
        super(props)

        this.state = {
            data: '',
        }
    }

    componentWillMount() {
        this.listener = EventRegister.addEventListener('yourEventName', (data) => {
            this.setState({
                data,
            })
        })
    }

    componentWillUnmount() {
        EventRegister.removeEventListener(this.listener)
    }

    render() {
        return <Text>{this.state.data}</Text>
    }
}

/*
 * SENDER COMPONENT
 */
const Sender = (props) => (
    <TouchableHighlight
        onPress={() => {
            EventRegister.emit(‘yourEventName’, ‘Task Completed!’)
        })
    ><Text>Send Event</Text></TouchableHighlight>
)

3. 在 UnMount 中移除所有监听器

我们正在添加监听器来监听事件，例如 KeyboardListeners、EventListeners、NavigationEventListeners、TabEventListeners 等。当您在 componentWillMount 中添加监听器时，它会为您创建监听器，但如果您忘记在 componentWillUnMount 时移除它，那么下次您再次返回组件时，它会创建另一个监听器对象，这会导致内存泄漏和监听器意外的行为。因此，最好在 componentWillUnMount 时移除监听器，这样可以释放内存并提供不间断的行为。

相关文章 - 了解React Clean Architecture如何帮助 Rect 开发人员编写干净、结构化、模块化和最佳的编码实践。

4. 环境设置配置 || 测试 || 现场 || 暂存

我们每个人都在使用不同的环境，例如测试环境、预发布环境、生产/上线环境。不同的环境会有不同的 API URL、常量变量、键值等。因此，我们建议使用 react-native-config 来设置测试环境、预发布环境和上线环境的配置。请按照react-native-config中提供的步骤来管理您的环境。

5. 使用上下文进行主题管理 Dark || Live Theme

如今，我们已经习惯了明暗主题，开发者们也开发了同时支持明暗主题的应用程序。但作为开发者，我们该如何管理样式，如何添加/管理监听器呢？建议使用 React Context API 来管理主题。你可以在 App.js 中设置 Context，并在 App.js 中添加主题监听器，这样每当用户更改主题时，App.js 都会收到通知，主题也会随之更改，所有组件也会收到通知。这样，你就可以提供即时更改的主题，并让用户感受到效果。

6. 使用 Storybook - 隔离 || 可重用组件开发

几乎每个应用程序都有一些组件，例如 TextInput、Button 等，它们会被用在不同的组件中。与其为每个组件编写单独的代码，不如创建一个通用组件并在 Components 中使用它。这样做的好处是，您可以从一个地方管理它，并且它会在整个应用程序中反映您的更改。

如果我说你开发的组件可以动态修改它的属性，比如颜色等等，你需要在一个组件中导入/实现它并运行应用程序，对吗？有什么方法可以让我在一个地方看到所有可重用组件，然后可以试用、修改各种属性并进行验证吗？

Storybook将提供一个界面，让您可以一站式查看所有已开发的可复用组件。您只需创建 Story，并将组件改进到 Story 中即可。Storybook 将渲染所有 Story。集成非常简单。更多详情，请参阅 Storybook 文章。

7. 尽量减少使用第三方库 || 而是创建自己的代码逻辑

我们在应用程序中使用了太多第三方库和 NPM，用于处理小型任务。问题是，每当 iOS、Android 和 React Native 版本升级时，我们都会忘记升级库和 NPM，从而导致应用程序崩溃。即使我们不确定库和 NPM 的创建者是否已更新到最新标准和安全性，这也会造成应用程序崩溃。

建议不要使用第三方库、NPM 等小型案例，而是创建自己的代码解决方案，以便轻松管理和更新它。

8. 缩放和调整图像大小 || 缓存图像

图像优化对于 React Native 应用性能至关重要。如果您有一个电商类应用程序，或者需要最大限度渲染图像的应用程序，而图像没有经过优化，那么它将消耗更多用户内存，从而导致应用程序崩溃。
建议您执行以下操作：

使用 PNG 图像代替 JPG
使用小分辨率图像
使用最新的 WEBP 格式的图像 - 这有助于减少 iOS 和 Android 的二进制大小。

缓存图片 -
对于电商或大型图片展示类应用，建议使用图片缓存，以便更快地显示图片，避免闪烁。建议使用React Native Fast Image，它在 iOS 和 Android 上都能完美运行。

9. Firebase 性能监控

Firebase 性能监控可帮助开发者识别何时何地可以改进性能，从而修复这些性能问题，并为用户提供一致的体验。它允许您跟踪 HTTP 请求性能跟踪，也可以根据业务需求进行自定义跟踪。

集成非常简单，您将获得一个包含报告的仪表板。就是这么简单。

相关文章 -如何提高 React Native App 的性能？

10. 使用 useMemo、useCallBack 避免重新渲染

几乎所有应用程序都包含 FlatList 以及其他组件，例如 Button、TextInput。FlatList 会在首次渲染时重新加载 FlatListItem，而且，每当任何状态变量发生变化时，FlatList 都会重新加载 FlatListItem。这些都是不必要的重新渲染，实际上 FlatList Item 本身并没有任何变化。为了避免这些重新渲染，请使用 useMemo 钩子，它会先检查所有更改的 props，然后才会重新加载 FlatListItem。

相关文章 - React Hooks的逐步集成 - useState、useEffect、useRef、useMemo、useCallback。

感谢您阅读博客！

文章来源：https://dev.to/kpiteng/top-10-react-tricks-every-developer-should-use-8nj