React là gì? Những điều cần biết khi mới tìm hiểu về React?
Trong những năm gần đây các library/framework JavaScript cả front-end lẫn back-end đều lũ lượt ra đời và phát triển mạnh mẽ, tiêu biểu nhất chính là react. React ra đời với tiêu chí Learn One Write Everywhere đúng với tiêu chí này react giúp chúng có thể xây dựng các ứng dụng trên nhiền nền platform ví dụ như web, mobile app trên android và ios cũng như desktop app.
Giới thiệu:
React không phải là một MVC framework. React là một thư viện của Facebook viết bằng Javascript, dùng để xây dựng giao diện người dùng (User Interface), vì thế React sẽ không có phần M - Model và C - Controller, mà phải kết hợp với Server side language để xử lý logic và lưu trữ dữ liệu trên server, HTML/CSS nếu bạn làm ứng dụng web...
- React hỗ trợ việc xây dựng những thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được
- React không chỉ hoạt động trên phía client, mà còn được render trên server.
Khái niệm:
- JSX: là một cú pháp mở rộng cho JavaScript, tương tự như XML. Code JSX tương tự như HTML nhưng thật sự nó là một sự pha trộn giữa JavaScript và HTML. JSX nhanh hơn JavaScript vì nó thực hiện tối ưu hóa khi biên dịch mã nguồn. JSX cũng được khuyên dùng hơn vì nó dễ sử dụng hơn so với code thuần JS. Việc sử dụng JSX trong ReactJS là không bắt buộc. Bạn có thể sử dụng chỉ JS thuần thôi. Nhưng có rất nhiều lý do cho việc nên sử dụng JSX trong ReactJS. Cấu trúc cây khi biểu thị các attributes, điều đó giúp ta dễ dàng định nghĩa, quản lý được các component phức tạp, thay vì việc phải định nghĩa và gọi ra nhiều hàm hoặc object trong javascript. Khi nhìn vào cấu trúc đó cũng dễ dàng đọc hiểu được ý nghĩa của các component. Code JSX ngắn hơn, dễ hiểu hơn code JS
- Component: cho phép chúng ta chia nhỏ các thành phần UI độc lập mục đích để dễ quản lý và tái sử dụng nó. Ví dụ chúng ta có một list các post các post này được sử dụng ở nhiều page khác nhau và có cùng một style ở đây chúng ta sẽ tạo một component Post khi nào cần xử dụng chỉ cần gọi nó ra việc này giúp chũng ta quan lý code tốt hơn.
- Props: chính là properties của một component, chúng ta có thể thay đổi props của component bằng cách truyền dữ liệu từ bên ngoài vào. Props có thể là 1 object, funtion, string, number.... Khi một props được truyền vào component thì nó là bất biến tức là dữ liệu của nó không được thay đổi.
- State: biểu diễn trạng thái của component, state là private chỉ có thể thay đổi bên trong bản thân của chính component đó. Chúng ta có thể change states bằng cách gọi this.setState(). Khi state thay đổi component đó sẽ được re-render vì thế việc quản lý state ảnh hưởng đến performance của trang web của bạn
Lifecycle:
- componentWillMount: được gọi một lần trước khi render component diễn ra.
- componentDidMount: được gọi một lần sau khi render component.
- componentWillUnmount: thực hiện một lần duy nhất, khi component sẽ unmount, hữu dụng khi bạn cần xoá các timer không còn sử dụng
- componentWillReceiveProps: thực hiện liên tục mỗi khi props thay đổi Sử dụng để thay đổi (state) của component phụ thuộc props.
- shouldComponentUpdate: thực hiện khi state và props thay đổi. Trả về kết quả true/false, bạn sẽ cần sử dụng đến nó để xử lý xem có cần re-render component không.
- componentWillUpdate: thực hiện dựa vào kết quả của shouldComponentUpdate nếu trả về false method sẽ không được thực thi
- componentDidUpdate: hực hiện sau khi component được render lại từ kết quả của componentWillUpdate
Kết luận:
React là một thư viện javascript nó không quá khó để bắt đầu và cách làm của react có điểm lợi là uyển chuyển, và không phụ thuộc vào các framework tức là khi cần thiết có thể thay thế. Chúng có thể kết hợp nó với native để phát triển các sản phẩm trên mobile app hoặc làm một ứng dụng trên window điều này giúp ta tiết kiệm được nhiều thời gian và chi phí để xây dựng các ứng dụng trên nhiều platform khác nhau.
hướng nghiệp
,công nghệ thông tin
,react
,reactjs
,lập trình
Rất hữu ích, cảm ơn b
Người ẩn danh
Rất hữu ích, cảm ơn b
Hải Long
Mình đã bảo nó không phải là MVC framework mà thằng bạn mình cãi bằng được. để tag nó vào đây