10个必要的地道面试问题 *

编译成JavaScript的语言通常与React Native兼容. React Native uses Babel to transform JavaScript into a form that is consumable by the native OS’s JavaScript runtime, using the react-native Babel plugin. As long as Babel can compile your JavaScript, and your code does not rely on web- or Node.它将在React Native中运行.

任何不依赖于Node的纯JavaScript库.Js运行时模块，并且不依赖于特定于web的概念(例如.g. window.location.pathname) will run fine in React Native. But we have to be mindful because there’s no way to test for this with Babel—it doesn’t scan these libraries for offending dependencies. A module that uses window.location.pathname 可能会在运行时意外的地方失败.

附加:对于显式依赖于Node的模块.js runtime modules, 我们可以经常使用Babel插件来浏览这些组件，以便在React Native中使用.

Certain animation types, like Animation.timing and Animation.spring，可以在执行之前序列化并通过异步网桥发送. This allows the runtime to defer the actual drawing of the animation entirely to the native side, instead of trying to send positional values across the bridge as each frame is rendered. 这不适用于不能提前计算的动画. For example:

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

这将序列化操作，并在启动操作之前将其发送到本机.

StyleSheet is a module built into React Native that allows us to create immutable stylesheet references. 类中传递常规样式对象 create() 方法，模块将冻结对象，并为每个对象分配一个ID. This has two benefits: it allows us to avoid creating a new style object every render pass (which could lead to degradation of render performance), and it allows us to send the object across the asynchronous bridge only once (since these style objects map directly to native styles, they need to be passed across).

The key tradeoff with this method is that recomputing styles based on external criteria (like screen rotation or even a user-selected viewing mode) needs some infrastructure built to determine which styles to use. 如果对象是“原始”传递的，那么每次都可以动态地重新计算它们, based on arbitrary criteria.

Often, and especially on the Android platform, 滚动时不能正确地回收图像列表. 它们的内存永远不会被垃圾收集，也不会在较低的级别手动释放. This leads to out-of-memory (OOM) crashes that can occur seemingly at random as the app’s memory is exhausted.

We can investigate this by profiling the app’s heap memory usage in either Xcode or Android Studio. If you scroll through a list of images and notice the heap usage steadily climbing without ever dipping, 这可能意味着你的图像没有被正确地回收.

为了减轻这种情况，我们可以检查我们正在使用的列表实现. In modern versions of React Native, ListView should never be used; ensure that the FlatList 组件正在处理渲染. If this is not sufficient after tuning, you can try making your images lower resolution.

React Native comes with the Animated API built in. 这个API是声明式的:我们使用 Animated.timing, Animated.spring, etc.，并提供动画运行所需的确切参数. This technique falls apart when we need lots of subtle and delicate animations on the fly; it’s not performant, 维护所有这些代码将是一场噩梦.

Instead, we look to the LayoutAnimation module, which is an interpolative API. We can invoke predefined LayoutAnimations, or define our own. LayoutAnimation 观察渲染循环周期之间元素位置的变化, 并计算元素在不同循环中的位置差. 然后，它插入这些变化并产生平滑的、本机驱动的动画.