Lấy đầu xung quanh phản ứng với năm yếu tố này

Học phản ứng, thư viện JavaScript để tạo giao diện người dùng từ Facebook và Instagram có vẻ là các loại hạt cho đến khi bạn cho nó một cơ hội. Mọi thứ trở nên dễ dàng hơn nhiều khi bạn hiểu năm khái niệm chính. Tôi gọi đây là năm ca tâm trí. Chúng là: Các thành phần, JSX, trạng thái, phương thức vòng đời và luồng dữ liệu một chiều.

01. Linh kiện

Các thành phần là các khối mã có thể được kết hợp để cung cấp chức năng phức tạp hơn. Khi bạn chia ứng dụng của mình thành các thành phần, nó giúp cập nhật và bảo trì dễ dàng hơn. Trong phản ứng, các thành phần thậm chí còn quan trọng hơn: bạn không chỉ cần lập trình chúng, bạn thiết kế ứng dụng của mình bằng cách nghĩ về cách các thành phần này phù hợp với nhau.

Hãy sử dụng giao diện bên dưới làm ví dụ. Bạn có thể thấy cách nó có thể được chia thành ba mảnh: một hộp để đặt một cuộc hẹn mới, một chế độ xem danh sách cho phép bạn xem các cuộc hẹn hiện có và một hộp tìm kiếm để xem qua chúng.

Trong HTML, bạn có thể nghĩ về ứng dụng này dưới dạng một loạt các yếu tố, như thế này:

 & lt; div id = "petappointments" & gt;
  & lt; div class = "addAkointmentments" & gt; & lt; / div & gt;
  & lt; div class = "searchappointmentmentments" & gt; & lt; / div & gt;
  & lt; div class = "listappointment" & gt; & lt; / div & gt;
& lt; / div & gt; 

Và đó cũng là những gì bạn làm trong phản ứng. Bạn tạo một thẻ duy nhất (& lt; div id = "petappointments" & gt;) gọi một thành phần petappointments, sau đó gọi các thành phần phụ khác khi cần thiết. Để truyền dọc theo một đối tượng cấu hình như thế này, bạn sử dụng phương thức CreateClass của đối tượng React.

 var MainInterface = React.CreateClass ({
  Render: Chức năng () {
    trở về (
      & lt; div classname = "giao diện" & gt;
        & lt; addAkointment / & gt;
        & lt; searchappointmentments / & gt;
        & lt; listappointments / & gt;
      & lt; / div & gt;
    )
  } // render.
}); //Giao diện chính

Reactdom.render (
  & lt; MainInterface / & GT ;,
  Tài liệu.getelementById ('PetAppointments')
); // render 

Có hai phương thức kết xuất. Trong lớp kết hợp chính, chúng tôi khai báo các mục sẽ được gửi đến trình duyệt và phương thức ReActdom.render thay thế & lt; div id = "petappointments" & gt; & lt; / div & gt; Yếu tố trong HTML của bạn với mã của React. Sau đó, chúng tôi sẽ viết mã xử lý từng bộ phận phụ của chúng tôi.

Các thành phần làm cho mã dễ dàng để viết và duy trì. Khi bạn học cách suy nghĩ và sắp xếp các ứng dụng của mình như một loạt các thành phần có thể xảy ra, việc xây dựng các ứng dụng phức tạp trở nên đơn giản hơn.

02. JSX.

Jsx. Có lẽ là một trong những sự thay đổi tâm trí lớn nhất và một trong những lý do tại sao thư viện có vẻ kỳ lạ như vậy. JSX là một phần mở rộng cho JavaScript cho phép bạn kết hợp mã XML bằng JavaScript.

