Sử dụng đúng các hàm mũi tên trong React – hàm mũi tên lớp phản ứng

Bạn đang xem : hàm mũi tên lớp phản ứng

Tôi hiểu rằng các hàm mũi tên làm cho mọi thứ hiệu quả hơn bằng cách không
tạo lại các chức năng mỗi khi chúng được đề cập đến

Điều này không đúng .

Các hàm mũi tên xử lý ngữ cảnh this theo cách từ vựng, trong đó hàm “normal” thực hiện động . Tôi đã viết chuyên sâu về từ khóa này nếu bạn cần thêm thông tin về nó.

Trên cả hai ví dụ của bạn về hàm mũi tên nội tuyến, bạn đang tạo một phiên bản hàm mới trên mỗi kết xuất .
Thao tác này sẽ tạo và chuyển một phiên bản mới trên mỗi lần hiển thị

  onClick = {() = & gt; {}}
 

Trong ví dụ thứ 3, bạn chỉ có một trường hợp.
Điều này chỉ chuyển một tham chiếu đến một phiên bản đã tồn tại

  onClick = {this.myHandler}
 

Đối với lợi ích của các hàm mũi tên dưới dạng các trường lớp (có một phía dưới nhỏ , tôi sẽ đăng nó ở dưới cùng của câu trả lời), nếu bạn có một trình xử lý hàm bình thường cần truy cập hiện tại phiên bản của class qua this :

  myHandler () {
  // this.setState (...)
}
 

Về lợi ích của các hàm mũi tên dưới dạng trường lớp (có a, tôi sẽ đăng nó ở cuối câu trả lời), nếu bạn có một trình xử lý hàm bình thường cần truy cập phiên bản hiện tại của thevia

Bạn cần phải ràng buộc nó với lớp một cách rõ ràng.
Cách tiếp cận phổ biến nhất sẽ là thực hiện nó trong constructor vì nó chỉ chạy một lần:

  constructor (props) {
  siêu (đạo cụ);
  this.myHandler = this.myHandler.bind (this);
}
 

Nếu bạn sử dụng hàm mũi tên làm trình xử lý, bạn không cần phải ràng buộc nó với lớp vì như đã đề cập ở trên, hàm mũi tên sử dụng từ vựng ngữ cảnh cho this :

  myHandler = () = & gt; {
  // this.setState (...)
}
 

Với cả hai cách tiếp cận, bạn sẽ sử dụng trình xử lý như sau:

  & lt; div onClick = {this.myHandler} & gt; & lt; / div & gt;
 

Lý do chính để thực hiện phương pháp này:

  & lt; div onClick = {() = & gt; this.myHandler (someParameter)} & gt; & lt; / div & gt;
 

Là nếu bạn muốn chuyển các tham số cho trình xử lý bên cạnh event gốc được truyền, nghĩa là bạn muốn chuyển một tham số lên trên.

Xem Thêm  Làm thế nào để làm toán trong JavaScript với các toán tử - các phép toán trong javascript

Như đã đề cập, điều này sẽ tạo một phiên bản hàm mới trên mỗi lần hiển thị.
(Có một cách tiếp cận tốt hơn cho việc này, hãy tiếp tục đọc).

Ví dụ đang chạy cho trường hợp sử dụng như vậy:

  class Ứng dụng mở rộng React.Component {
  hàm tạo (đạo cụ) {
    siêu (đạo cụ);
    this.state = {
      items: [{name: 'item 1', active: false}, {name: 'item 2', active: true}],
    }
  }
  toggleITem = (itemName) = & gt; {
    this.setState (trước = & gt; {
      const nextState = prev.items.map (item = & gt; {
        if (item.name! == itemName) return item;
        trở về {
          ...mục,
          hoạt động:! item.active
        }
      });
      return {items: nextState};
    });
  }
  kết xuất () {
    const {items} = this.state;
    trở về (
      & lt; div & gt;
        {
          items.map (item = & gt; {
            const style = {color: item.active? 'xanh đỏ' };
            trở về (
              & lt; div
                onClick = {() = & gt; this.toggleITem (item.name)}
                style = {style}
              & gt;
                {Tên mục}
              & lt; / div & gt;
          
          )})
        }
      & lt; / div & gt;
    );
  }
}

ReactDOM.render (& lt; App / & gt ;, document.getElementById ('root'));  
  & lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min .js "& gt; & lt; / script & gt;
& lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js" & gt; & lt; / script & gt;
& lt; div id = "root" & gt; & lt; / div & gt;  

Một cách tiếp cận tốt hơn là tạo bố cục thành phần.
Bạn có thể tạo một thành phần con bao bọc đánh dấu có liên quan, sẽ có trình xử lý riêng của nó và sẽ nhận được cả data handler làm đạo cụ từ cha mẹ.

Sau đó, thành phần con sẽ gọi trình xử lý mà nó nhận được từ thành phần mẹ và sẽ chuyển data làm tham số.

Chạy ví dụ với thành phần con:

 class Item mở rộng React.Component {
  onClick = () = & gt; {
    const {onClick, name} = this.props;
    onClick (tên);
  }
  kết xuất () {
    const {name, active} = this.props;
    const style = {color: active? 'xanh đỏ' };
    return (& lt; div style = {style} onClick = {this.onClick} & gt; {name} & lt; / div & gt;)
  }
}

