什么是InteractionManager，它是如何使用的

Interaction Manager 是原生模块，可以将长时间运行的工作安排到“交互”完成后再执行。我们可以调用 InteractionManager.runAfterInteractions() => {} 来继续交互。我们还可以自定义交互。它用于使JavaScript运行平稳：

语法：

InteractionManager.runAfterInteractions(() => {
    // long-running synchronous task...
});

以下是调度到Interaction Manager的替代选项：

requestAnimationFrame()： 用于在一段时间内对视图进行动画处理。
setImmediate/setTimeout()： 用于稍后运行代码，但可能会延迟动画。
runAfterInteractions()： 用于稍后运行代码，而不会延迟活动动画。

React Native的触摸处理系统将一个或多个活动触摸视为“交互”，并且会延迟运行runAfterInteractions()回调函数，直到所有触摸结束或被取消。

InteractionManager还允许应用程序在动画开始时使用交互“句柄”注册自己的动画，并在完成后清除它。

var handle = InteractionManager.createInteractionHandle();
InteractionManager.clearInteractionHandle(handle);

runAfterInteractions() 运行一个普通的回调函数或一个 PromiseTask() 对象 ，使用返回一个Promise对象的通用方法。如果提供了PromiseTask()，则在执行下一个可能在队列中的任务之前执行它。

默认情况下，排队的任务在一个组中的 setImmediate() 时间内执行。如果调用了 setDeadline ，那么任务只会在截止日期之前执行，在此时执行将通过 setTimeout() 停止，以允许事件（如触摸）开始交互并停止执行队列任务，从而使应用程序更具响应性。

为什么使用Interaction Manager： Interaction Manager非常重要，因为React Native中有多个线程。在React Native中有 两个线程 可用，一个是处理屏幕绘制更新的JavaScript UI线程，另一个线程用于所有不在UI线程上的任务。

由于只有一个线程用来进行UI更新，所以会造成负载过重并且丢帧，特别是在导航屏幕动画执行期间。我们必须使用Interaction Manager来确保我们的函数在这些动画发生后执行，以便我们不会在UI线程上丢帧。在屏幕被动画化时绘制新屏幕非常困难，对于线程来说往往承受过多。

方法：

1. runAfterInteractions(): 用于安排在所有交互完成后运行函数。

static runAfterInteractions(callback)

2. createInteractionHandle(): 用于通知管理器一个交互已经开始。

static createInteractionHandle()

3. clearInteractionHandle（）： 用于通知管理器交互已完成。

static clearInteractionHandle(handle)

4. setDeadline(): setTimeout 使用一个正数去调度事件循环运行时间达到截止日期值之后的所有任务，否则默认情况下所有任务将在一个 setImmediate 批处理中执行。

static setDeadline(deadline)

创建ReactJS应用程序： 创建React应用程序，请按照以下步骤进行操作：

步骤1： 使用以下命令安装React Native

$ npm i -g create-react-native-app

步骤2: 创建一个项目

$ create-react-native-app Interaction-Manager

步骤3： 前往名为 fast-refresh 的文件夹

$ cd Interaction-Manager

步骤4： 安装所需的包。我们需要4个包来在React Native中运行交互管理器。

React
React DOM
React Native web
React script

通过使用以下命令来安装这些包：

npm i --save-dev react react-dom 
npm i --save-dev react-native-web react-scripts

步骤5： 开始使用npm包管理器

$ npm start

项目结构： 我们看到了交互管理器的实现，因此我们从项目文件目录中删除了不必要的文件。然后我们的项目结构看起来像这样：

什么是InteractionManager，它是如何使用的

示例1： InteractionManager功能组件基础：

App.js

import { useState, useEffect } from "react"; 
import { 
    Alert, 
    Image, 
    Animated, 
    InteractionManager, 
    Platform, 
    StyleSheet, 
    Text, 
    View, 
} from "react-native"; 
const useMount = func => useEffect(() => func(), []); 
const useFadeIn = (duration = 2000) => { 
    const [opacity] = useState(new Animated.Value(0)); 
    useMount(() => { 
        Animated.timing(opacity, { 
            toValue: 1, 
            duration, 
        }).start(); 
    }); 
    return opacity; 
}; 
const Ball = ({ onShown }) => { 
    const opacity = useFadeIn(); 
    useMount(() => { 
        const interactionPromise = InteractionManager.runAfterInteractions(); 
        return () => interactionPromise.cancel(); 
    }); 
    return <View style={[styles.logo, { opacity }]} />; 
} 
function App() { 
    return ( 
        <View style={styles.app}> 
            <View style={styles.header}> 
                <Text style={styles.title}> 
                    Welcome To GFG</Text> 
                <Image 
                    source={{ 
                        uri: 
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-T5Q30D4Jd1sRd2gh8wn7QDTyWqxFkwR1rMKAP8K-9O-3OMC4hkC75bR2&s=10"
                    }} 
                    resizeMode="contain"
                    style={{ height: 80 }} /> 
            </View> 
        </View> 
    ); 
} 
const styles = StyleSheet.create({ 
    app: { 
        marginHorizontal: "auto", 
        maxWidth: 500 
    }, 
    logo: { 
        height: 80 
    }, 
    header: { 
        padding: 20 
    }, 
    title: { 
        fontWeight: "bold", 
        fontSize: "1.5rem", 
        marginVertical: "1em", 
        textAlign: "center"
    }, 
}); 
export default App;

输出：

什么是InteractionManager，它是如何使用的

示例2： InteractionManager函数组件进阶：

App.js

import React, { useRef, useState, useEffect } from 'react'; 
import { Animated, Image, Text, View } from 'react-native'; 
  
const FadeInView = (props) => { 
    // Initial value for opacity: 0 
    const fadeAnim = useRef(new Animated.Value(0)).current   
    useEffect(() => { 
        Animated.timing( 
            fadeAnim, 
            { 
                toValue: 1, 
                duration: 7000, 
            } 
        ).start(); 
    }, [fadeAnim]) 
    return ( 
        <Animated.View 
            style={{ 
                ...props.style, 
                opacity: fadeAnim, 
            }}> 
            {props.children} 
        </Animated.View> 
    ); 
    return <View style={[styles.logo, { opacity }]} />; 
} 
  
export default () => { 
    return ( 
        <View style= 
        {{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> 
            <FadeInView> 
                <Text style={{ 
                    fontWeight: "bold", 
                    fontSize: "1.5rem", 
                    color: "green", 
                    marginVertical: "1em", 
                    textAlign: "center"
                }}> 
                    Welcome To GFG</Text> 
                <Image 
                    source={{ uri:  
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-T5Q30D4Jd1sRd2gh8wn7QDTyWqxFkwR1rMKAP8K-9O-3OMC4hkC75bR2&s=10" }} 
                    resizeMode="contain"
                    style={{ height: 80 }} 
                /> 
            </FadeInView> 
        </View> 
    ) 
}

输出：

什么是InteractionManager，它是如何使用的