Đây là loại những gì xảy ra với các ngôn ngữ Mẫu như Mustache, cho phép bạn bao gồm JavaScript trong HTML. Nhưng JSX được dịch (transpiled) vào JavaScript. Vì vậy, bạn không chỉ xây dựng một mẫu mà là một cấu trúc được chuyển đổi thành một loạt các câu lệnh JavaScript. Không giống như các ngôn ngữ Templating, nó không phải được giải thích trong thời gian chạy. Hãy xem xét một ví dụ.

 & lt; li className = "Media-Item" Key = {index} & gt;
  & lt; div classname = "Pet-Info Media-Body" & GT;
    & lt; div classname = "Pet-Head" & GT;
      & lt; span classname = "tên thú cưng" & gt; {this.state.data [index] .petname} & lt; / span & gt;
      & lt; span classname = "apt-date pull-right" & gt; {this.state.data [index] .aptdate} & lt; / span & gt;
    & lt; / div & gt;
    & lt; div classname = "chủ sở hữu" & gt; & lt; span classname = "nhãn-mục" & gt; chủ sở hữu: & lt; / span & gt;
    {this.state.data [index] .Onname} & lt; / div & gt;
    & lt; div classname = "apt-notes" & gt; {this.state.data [index]. aptnotes} & lt; / div & gt;
  & lt; / div & gt;
& lt; / li & gt; 

Chúng ta có thể sử dụng mã này để xuất các cuộc hẹn của chúng tôi. Điều này cảm thấy rất giống như sử dụng một ngôn ngữ templating thông thường, vì vậy khác với việc học một vài bình dị nhỏ về JSX, bạn có thể nhanh chóng nhận nó.

Phần lẻ về việc sử dụng JSX không học ngôn ngữ; Nó sẽ vượt qua thực tế rằng việc đặt HTML trong mã JavaScript của bạn có vẻ như ... tốt, sai. Nhưng thật tuyệt khi có tất cả các mã cho mỗi thành phần sống ở một nơi duy nhất.

03. Bang.

Sự thay đổi tâm trí thứ ba là học cách làm việc với nhà nước trong phản ứng. Tiểu bang được lưu trữ trên thành phần trên cùng của ứng dụng của bạn và quản lý những gì đang xảy ra trong ứng dụng của bạn. Có một phương thức đặc biệt có tên GetInitIlialState nơi bạn có thể định cấu hình những gì xảy ra khi ứng dụng của bạn bắt đầu.

