Tại sao dùng bind trong react

render() {
  return <div>
    <h2>Hello!</h2> {messages.length > 0 &&
      <h2>You have {messages.length} unread messages.</h2>
  </div>
}

Controlled component trong React là gì?

Một ReactJS component kiểm soát các phần tử đầu vào trong các biểu mẫu của người dùng được gọi là controlled component. Tức là mọi thay đổi state sẽ có một hàm xử lý liên quan.

Ví dụ, để viết tất cả các tên bằng chữ hoa, chúng ta sử dụng hàm handleChange như bên dưới,

handleChange(event) {
  this.setState({
    value: event.target.value.toUpperCase(),
  });
};

Fragment trong React là gì?

Đó là mẫu phổ biến (common pattern) trong React được sử dụng cho một component để trả về nhiều element. Các fragment cho phép chúng ta nhóm một danh sách con mà không cần thêm các nút phụ vào DOM.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Ngoài ra còn có một cú pháp ngắn hơn thường được sử dụng:

render() {
  return (
   <>
    <ChildA />
    <ChildB />
    <ChildC />
   </>
 );
}

Mục đích của việc sử dụng super(props) trong constructor của React component?

Một phương thức constructor class con không thể sử dụng tham chiếu this cho đến khi phương thức super() được gọi. Lý do chính của việc truyền tham số props vào lệnh gọi super() là để truy cập this.props trong các hàm constructor con của bạn.

Truyền vào props:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props); // ví dụ sẽ in ra { name: 'sudheer',age: 30 }
  }
}

Không truyền vào props:

class MyComponent extends React.Component {
  constructor(props) {
    super();
    console.log(this.props); // in ra undefined
    // Nhưng props vẫn tồn tại

    console.log(props); // in ra { name: 'sudheer',age: 30 }
  }
  render() {
    // không có sự khác nhau bên ngoài contructor
    console.log(this.props); // in ra { name: 'sudheer',age: 30 }
  }
}

Các đoạn mã trên cho thấy rằng hành vi this.props chỉ khác với trong hàm contructor. Nó sẽ giống nhau bên ngoài hàm contructor.

Flow là gì?

• Flow là một trình kiểm tra kiểu tĩnh (static type), được thiết kế để tìm ra lỗi về type trong các chương trình JavaScript, do Facebook tạo ra.
• Các Flow có thể thể hiện sự khác biệt rõ ràng hơn nhiều so với các hệ thống kiểu truyền thống. Ví dụ: Flow giúp bạn bắt lỗi liên quan đến null, không giống như hầu hết các hệ thống loại.

State trong Reactjs là gì?

State của một component là một object chứa một số thông tin có thể thay đổi trong suốt thời gian tồn tại của component. Chúng ta nên cố gắng làm cho state của mình càng đơn giản càng tốt và giảm thiểu số lượng các stateful component.

class User extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: "Welcome to React world",
    };
  }
  render() {
    return (
      <div>
        <h2>{this.state.message}</h2>
      </div>
    );
  }
}

Làm sao để tạo các ref trong ReactJS?

Refs được tạo bằng phương thức React.createRef() và được gắn vào các React element qua thuộc tính ref. Để sử dụng các ref trong toàn bộ component, chỉ cần gán ref này tới 1 property trong constructor.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

và:

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

Chúng ta cũng có thể sử dụng nó trong các functional component với sự trợ giúp của closure.

Làm thế nào để truyền một parameter vào một event handler hoặc callback?

Bạn có thể sử dụng arrow function để bao quanh một event handler và truyền các tham số:

<button onClick={() => this.handleClick(id)} />

hoặc sử dụng .bind:

<button onClick={this.handleClick.bind(this, id)} />