10 Essential React Native Interview Questions *

Languages that compile to JavaScript are generally compatible with React Native. React Native使用Babel将JavaScript转换为可被本地操作系统的JavaScript运行时使用的形式, using the react-native Babel plugin. 只要Babel可以编译你的JavaScript，并且你的代码不依赖于web-或Node.js-specific dependencies, it will run in React Native.

Any pure JavaScript library that does not rely on Node.js runtime modules, and does not rely on web-specific concepts (e.g. window.location.pathname) will run fine in React Native. 但是我们必须注意，因为没有办法用babel来测试这一点——它不会扫描这些库是否有冒犯性的依赖. A module that uses window.location.pathname may fail at runtime in an unexpected place.

Bonus: For modules that explicitly rely on Node.js runtime modules, we can often use Babel plugins to browserify these components for use in React Native.

Certain animation types, like Animation.timing and Animation.spring, can be serialized and sent across the asynchronous bridge before they are executed. 这允许运行时将动画的实际绘制完全推迟到本机端, 而不是试图发送位置值在桥上的每一帧渲染. This does not work with animations that are not computable ahead of time. For example:

Animated.timing(new Animated.Value(0), {
  useNativeDriver: true,
  toValue: 100,
  duration: 100
}).start()

This will serialize the operation and send it to the native side before starting it.

StyleSheet 是一个模块内置到React Native，允许我们创建不可变的样式表引用. We can pass regular style objects into the create() method, and the module will freeze the objects, and assign each one an ID. 这有两个好处:它允许我们避免在每次渲染过程中创建一个新的样式对象(这可能导致渲染性能下降)。, 它允许我们通过异步桥只发送一次对象(因为这些样式对象直接映射到本地样式), they need to be passed across).

这种方法的关键缺点是，基于外部标准(如屏幕旋转或甚至用户选择的观看模式)重新计算样式需要构建一些基础设施来确定使用哪种样式. If objects were passed in “raw” they could be recomputed on the fly every time, based on arbitrary criteria.

Often, and especially on the Android platform, lists of images are not properly recycled when scrolling. Their memory is never garbage collected, nor is it manually freed at a lower level. 这将导致内存不足(OOM)崩溃，当应用程序的内存耗尽时，这种崩溃可能会随机发生.

我们可以通过在Xcode或Android Studio中分析应用程序的堆内存使用情况来研究这个问题. 如果您滚动图像列表并注意到堆使用情况稳步攀升而没有下降, it probably means that your images aren’t being recycled properly.

To mitigate this, we can check which list implementation we are using. In modern versions of React Native, ListView should never be used; ensure that the FlatList component is handling the rendering instead. 如果调优后这还不够，您可以尝试降低图像的分辨率.

React Native comes with the Animated API built in. This API is declarative: We define specific animations, using Animated.timing, Animated.spring, etc., and provide the exact parameters needed for the animation to run. This technique falls apart when we need lots of subtle and delicate animations on the fly; it’s not performant, and maintaining all that code would be a nightmare.

Instead, we look to the LayoutAnimation module, which is an interpolative API. We can invoke predefined LayoutAnimations, or define our own. LayoutAnimation watches changes in the positions of elements between cycles of the render loop, and computes the positional differences between elements at different cycles. Then, it interpolates those changes and produces a smooth, natively driven animation.