Trong ứng dụng mẫu của tôi, trạng thái ban đầu được thiết lập như thế này:

 var MainInterface = React.CreateClass ({
  getInitialState: Chức năng () {
    trở về {
      aptbodyvisible: sai,
      Orderby: 'Petname',
      orderdir: 'asc',
      QueryText: ''
    } //trở về
  }, // getInitialState 

Có vẻ như tôi đang thiết lập các biến toàn cục cho ứng dụng của mình nhưng sửa đổi các biến này thực sự kiểm soát cách các thành phần kết xuất. Nếu một cái gì đó trong ứng dụng của tôi thay đổi giá trị của một biến, các thành phần của tôi sẽ kết xuất lại. Nếu giá trị của Orderby thay đổi, ví dụ, danh sách các cuộc hẹn sẽ sắp xếp lại.

Khi bạn viết một thành phần, thật dễ dàng để sửa đổi trạng thái của ứng dụng. Các thành phần viết dễ dàng hơn vì bạn chỉ tập trung vào những gì thành phần làm. Đây là thành phần danh sách cuối cùng của ứng dụng của tôi:

 Var React = yêu cầu ('phản ứng');
var aptlist = hectact.createclass ({

  HandleDelete: Chức năng () {
    this.props.ondelete (this.props.whichitem)
  },

  Render: Chức năng () {
    trở về(
      & lt; li classname = "phương tiện vật nuôi" & gt;
        & lt; div classname = "phương tiện truyền thông-trái" & gt;
          & lt; nút classname = "pet-xóa btn btn-xs btn-nguy hiểm" onclick = {this.handledelete} & gt;
          & lt; span classname = "glyphicon glyphicon-loại bỏ" & gt; & lt; / span & gt; & lt; / nút & gt;
        & lt; / div & gt;
        & lt; div classname = "Pet-Info Media-Body" & GT;
          & lt; div classname = "Pet-Head" & GT;
            & lt; span classname = "Tên thú cưng" & gt; {this.props.singleitem.petname} & lt; / span & gt;
            & lt; span classname = "apt-date pull-right" & gt; {this.props.singleitem.aptdate} & lt; / span & gt;
          & lt; / div & gt;
          & lt; div classname = "chủ sở hữu" & gt; & lt; span classname = "nhãn-mục" & gt; chủ sở hữu: & lt; / span & gt;
          {this.props.singleitem.owname} & lt; / div & gt;
          & lt; div classname = "apt-notes" & gt; {this.props.singleitem.apsnotes} & lt; / div & gt;
        & lt; / div & gt;
      & lt; / li & gt;
    ) // trở về
  } // render.
}); // aptlist.

mô-đun.exports = aptlist; 

Các thành phần chỉ quan tâm đến hai điều. Đầu tiên, hiển thị danh sách các cuộc hẹn dựa trên trạng thái hiện tại của ứng dụng. Thứ hai, xử lý một cú nhấp chuột vào một trong những màu đỏ 'X.

Nhấp vào 'X' sẽ đẩy thay đổi trạng thái ứng dụng, khiến thành phần này kết xuất lại. Tôi không lo lắng về những gì đang xảy ra với dữ liệu, chỉ đơn giản với cách dữ liệu hiện tại sẽ được hiển thị.

Thành phần danh sách chỉ liên quan đến việc liệt kê mọi thứ. Nó không phải lo lắng về những gì đang xảy ra ở nơi khác. Đó là một cách tuyệt vời để xây dựng các ứng dụng và một khi bạn có được sự treo cổ của nó, bạn sẽ thấy lý do tại sao đó là một cách vượt trội để mã.

04. Luồng dữ liệu một chiều

Sự thay đổi tâm trí tiếp theo là học cách yêu thích dòng dữ liệu một chiều. Trong phản ứng, trạng thái của ứng dụng của bạn nằm trong thành phần trên cùng. Khi bạn cần thay đổi nó trong một thành phần phụ, bạn tạo một tham chiếu đến thành phần trên cùng và xử lý nó ở đó. Điều này hơi khó để làm quen. Đây là một ví dụ:

 Var React = yêu cầu ('phản ứng');
var aptlist = hectact.createclass ({
  HandleDelete: Chức năng () {
    this.props.ondelete (this.props.whichitem)
  },
  Render: Chức năng () {
    trở về(
      & lt; li classname = "phương tiện vật nuôi" & gt;
        & lt; div classname = "phương tiện truyền thông-trái" & gt;
          & lt; nút classname = "pet-xóa btn btn-xs btn-nguy hiểm" onclick = {this.handledelete} & gt;
          & lt; span classname = "glyphicon glyphicon-loại bỏ" & gt; & lt; / span & gt; & lt; / nút & gt;
        & lt; / div & gt;
      & lt; / li & gt;
      ...
    ) // trở về
  } // render.
}); // aptlist.

mô-đun.exports = aptlist; 

Đây là phiên bản đơn giản hóa của mô-đun tạo một danh sách các cuộc hẹn. Danh sách của chúng tôi có một nút xóa, chúng tôi quản lý thông qua trình xử lý sự kiện. Đây là một phiên bản phản ứng đặc biệt của onclick. Trình xử lý sự kiện của chúng tôi gọi hàm HandleDelete, địa phương đến mô-đun phụ. Hàm cục bộ của chúng tôi chỉ đơn giản là tạo một tham chiếu đến một chức năng khác trong một đối tượng được gọi là đạo cụ. Đạo cụ là cách các mô-đun chính giao tiếp với các mô-đun phụ.

Trong mô-đun chính, bạn sẽ tạo một thuộc tính vào thẻ bạn đang sử dụng để thể hiện mô-đun. Nó trông giống như truyền một thuộc tính cho thẻ HTML:

 & lt; aptlist ondelete = {this.deletemessage} / & gt; 

Và sau đó, bạn tạo phương thức của riêng mình trong thành phần chính để xử lý sự thay đổi trạng thái của ứng dụng. Giữ trạng thái trong mô-đun chính giúp làm cho các mô-đun phụ của bạn hiệu quả hơn. Nó cũng dễ dàng hơn để duy trì mã vì hầu hết các hành động xảy ra ở một nơi.

05. Phương pháp vòng đời

Một trong những điều tốt nhất về React là cách nó quản lý kết xuất các mô-đun của bạn. Các mô-đun của bạn không phải lo lắng về việc cập nhật DOM, chỉ về phản ứng với trạng thái của ứng dụng của bạn. Khi trạng thái thay đổi, phản ứng lại kết xuất các thành phần của ứng dụng của bạn. Nó thực hiện điều này bằng cách tạo phiên bản riêng của DOM được gọi là DOM ảo.

Nhưng đôi khi bạn cần có khả năng làm mọi việc để đáp ứng với cuộc sống kết xuất. Nhập các phương thức vòng đời. Đây là những cách để yêu cầu phản ứng để xử lý các nhiệm vụ tại các điểm khác nhau trong thực thi của ứng dụng.

Ví dụ, có các phương thức LifeCyle cho phép bạn tải dữ liệu ngoài thông qua các yêu cầu Ajax:

 Thành phầnDIDMOUNT: Hàm () {
  this.serverrequest = $ .get ('./ js / data.json', hàm (kết quả) {
    var tempapts = kết quả;
    this.setstate ({
      MyAppointments: Tempapts.
    }); // setstate.
  } .bind (này));
}, // ComponentDidMount 

Ở đây, ComponentDidMount cho phép bạn thực hiện một cái gì đó sau khi kết xuất ban đầu hoàn tất. Đây là một nơi tuyệt vời để tải nội dung Ajax, thiết lập bộ hẹn giờ, v.v. Có rất nhiều phương thức vòng đời khác cho phép bạn bẫy việc thực hiện ứng dụng ở các điểm khác nhau. Chúng là cần thiết vì Virtual Dom của React, là một thời gian tuyệt vời khi xây dựng ứng dụng.

Suy nghĩ lại phản ứng

React yêu cầu suy nghĩ lại về cách bạn làm việc với các ứng dụng web nhưng nếu bạn tập trung vào việc thành thạo các lợi ích của năm ca tâm trí này, bạn sẽ nhanh chóng tìm hiểu lý do tại sao thư viện trở nên cực kỳ phổ biến và là một cách tuyệt vời để xây dựng các giao diện.

Bài viết này - được minh họa bởi Ray Villalobos - ban đầu được xuất bản vào ngày 286 của Net, tạp chí bán chạy nhất thế giới cho các nhà thiết kế và nhà phát triển web. Đăng ký mạng lưới .

Bạn muốn tinh chỉnh thêm kỹ năng phản ứng của bạn?

Nếu bạn quan tâm đến việc tìm hiểu thêm về phản ứng, hãy chắc chắn rằng bạn đã chọn vé của mình cho Tạo London từ 19-21 tháng 9 năm 2018 . Đã thành lập Học viện Pheact để dạy phản ứng trên toàn thế giới và ra mắt sizzy.co. và ok-google.io. , Kristijan Ristovski sẽ giao xưởng của mình - tìm hiểu cách nghĩ trong việc phản ứng - trong đó anh ta sẽ khám phá các thực tiễn tốt nhất và dạy bạn giải pháp cho những vấn đề thực sự mà bạn có thể gặp phải trong quá trình xây dựng một ứng dụng.

Tạo London diễn ra từ ngày 19-21 tháng 9 năm 2018. Nhận vé của bạn bây giờ .

Những bài viết liên quan:

• 10 Lời khuyên của Expert Reactjs mà bạn cần biết ngày hôm nay
• Tạo một ứng dụng bảng điều khiển với phản ứng
• Xây dựng một trình phát nhạc đơn giản với React