Sự khác biệt giữa Bootstrap và React

Bạn cũng có thể nhận thấy rằng chúng tôi phải thêm thẻ tự đóng (/) vào tất cả các thẻ đầu vào. Điều này là do trong JSX tất cả các thẻ phải có thẻ đóng hoặc tự đóng. Bây giờ hãy xem chính xác thành phần đó trông như thế nào trong React-Bootstrap

import React from 'react';
import { Form, Col, Button } from 'react-bootstrap';


const ReactWithReactBootstrap = () => {
  return (
    

      
        
          Email
          
        


        
          Password
          
        
      


      
        Address
        
      


      
        Address 2
        
      


      
        
          City
          
        


        
          State
          
            Choose...
            ...
          
        


        
          Zip
          
        
      


      
        
      


      
        Submit
      
    
  );
};


export default ReactWithReactBootstrap;

Bây giờ điều đó được cho là tốt hơn nhiều so với "div-hell" mà chúng ta có trước đây phải không?

Một điều thú vị khác cần xem xét là chúng tôi hoàn toàn không sử dụng thuộc tính className (mặc dù chúng tôi có thể sử dụng nó nếu chúng tôi muốn chuyển các kiểu của riêng mình). Thay vào đó, React-Bootstrap sử dụng cú pháp khác. Vì vậy, ví dụ nếu chúng ta muốn tạo một hàng linh hoạt có 2 cột trong Bootstrap thì nó sẽ trông như thế này

  
      
        Email
        
      
      
        Password
        
      
   
 

và trong React-Bootstrap nó sẽ như thế này

 
        
          Email
          
        


        
          Password
          
        
     
 

Một lần nữa, đây là một cú pháp "sạch hơn" và nó dễ đọc hơn nhiều. Bạn chắc chắn có thể thấy vị trí hàng bắt đầu và vị trí kết thúc (nhờ các thẻ đóng). Tuy nhiên, nếu bạn chuyển từ thế giới CSS sang lĩnh vực React, bạn có thể cân nhắc ở lại với Bootstrap thuần túy, nếu lý do duy nhất là cú pháp, bởi vì điều này cũng có nghĩa là bạn sẽ phải học một API hoàn toàn mới

Cho nên. React-Bootstrap > Bootstrap?

Trên thực tế, có một số lý do để gắn bó với Bootstrap và không triển khai React-Bootstrap ở mọi nơi

Trước hết, như đã đề cập ở đầu bài viết này, phiên bản mới nhất của Bootstrap là 5 và hãy đoán xem? . phụ thuộc jquery đã được loại bỏ hoàn toàn. Thay vào đó, Bootstrap hiện sử dụng vanilla JavaScript và điều đó thật tuyệt vời đối với các nhà phát triển React vì tất cả các tác động với DOM ảo hiện đã được khắc phục. Bây giờ chúng ta có thể sử dụng tất cả các tính năng mới nhất của Bootstrap trong ứng dụng React mà không phải lo lắng về DOM ảo của Reacts. Với React-Bootstrap, chúng tôi sẽ không thể sử dụng các tính năng mới nhất của BootStrap 5 vì như đã nói, React-Bootstrap chỉ triển khai phiên bản thứ 4 của Bootstrap

Một lý do khác để gắn bó với Bootstrap là tính linh hoạt của dự án của bạn. Nếu bạn muốn thay thế toàn bộ giao diện người dùng của mình bằng giả sử - Vue (mặc dù tôi thực sự không thấy bất kỳ lý do nào để làm điều đó), sẽ đơn giản hơn nhiều nếu bạn sử dụng Bootstrap đơn giản

Cuối cùng, có một vấn đề khác với các thành phần tùy chỉnh của React. Nó không nói riêng về React-Bootstrap, nhưng nó liên quan đến tất cả các thành phần tùy chỉnh của React. Vấn đề là về trường 'ref' của các thành phần tùy chỉnh. Trường ref trong một thành phần tùy chỉnh sẽ đề cập đến chính thành phần đó chứ không phải các khối xây dựng của nó

Hãy xem xét đoạn mã sau

import React from 'react';


const MyCustomInput = () => {
  return ;
};


;

Chúng tôi đã tạo một thành phần đầu vào tùy chỉnh. Bây giờ, giả sử chúng ta muốn lấy một tham chiếu đến giá trị hiện tại của phần tử đầu vào đó. Nếu chúng tôi cố gắng đặt tham chiếu trên chính thành phần đó, nó sẽ thất bại và chúng tôi sẽ không thể nhận được giá trị hiện tại với. tài sản hiện tại. để khắc phục chúng ta phải sử dụng React. chuyển tiếpRef như thế này

import React from 'react';


const MyCustomInput = React.forwardRef((props, ref) => {
  ;
});


const ref = React.createRef();
;

Chà, và trong React-Bootstrap, chúng tôi sẽ không thể làm được. Nếu đó là thư viện của riêng chúng tôi, chúng tôi có thể triển khai nó, nhưng đó là thư viện công cộng và chúng tôi không thể thực hiện bất kỳ thay đổi nào đối với nó. Thực sự có một giải pháp (hãy gọi ReactDOM. findDOMNode(ref) để lấy nút DOM) nhưng đối với các ứng dụng lớn, việc áp dụng nó sẽ rất cồng kềnh. Hơn nữa, findDomeNode không được dùng trong StrictMode, vì vậy bạn không thực sự muốn sử dụng nó

Tóm lược

Bạn nên sử dụng Bootstrap nếu

-Bạn đã có nhiều kinh nghiệm với thư viện Bootstrap và không muốn học một API mới

-Bạn quan tâm đến tính linh hoạt của ứng dụng và muốn dành tùy chọn thay đổi khung của mình trong tính năng

Tôi có nên sử dụng Bootstrap với React không?

Tôi có thể sử dụng React thay vì Bootstrap không?

Tôi nên học Bootstrap hay React trước?