class App mở rộng React.Component {
  hàm tạo (đạo cụ) {
    siêu (đạo cụ);
    this.state = {
      items: [{name: 'item 1', active: false}, {name: 'item 2', active: true}],
    }
  }
  toggleITem = (itemName) = & gt; {
    this.setState (trước = & gt; {
      const nextState = prev.items.map (item = & gt; {
        if (item.name! == itemName) return item;
        trở về {
          ...mục,
          hoạt động:! item.active
        }
      });
      return {items: nextState};
    });
  }
  kết xuất () {
    const {items} = this.state;
    trở về (
      & lt; div & gt;
        {
          items.map (item = & gt; {
            return & lt; Item {... item} onClick = {this.toggleITem} / & gt;
          })
        }
      & lt; / div & gt;
    );
  }
}

ReactDOM.render (& lt; App / & gt ;, document.getElementById ('root'));  
  & lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min .js "& gt; & lt; / script & gt;
& lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js" & gt; & lt; / script & gt;
& lt; div id = "root" & gt; & lt; / div & gt;  

Trường lớp ở phía dưới :
Như tôi đã đề cập, có một phần nhỏ dành cho các trường lớp.
Sự khác biệt giữa phương thức lớp và trường lớp là trường lớp được gắn với instance của class (hàm tạo).
nơi mà các phương thức và đối tượng của lớp được gắn vào nguyên mẫu.

Xem Thêm  Tìm hiểu SQL: CHÈN VÀO BẢNG - chèn vào truy vấn bảng

Do đó, nếu bạn có một lượng lớn các phiên bản của lớp này, bạn có thể sẽ nhận được thành công về hiệu suất.

Đưa ra khối mã này:

  lớp MyClass {
  myMethod () {}
  myOtherMethod = () = & gt; {}
}
 

babel sẽ chuyển nó thành điều này:

  var _createClass = function () {
  function defineProperties (target, props) {
    for (var i = 0; i & lt; props.length; i ++) {
      var descriptor = props [i];
      descriptor.enumerable = descriptor.enumerable || sai;
      descriptor.configurable = true;
      if ("giá trị" trong descriptor) descriptor.wlike = true;
      Object.defineProperty (target, descriptor.key, descriptor);
    }
  }
  hàm trả về (Constructor, protoProps, staticProps) {
    if (protoProps) defineProperties (Constructor.prototype, protoProps);
    if (staticProps) defineProperties (Constructor, staticProps);
    return Constructor;
  };
} ();

function _classCallCheck (instance, Constructor) {
  if (! (instance instanceof Constructor)) {
    ném mới TypeError ("Không thể gọi một lớp dưới dạng một hàm");
  }
}

var MyClass = function () {
  function MyClass () {
    _classCallCheck (this, MyClass);

    this.myOtherMethod = function () {};
  }

  _createClass (MyClass, [{
    key: "myMethod",
    value: function myMethod () {}
  }]);

  trả về MyClass;
} ();
 


Xem thêm những thông tin liên quan đến chủ đề hàm mũi tên lớp phản ứng

218 – JavaScript – for loop, arrow function. Vòng lặp for, hàm mũi tên

  • Tác giả: Code là Ghiền
  • Ngày đăng: 2020-02-07
  • Đánh giá: 4 ⭐ ( 5552 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: for loop, arrow function. Vòng lặp for, hàm mũi tên

    017 – Học ngôn ngữ HTML trong vài nốt nhạc !
    https://www.youtube.com/watch?v=qTbV7ttHY60

    020 – Học CSS trong vòng vài nốt nhạc !
    https://www.youtube.com/watch?v=CCblyCijy5s

    Background Music:
    Bolereando
    Quincas Moreira

Cách chèn, viết biểu tượng mũi tên (↑↓←↕↔→↘↗↙↖) trong Word

  • Tác giả: quantrimang.com
  • Đánh giá: 3 ⭐ ( 8199 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Biểu tượng mũi tên thường hay sử dụng trong Word. Vậy làm sao để chèn biểu tượng mũi tên trong Word?

Hoàn thành sơ đồ phản ứng sau (mỗi mũi tên ứng với một phương trình hóa học): N a →…

  • Tác giả: hoc24.vn
  • Đánh giá: 4 ⭐ ( 6499 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hoàn thành sơ đồ phản ứng sau (mỗi mũi tên ứng với một phương trình hóa học):

    N

    a

    →…

Cho sơ đồ chuyển hóa sau (mỗi mũi tên là một phương trình phản ứng): Tinh bột \( \to X \to Y \to Z \to \) metyl axetat. Các chất Y, Z trong sơ đồ trên lần lượt là:

  • Tác giả: hoc247.net
  • Đánh giá: 5 ⭐ ( 7898 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Không thể sử dụng các hàm Mũi tên bên trong lớp thành phần React [trùng lặp]

  • Tác giả: isolution.pro
  • Đánh giá: 4 ⭐ ( 8144 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hiểu các mũi tên phản ứng hóa học

  • Tác giả: www.greelane.com
  • Đánh giá: 5 ⭐ ( 6661 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Phản ứng hóa học được viết với các mũi tên biểu thị một phản ứng bắt đầu với một thứ, sau mũi tên và trở thành một thứ khác.

Hàm mũi tên trong JavaScript

  • Tác giả: helpex.vn
  • Đánh giá: 4 ⭐ ( 6817 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các hàm mũi tên là tính năng mạnh nhất trong ES6, đặc biệt là trong TypeScript. Hãy xem xét một ví dụ đơn giản về điều này bằng cách sử dụng vòng lặp forEach. //Normal Statement with a…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách căn giữa văn bản theo chiều dọc với CSS - văn bản trung tâm css theo chiều dọc trong div