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

State là gì?

• State (trạng thái) hoạt động khác với Props. State là thành phần của component, trong khi các props lại được truyền giá trị từ bên ngoài vào component.
• State và Props là 2 loại dữ liệu dùng để quản lý 1 component.
• "State có thể thay đổi", trong tiếng Anh, ‘state of a being’ là chỉ đến tình trạng thể chất của một người, và nó là một trạng thái đơn thuần, thay đổi theo thời gian. Tương tự trong ReactJS và React Native, State được sử dụng trong các component để theo dõi thông tin.
• Hãy nhớ rằng không cập nhật state trực tiếp bằng cách sử dụng this.state. Luôn sử dụng phương thức setState để cập nhật state của các đối tượng. Sử dụng setState để re-renders một component và tất cả các component con.

Bạn có thể set state khi nào bạn có dữ liệu mới từ server, hoặc từ user nhập vào.

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

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = { isShowingText: true };

    // Toggle the state every second
    setInterval(() => {
      this.setState((previousState) => {
        return { isShowingText: !previousState.isShowingText };
      });
    }, 1000);
  }

  render() {
    let display = this.state.isShowingText ? this.props.text : " ";
    return <Text>{display}</Text>;
  }
}

export default class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text="I love to blink" />
        <Blink text="Yes blinking is so great" />
        <Blink text="Why did they ever take this out of HTML" />
        <Blink text="Look at me look at me look at me" />
      </View>
    );
  }
}

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

Khi nào bạn sử dụng 1 class component thay vì 1 functional component?

Nếu component của bạn có state hoặc các lifecycle method, sử dụng 1 class component, ngược lại, dùng 1 functional component.

Refs là gì và tại sao chúng quan trọng?

Theo tài liệu của React, refs được sử dụng để lấy tham chiếu đến một node DOM(Document Object Model) hoặc có thể là một thể hiện của một component trong một ứng dụng React, tức là refs sẽ return về một node mà chúng ta tham chiếu đến.

Để sử dụng chúng bạn thêm 1 thuộc tính refs vào component của bạn, ví dụ:

class UnControlledForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value);
  };
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={(input) => (this.input = input)} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

Keys là gì và tại sao chúng quan trọng?

Keys giúp React theo dõi những item nào được thay đổi, được thêm vào hoặc được xóa khỏi 1 list.

render () {
  return (
    <ul>
      {this.state.todoItems.map(({task, uid}) => {
        return <li key={uid}>{task}</li>
      })}
    </ul>
  )
}

Keys quan trọng là vì giá trị key là duy nhất để phân biệt 1 item với các item khác.

Bạn thực hiện các request AJAX trong Lifecycle event nào và tại sao?

Các request AJAX nên được thực hiện trong componentDidMount lifecycle event, bởi vì:

• Việc thực hiện các thuật toán đối chiếu sự thay đổi của React có khả năng bắt đầu và ngừng render khi thấy cần thiết cho hiệu suất. Một trong các sự quản lý việc này là sự kiện componentWillMount, là 1 lifecycle event khác có thể thực hiện 1 request AJAX, là "non-deterministic", nghĩa là React có thể gọi componentWillMount vào những thời điểm khác nhau bất cứ khi nào nó cảm thấy cần, điều này rõ ràng là không tốt cho các request AJAX.
• Bạn không thể đảm bảo các request AJAX sẽ được giải quyết sau khi component được gắn kết, điều đó có nghĩa là bạn đang cố dùng setState trên 1 component chưa được gắn kết, không những nó không hoạt động mà React còn báo lỗi cho bạn. Thực hiện 1 request AJAX trong componentDidMount sẽ đảm bảo điều đó.

Có bao nhiêu threads chạy trong React native?

2 theads, Javascript thead và main UI thread. Javascrip thread chạy trong thread riêng của nó, tách biệt so với main UI thread. Khi ứng dụng của bạn chạy 1 logic phức tạp, UI của bạn vẫn chạy mượt mà ngay cả khi chúng animating hoặc scrolling, bởi vì UI không bị block bởi JS thread.

Khi nào componentWillRecieveProps được gọi?

Khi các new props được pass vào component đó.