原生是用于在iOS，Android和UWP上呈现移动应用程序的库。使用React Native，它是可能的（在大多数情况下）来编写一次代码并部署到所有可用的目标平台 - 这可能是为什么您希望聘请专用React Nation Developers。
原生 Shares许多概念和库的反应，因此对于开发人员至少熟悉Web对Web的反应以及其常见模式，这是重要的。它还建议使用React Native Programmer精通JavaScript，尤其是ES6语法。
我们的许多问题 反应招聘指南 在聘请应用程序开发人员时适用于对原始的反应，因此在采访时更好地牢记这两个指南。当然， javascript.招聘指南 同样适用：作为指导提到，在对JavaScript框架中并成为其中的专家之间有很大的区别，并且在努力做出反应和反应本地工作时，JavaScript专家就是至关重要的。
反应原生面试问题
让我们潜入一些反应本地面试问题，以帮助您评估您的候选人。
什么是原生组件？
组件是React Native应用程序的构建块。 React Native提供了一组组件，即映射到反应本机开发人员可以使用的每个平台上的相应本机组件。
Some components can be used on all platforms (like View, Button, and FlatList) while others are platform-specific, as they map to native components that exist only on iOS or Android: For example, iOS does not have a hardware back button, so a BackHandler component for iOS apps would not make sense.
The developer can create their own component by extending the 反应.Component class, and implementing the Render method:
export default class App extends React.Component {
render() {
return (
// my component's visual tree
);
}
}
原生 offers a VirtualizedList component that provides virtualization out of the box. While VirtualizedList can be used directly, the more high-level FlatList (display items in a scrollable list) and SectionList (same as FlatList but with grouping and custom sections) implementations are fit for most use cases.
Some things are important to keep in mind when working with a VirtualizedList, however.
There’s no assurance that the internal state of the items in the list will be kept when scrolling the list: Based on the amount of elements and the level of scrolling, the list might dispose of some elements outside of the viewport. Those elements will be recreated from scratch based on props when coming back into the viewport. So, the developer needs to make sure that the item can be recreated based on props alone.
Items should specify a Key property which identifies them uniquely. Alternatively, it’s possible to provide a custom KeyExtractor in the list’s definition:
<FlatList KeyExtractor="{(item) => //function that uniquely identifies the item }" />
It’s a good practice to make sure list items do not re-render if passed in the same props they already have. This can be accomplished by implementing shouldComponentUpdate in the item’s component, or alternatively inherit from the 反应.PureComponent class, which provides an implementation of shouldComponentUpdate that does shallow prop and state comparison.
你如何在原生反应中的组件？
Styling is specified by plain JavaScript objects, and all React Native components accept a Style prop that can be set with the object specifying the style.
Note that while the syntax resembles CSS, it’s not CSS, and styling a React Native application’s components does not follow the same conventions. Notably, all properties follow the camelCase convention instead of dash-case (background-color becomes backgroundColor) and layout can be specified only using the Flexbox algorithm.
由于样式定义是在代码中完成的，因此可以易于参数化样式，并执行通常CSS预处理器/扩展（较少，SASS）的事情：
import { StyleSheet } from 'react-native';
import { primaryColor, secondaryColor } from './style/consts'; // values defined in another .js file
let width = 50;
///...
const style = StyleSheet.create({
'color': primaryColor,
'backgroundColor': secondaryColor,
'width': width
});
您如何调试React Native应用程序？
在仿真器中运行React Native应用程序的同时，可以通过“摇动”设备（通过选择仿真器中的“摇动”手势）或按命令-d（iOS）或控制/命令 - M（Android）。 Developer菜单将显示“启用JS调试”菜单条目，以及其他事项。点击后，可以浏览到 http：// localhost：8081 / debugger-ui 使用铬/铬，显示调试器。
Log traces are visible by running react-native log-android for Android, and react-native log-ios for iOS, while the emulator is up.
如果使用Redux， 反射龙 特别有用，可查看所有API调用和派遣的操作。
我们现有的Codebase是在Xamarin中，您将帮助将其移植以对原始作出反应。有什么问题？
与我们的其他作出原生面试问题不同，这可能不适用于每个项目。但如果它确实如此，这肯定是考虑的重要份额。
反应原生和 xamarin.forms. 采用相同的方法来制作跨平台应用程序：两者都采用UI定义（虚拟DOM或XAML）并将其转换为本机代码。
两者之间有两个主要差异：
- 选择语言：对于Xamarin来说，它几乎总是C＃ - 但可能是任何其他可用于.NET Framework-and JavaScript的其他语言。
- 它们可用的开发平台：Linux，MacOS和Windows的React Native，而Xamarin仅在Windows和MacOS上正式可用。
While React Native and Xamarin.Forms do conceptually the same thing, the abstractions they use are not directly compatible. For example, a component available on React Native might not necessarily be available on Xamarin, and vice versa. Also, the same abstraction is often implemented in different ways across the two frameworks: Take FlatList and SectionList on React Native, which map to their corresponding concept on both iOS and Android, and ListView on Xamarin.Forms, which conflates the two into one single UI component.
如果反应本地开发人员要从Xamarin.Forms解决一个端口，那么他们将至少有一些与C＃的经验是大量的有益，并且理想情况下是Xamarin的一些经验。
原生反应与反应之间的关系是什么？
反应 is a JavaScript library that allows the developer to define a user interface in a declarative way. If offers some infrastructure when it comes to state handling (props for one-way data flow, injected from the outside; state for two-way data flow, internally managed state) and general component lifecycle method hooks.
反应在内存中保持内部表示UI（虚拟DOM）。它使用此表示来计算在道具/状态变化的组件的可视外观中的Δ，以便可以部分更新数据更改数据，从而避免了完全重绘的需求。
原生坐在反应之上，其中React会将Virtual DOM作为HTML文档呈现，在National Maps将虚拟DOM响应到本机IOS /本机Android组件。因此，虽然反应通常与JSX一起使用以生成HTML输出，但是React Native具有自己的一组代表本机组件的抽象的标签。这些本机组件最终会在设备上显示。
因此，如果React组件看起来如下：
class ReactJSComponent extends React.Component {
render() {
return(
<div>
<p>Hello world!</p>
</div>
);
}
}
...那个等效的反应本地组分可能是：
class ReactNativeComponent extends React.Component { //note that's the same class we're extending
render() {
return(
<View>
<Text>Hello world!</Text>
</View>
);
}
}
通常用于处理状态（Redux，MobX）和不依赖于UI的大多数插件的库将使用与原始的完全相同的方式，以及适用于反应的大多数模式/最佳实践也适用于原产权。
使用React Native突出本土开发与移动开发之间的重大差异和权衡。
当谈到时，原生有明显的好处 移动应用程序开发:
- 原生允许跨平台开发：应用逻辑使用相同的语言（JavaScript）编写一次，可以部署到可用的目标平台（iOS，Android和UWP）。本地为特定平台编写应用程序需要在将所述应用程序移植到不同的平台时几乎完全重写。
- 原生应用程序，具有一些限制（见下文），以JavaScript编写。这可以是一个加号或减去根据情况，但通常，找到与JavaScript经验丰富的开发人员并不像其他语言那么难。
- 热重新加载是一个很大的反应本机构功能，允许开发人员更改应用程序代码并直接在仿真器中看到这些更改，无需重新编译/重新部署。
反应本地是一个强大的选择，特别是考虑到不断增加的用户群和对其的持续改进。但有一些缺点是被认为是：
- 虽然在过去两年中表现一直在稳定地改善，但反应本地仍然显着慢于视觉上等同的天然应用，特别是当应用程序大量使用动画或具有复杂的UI时。
- 某些本机功能不可用直接从React Native使用，并且可能需要在目标平台语言中为每个目标平台编写模块。
- javascript.是一种主流语言，从而广为人知和使用，但它具有一些严重的缺点。编写和维护一个缩放到一定尺寸的JavaScript应用程序可能具有挑战性。
原生 takes the virtual DOM, generated by React based on the interface definition—i.e. the result gotten from calling the render method on the application’s components. It then uses this to generate native code for each of the target platforms.
That means that, for the most part, the developer doesn’t have to worry about platform-specific details and can rely on React Native outputting the right native code based on the situation. For example, if the developer adds a Text component, it will be transformed into a UITextField on iOS, and into a TextView on Android. The same goes for layout definitions: React Native uses flexbox, and that is translated as proper layout definitions specific to the target platform when the application is deployed.
Sometimes the abstraction provided by React Native is available only on some of the target platforms (an example would be the already-mentioned BackHandler). When that’s the case, it is up to the developer to properly make use of the abstraction. A check for the current platform might be necessary:
import {Platform} from 'react-native';
if (Platform.OS == 'ios') {
// iOS-specific code
}
There are some cases where React Native does not provide an abstraction layer over native components or functionalities. In those cases, the developer will have to write a native module, in the target platform’s language. That is done by extending the 反应ContextBaseJavaModule for Android apps, and by implementing the RCTBridgeModule in iOS.
With those modules in place, it’s possible to interact with them from React Native using the endpoints explicitly provided by the modules themselves. We simply annotate methods with @ReactMethod on Android and by exporting classes and methods with RCT_EXPORT_MODULE and RCT_EXPORT_METHOD on iOS:
public class MyModule extends ReactContextBaseJavaModule {
@ReactMethod
public void myMethod() {
// implementation
}
}
@implementation MyModule
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(myMethod)
{
// implementation
}
import {NativeModules} from 'react-native';
// call it like this:
NativeModules.MyModule.myMethod();
在处理原生物的处理状态时有哪些不同的选择？
As it is, React (and thus React Native) does not enforce any kind of global state management. The only patterns available to use for the developer are injecting state into components using props, which are meant to be immutable, and internal component state managed privately through the state property.
涉及全球州管理时有几种选择，越广泛地用于Redux。如果开发人员熟悉READUX对反应，则在使用它在RACK Native上使用它时没有变化。行为完全相同，也是常见的使用模式。
管理全局状态的另一个可用选项是MOBX，它使用观察到和绑定处理状态，LOPPTOUT.js和WPF执行。虽然Redux遵循功能规划范例 - 并且适合那种编程风格，因为这个原因-Mobx可以更容易地接收来自面向对象背景的人。
这两个选项都有效，并且在挑选一个或另一个之前考虑团队的作品很重要。 Redux通常是具有功能规划背景的人的选择，但速度可能是挑战性的。 Mobx提供了一个更平坦的学习曲线，但在应用程序增长到一定尺寸时，它可能会出现问题。
什么是一个干？
一般来说，Thunk是另一个函数返回的函数。它用于在实际需要的结果时推迟计算结果：
function doMyThing() {
return function() {
return "my result";
}
}
该概念对于React（和React Native）开发人员来说很重要，因为它们是用于Redux最受欢迎的中间件之一：Redux-Thunk。允许反应动作，通常只是普通的JavaScript对象，如下所示：
{
type: "MY_ACTION_TYPE",
value: "myvalue"
}
...实际直接调度其他行动，如下所示：
function myActionCreator() {
return function(dispatch, state) {
dispatch(anotherActionCreator());
}
}
还有其他中间件的重复，不会直接公开概念 - 最着名的反应传奇 - 但您的反应本地开发人员候选者非常重要，与上述功能编程概念很舒服。
什么是中间件？它如何在Redux中使用？
Redux中间件是由开发人员提供的函数（从外部模块导入，或直接开发）拦截在达到减速器之前派遣的所有操作，可能会对这些操作进行一些操作，然后之后将它们转发到减速器。
因此，中间件提供了一个钩子，可用于在达到减速器之前在操作之前运行自定义操作。这很重要，以及许多库和扩展（例如，上述Redux-Thunk）将自己作为中间件注册。一块中间件返回一个thunk，因为它是返回函数的函数。
示例中间件实现如下所示：
// middleware that does nothing
const myMiddleware = store => next => action => {
return next(action);
}
Here, store is the application’s store, available from inside the middleware function. That means that store.dispatch is available from inside the middleware, thus making it possible to dispatch more than one action per action received—beware of infinite loops! Then next is a function that returns a function (which will dispatch the action) and expects an action as the parameter.
可以使用以下内容注册上述中间件：
const store = createStore(
myCombinedReducers,
applyMiddleware(myMiddleware, otherMiddleware)
)
衡量您的React Native App开发候选人
这些问题的答案应该让您了解移动应用程序开发候选人舒适地与React Native合作的概念。
当然，这种招聘指南并不意味着遵循详尽的面试，而是作为雇用全职或兼职专家的指导方面 - 通常还有更多的既可以反应本土发展和广泛的应用发展。例如，与JavaScript的专用开发人员非常经验丰富，反应应该能够在任何时候拿起React Native及其概念。
与此同时，有一点与原生发展工作但没有与JavaScript或本机发展的广泛体验可能知道上述问题的答案，但并非非常有效地作为React Native App Developer。与生活中的其他一切一样，您的里程可能会有所不同。祝你好运！
