Bộ câu hỏi phỏng vấn React Native phần 1

Điểm khác biệt giữa React và React Native?


  • ReactJs là một thư viện JavaScript được sử dụng để phát triển các ứng dụng trong HTML5 sử dụng JavaScript.
  • React Native được sử dụng để phát triển các ứng dụng di động sử dụng JavaScript.

React native có phải là một ứng dụng mobile native không?


Một ứng dụng React native là một ứng dụng mobile "thật sự":

  • Với React native, bạn không phải xây dựng 1 "mobile web app", hoặc 1 "HTML5 app", hoặc 1 "hybrid app". Bạn thật sự xây dựng ra 1 ứng dụng mà không thể phân biệt được ứng dụng nào được xây dựng bằng React native, ứng dụng nào được xây dựng bằng Objective-C hoặc Java.
  • React native sử dụng các khối giao diện cơ bản tương tự như các ứng dụng iOS và Android.

Chúng ta có thể sử dụng native code trong react native không?


Có thể, chúng ta có thể dùng native code bên cạnh javascript để hoàn thành các tính năng của chúng ta. Do đó các giới hạn trong các nền tảng trước đây như Titanium sẽ không còn nữa.

Chúng ta có thể sử dụng cùng một code cho Android và iOS không?


Có, chúng ta sử dụng cùng một code cho Android và iOS và React native sẽ giữ vai trò chuyển đổi giữa các native components. Ví dụ: một component của RN là ScrollView sử dụng UiScrollView trong iOS và ScrollView trong Android.

Các ứng dụng Hybrid là những ứng dụng mà thực tế chúng chạy chậm hơn so với ứng dụng Native, vậy React native có giống như các ứng dụng Hybrid không?


React native biên dịch ra 1 ứng dụng mobile thật sự và chúng được thiết kế cho hiệu suất cao, 1 ví dụ tốt về hiệu suất cao là ứng dụng Facebook trên iOS, nó sử dụng RN và iOS làm cho người dùng thấy được rằng ứng dụng Facebook hoạt động trơn tru như thế nào trên các thiết bị iOS.

Bạn có biết những ứng dụng mobile nào đang sử dụng React native không?


Có hàng ngàn ứng dụng đang dùng React native. Một số công ty lớn đang sử dụng React native là:

  • Facebook
  • Facebook Ads Manager
  • Instagram
  • F8
  • Airbnb
  • Skype
  • Tesla

Liệt kê các bước tạo và chạy 1 ứng dụng React native?


Các bước như sau:

  • npm install -g create-react-native-app // Installs create native app
  • create-react-native-app AwesomeProject // Create a project named AwesomeProject
  • cd AwesomeProject
  • npm start

StyleSheet.create dùng để làm gì?


Phương thức StyleSheet.create đảm bảo rằng các giá trị không thể nhìn thấy và không thay đổi được. Chúng cũng chỉ được tạo 1 lần.

XHR Module dùng để làm gì trong React native?


XHR Module thường được dùng để thực hiện các XMLHttpRequest để gửi dữ liệu về server.

Liệt kê một số core components của React native?


  • Text
  • Image
  • View
  • TextInput
  • ListView

Virtual DOM hoạt động như thế nào trong React native?


React native tạo ra 1 bộ nhớ đệm (cache) dữ liệu trong bộ nhớ (memory), tính toán ra các kết quả khác nhau, sau đó cập nhật hiển thị DOM 1 cách hiệu quả. Điều này cho phép các developers viết code như thể toàn bộ trang được render trong mỗi lần thay đổi nhưng thực tế chỉ render các components bị thay đổi.

Sự khác nhau giữa việc sử dụng Constructor và getInitialState trong React Native?


2 phương pháp này không thể dùng thay cho nhau, nghĩa là không thể dùng phương pháp này thay cho phương pháp kia. Bạn nên khởi tạo state trong Constructor khi sử dụng các class ES6, bằng phương thức getInitialState khi dùng React.createClass.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      /* initial state */
    };
  }
}

//tương tự với

var MyComponent = React.createClass({
  getInitialState() {
    return {
      /* initial state */
    };
  },
});

1 prop là gì?


Hầu hết các components có thể được tùy chỉnh khi chúng được tạo ra cùng với các parameters khác nhau. Những parameters này được gọi là props. Ví dụ, 1 component React Native cơ bản là Image, khi bạn tạo 1 image, bạn sử dụng 1 prop tên là source để quản lý image đó show như thế nào

import React, { Component } from "react";
import { AppRegistry, Image } from "react-native";

export default class Bananas extends Component {
  render() {
    let pic = {
      uri: "https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg",
    };
    return <Image source={pic} style={{ width: 193, height: 110 }} />;
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent("AwesomeProject", () => Bananas);

Chú ý rằng {pic} được bao quanh bởi {}, để nhúng biến pic vào JSX (JavascriptXML). Bạn có thể đặt bất kỳ biểu thức JS nào vào bên trong dấu ngoặc nhọn {} trong JSX.

Các components riêng của bạn cũng có thể dùng props. Điều này cho phép bạn tạo 1 single component có thể được sử dụng ở bất kỳ đâu trong ứng dụng của bạn với các thuộc tính khác nhau trong mỗi nơi. Ví dụ:

import React, { Component } from "react";
import { AppRegistry, Text, View } from "react-native";

class Greeting extends Component {
  render() {
    return <Text>Hello {this.props.name}!</Text>;
  }
}

export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{ alignItems: "center" }}>
        <Greeting name="Rexxar" />
        <Greeting name="Jaina" />
        <Greeting name="Valeera" />
      </View>
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent("AwesomeProject", () => LotsOfGreetings);
Avatar Techmely Team
VIẾT BỞI

Techmely Team