JSX
JSX (hay Javascript XML) là các ngôn ngữ dạng dấu XML, một cú pháp giúp mở rộng và mang lại sử phổ biến cho cho ngôn ngữ Javascript viết theo kiểu XML chứ không phải là một chuỗi hay là HTML.
Vì sao nên sử dụng JSX?
Các ứng dụng React được xây dựng nhanh chóng, dễ dàng tối ưu trong việc chuyển đổi từ compile code sang Javascript.
Trong quá trình triển khai và compile, các lỗi luôn được hiển thị và bạn hoàn toàn có thể xem được các lỗi đó khi sử dụng JSX. Điều này vượt trội hơn nhiều so với các đoạn mã HTML. Nếu bạn quên đóng div thì các lỗi sẽ được hiển thị ngay lập tức.
Do cách viết JSX khá giống với HTML nên các nhà phát triển hay designer có thể dễ dàng hiểu được nó một cách dễ dàng để không gặp khó khăn trong việc viết hoặc sửa code. Ngoài ra, việc viết chuyển đổi trở nên nhanh chóng hơn bao giờ hết.
Do JSX là sự kết hợp giữa các ngôn ngữ lập trình Javascript và dạng dấu XML nên nó không làm thay đổi ngữ nghĩa của javascript.
JSX có cú pháp gần với XML. Điều này giúp định nghĩa và quản lý các component phức tạp một cách dễ dàng thay vì bạn phải định nghĩa và gọi ra nhiều object hay nhiều hàm trong javascript.
Hỗ trợ các lập trình viên trong việc hiểu rõ các ý nghĩa, cấu trúc của đoạn code cũng như dễ dàng hơn trong việc quản lý các thành phần phức tạp.
Tuy nó không bắt buộc phải được sử dụng nhưng chắc chắn những lợi ích mà JSX mang lại cho công việc lập trình của bạn là điều không thể phủ nhận
Một số lưu ý khi sử dụng JSX
Đến đây, có lẽ bạn đã hiểu rõ hơn khái niệm JSX và những lợi ích mà nó mang lại khi lựa chọn sử dụng. Tuy nhiên, để JSX có thể vận hành hiệu quả thì khi sử dụng, bạn nên biết thêm về những lưu ý sau đây.
Một số lưu ý khi sử dụng JSX
Bạn vẫn có thể sử dụng các dấu nháy khi viết các chuỗi cú pháp thuộc tính thẻ trong việc thực hiện khai báo chuỗi đó.
Cần lưu ý trong việc sử dụng các dấu ngoặc nhọn cho nhu cầu nhúng biểu thức của ngôn ngữ lập trình javascript vào trong thuộc tính.
Việc bạn sử dụng cùng một lúc hai dấu nháy và dấu ngoặc nhọn trong cũng một biểu thức là không nên. Thay vào đó, bạn chỉ nên áp dụng chúng một cách song song hoặc tách biệt chứ không nên hợp nhất hai dấu lại với nhau.
Để có thể dễ dàng chạy được trên các trình duyệt thì việc chuyển đổi JSX thành mã JS là việc làm vô cùng quan trọng.
JSX ngoài việc được sử dụng trong thư viện mã nguồn mở React thì nó cũng thường xuyên được sử dụng trong các trình biên dịch nữa.
Component
Component trong React sẽ giúp phân chia giao diện người dùng (UI) thành các thành phần nhỏ hơn để việc quản lý và tái sử dụng trở nên đơn giản. Mỗi Component sẽ đảm nhiệm từng phần hiển thị khác nhau của giao diện và có status và Props
Props là tên sản phẩm , giá cả, hình ảnh , v.....,
Props
Chúng ta sử dụng props để gửi dữ liệu đến component.
Props cho phép chúng ta giao tiếp giữa các components với nhau bằng cách truyền tham số qua lại giữa các components.
Khi một components cha truyền cho component con một props thì components con chỉ có thể đọc và không có quyền chỉnh sửa nó bên phía components cha.
const App = () => Gía trị của props.childrenState là gì?
React có một đối tượng tích hợp đặc biệt khác được gọi là state, cho phép các thành phần tạo và quản lý dữ liệu của riêng chúng. Vì vậy, không giống như props, các thành phần không thể truyền dữ liệu với state, nhưng chúng có thể tạo và quản lý nó trong nội bộ.
Đây là một vài ví dụ cho thấy cách sử dụng state:
Chuyện gì sẽ xảy ra khi state thay đổi?
Được rồi, tại sao chúng ta phải dùng setState? Tại sao chúng ta thậm chí cần state đối tượng chính nó? Nếu bạn đang đặt câu hỏi này, đừng lo lắng, bạn sẽ hiểu state sớm thôi, để tôi giải đáp cho bạn nhé.
Một sự thay đổi trong state xảy ra dựa trên user-input, triggering an event, v.v. Ngoài ra, các thành phần React (với state) được hiển thị dựa trên dữ liệu trong state. State nắm thông tin ban đầu.
Vậy nên khi state thay đổi, React nhận ngay được thông tin và hiển thị DOM - Không phải mọi DOM, mà chỉ thành phần đã cập nhật state. Đây là một trong những lý do tại sao React lại nhanh.
Và React nhận thông báo như thế nào? Bạn đã đoán được nó: Cùng với setState. Phương pháp setState kích hoạt quá trình kết xuất cho phần cập nhật. React được thông báo, biết phần nào để thay đổi, và làm nó một cách nhanh chóng mà không cần kết xuất tất cả DOM.
Kết luận rằng, có 2 điểm quan trọng chúng ta cần chú ý khi sử dụng state:
State không được thay đổi trực tiếp - Cần sử dụng setState
State ảnh hưởng đến hiệu suất của app nên chúng ta không nên dùng khi không cần thiết.
Sự khác nhau giữa props và state là gì?
Cuối cùng thì chúng ta hãy xem những sự khác biệt chính giữa props và state:
Các thành phần nhận dữ liệu từ bên ngoài cùng props, trong đó chúng có thể tạo và quản lý data của chúng cùng state.
Props dùng để truyền dữ liệu, trong đó state quản lý dữ liệu.
Dữ liệu trong props chỉ để đọc, và không thể bị sửa đổi bởi thành phần nhận nó từ bên ngoài.
Dữ liệu state có thể được sửa đổi bởi thành phần của chính nó, nhưng riêng tư (Không thể bị truy cập từ bên ngoài)
Props chỉ có thể được truyền từ thành phần mẹ đến thành phần con (flow không trực tiếp)
Thay đổi state nên được thực hiện cùng setState.
useContext
useContext là một hooks trong React Hooks cho phép chúng ta có thể làm việc với React Context trong một functional component
vậy react context là gì
React Context tồn tại để bạn không cần truyền dữ liệu một cách thủ công bằng việc sử dụng props ở tất cả các cấp của component. Context chia sử dữ liệu cho nhiều các component khác nhau. Việc truyền dữ liệu từ component cha xuống component con thông qua props là tương đối dài dòng và khó kiểm sóat so với việc sử dụng Context API. Bằng việc sử dụng Context API, chúng ta không còn cần phải truyền các dữ liệu muốn chia sẻ với nhau thông qua việc dùng props.
VD : nhập một đoạn văn xuất ra một đoạn văn
App.jsx
con.jsx
chau.jsx
kết quả
useReducer
useState trong React để quản lí component state. Thỉnh thoảng nếu bạn có nhiều thành phần trong một state, giống như bạn có một object bao gồm nhiều state cùng một lúc
Hay chúng ta thường dùng useReducer để quản lí một số state liên quan vơi nhau như khi fetching data từ API: status, data, error. Quản lí chung các state này như một object.
Đây là trường hợp mà useReducer có thể giúp bạn quản lí state này dễ hơn.
useReducer giúp chúng ta tạo nên một kho lưu trữ các state và thay đổi state đó thông qua hàm dispatch một action và dựa theo loại action truyền đến mà xử lý thích hợp, sau đó trả về một state mới. Nếu bạn đã làm việc với Redux thì concept nó tương tự như thế.
vd : khi nhấn nút cong thi cộng lên 1 và khi nhấn nút tru trừ 1 và khi nhấn nút tro ve 0
kết quả
React.PureComponent
React.PureComponenttương tự như React.Component. Sự khác biệt giữa chúng là React.Componentkhông triển khai shouldComponentUpdate(), nhưng React.PureComponenttriển khai nó với so sánh trạng thái và chỗ dựa nông.
Nếu render()chức năng của thành phần React của bạn hiển thị cùng một kết quả với cùng một đạo cụ và trạng thái, thì bạn có thể sử dụng React.PureComponentđể tăng hiệu suất trong một số trường hợp.
Ghi chú
React.PureComponent' shouldComponentUpdate()chỉ so sánh sơ sài các đối tượng. Nếu chúng chứa cấu trúc dữ liệu phức tạp, nó có thể tạo ra kết quả âm tính giả đối với những khác biệt sâu hơn. Chỉ mở rộng PureComponentkhi bạn muốn có các đạo cụ và trạng thái đơn giản hoặc sử dụng forceUpdate()khi bạn biết cấu trúc dữ liệu sâu đã thay đổi. Hoặc, xem xét sử dụng các đối tượng không thay đổi để tạo điều kiện so sánh nhanh dữ liệu lồng nhau.
Hơn nữa, React.PureComponent's shouldComponentUpdate()bỏ qua các bản cập nhật chống đỡ cho toàn bộ cây con thành phần. Hãy chắc chắn rằng tất cả các thành phần con cũng là tinh khiết.
const MyComponent = React.memo(function MyComponent(props) {
/ render using props /
});
React.memolà một thành phần bậc cao hơn .
Nếu thành phần của bạn hiển thị cùng một kết quả với cùng một đạo cụ, bạn có thể gói nó trong một lệnh gọi để React.memotăng hiệu suất trong một số trường hợp bằng cách ghi nhớ kết quả. Điều này có nghĩa là React sẽ bỏ qua việc hiển thị thành phần và sử dụng lại kết quả được hiển thị cuối cùng.
React.memochỉ kiểm tra các thay đổi chống đỡ. Nếu thành phần chức năng của bạn được gói trong React.memocó useStatehoặc Hook trong quá trình triển khai, thì thành phần đó vẫn sẽ hiển thị lại khi trạng thái hoặc ngữ cảnh thay đổi useReducer.useContext
Theo mặc định, nó sẽ chỉ so sánh nông các đối tượng phức tạp trong đối tượng đạo cụ. Nếu muốn kiểm soát so sánh, bạn cũng có thể cung cấp hàm so sánh tùy chỉnh làm đối số thứ hai.
function MyComponent(props) {
/ render using props /
}
function areEqual(prevProps, nextProps) {
/
return true if passing nextProps to render would return
the same result as passing prevProps to render,
otherwise return false
/
}
export default React.memo(MyComponent, areEqual);
Phương pháp này chỉ tồn tại dưới dạng tối ưu hóa hiệu suất . Đừng dựa vào nó để “ngăn chặn” kết xuất, vì điều này có thể dẫn đến lỗi.
Ghi chú
Không giống như shouldComponentUpdate()phương thức trên các thành phần của lớp, areEqualhàm trả về truenếu các giá trị bằng nhau và falsenếu các giá trị không bằng nhau. Đây là nghịch đảo từ shouldComponentUpdate.
JSX JSX (hay Javascript XML) là các ngôn ngữ dạng dấu XML, một cú pháp giúp mở rộng và mang lại sử phổ biến cho cho ngôn ngữ Javascript viết theo kiểu XML chứ không phải là một chuỗi hay là HTML. Vì sao nên sử dụng JSX? Các ứng dụng React được xây dựng nhanh chóng, dễ dàng tối ưu trong việc chuyển đổi từ compile code sang Javascript. Trong quá trình triển khai và compile, các lỗi luôn được hiển thị và bạn hoàn toàn có thể xem được các lỗi đó khi sử dụng JSX. Điều này vượt trội hơn nhiều so với các đoạn mã HTML. Nếu bạn quên đóng div thì các lỗi sẽ được hiển thị ngay lập tức. Do cách viết JSX khá giống với HTML nên các nhà phát triển hay designer có thể dễ dàng hiểu được nó một cách dễ dàng để không gặp khó khăn trong việc viết hoặc sửa code. Ngoài ra, việc viết chuyển đổi trở nên nhanh chóng hơn bao giờ hết. Do JSX là sự kết hợp giữa các ngôn ngữ lập trình Javascript và dạng dấu XML nên nó không làm thay đổi ngữ nghĩa của javascript. JSX có cú pháp gần với XML. Điều này giúp định nghĩa và quản lý các component phức tạp một cách dễ dàng thay vì bạn phải định nghĩa và gọi ra nhiều object hay nhiều hàm trong javascript. Hỗ trợ các lập trình viên trong việc hiểu rõ các ý nghĩa, cấu trúc của đoạn code cũng như dễ dàng hơn trong việc quản lý các thành phần phức tạp. Tuy nó không bắt buộc phải được sử dụng nhưng chắc chắn những lợi ích mà JSX mang lại cho công việc lập trình của bạn là điều không thể phủ nhận Một số lưu ý khi sử dụng JSX Đến đây, có lẽ bạn đã hiểu rõ hơn khái niệm JSX và những lợi ích mà nó mang lại khi lựa chọn sử dụng. Tuy nhiên, để JSX có thể vận hành hiệu quả thì khi sử dụng, bạn nên biết thêm về những lưu ý sau đây. Một số lưu ý khi sử dụng JSX Bạn vẫn có thể sử dụng các dấu nháy khi viết các chuỗi cú pháp thuộc tính thẻ trong việc thực hiện khai báo chuỗi đó. Cần lưu ý trong việc sử dụng các dấu ngoặc nhọn cho nhu cầu nhúng biểu thức của ngôn ngữ lập trình javascript vào trong thuộc tính. Việc bạn sử dụng cùng một lúc hai dấu nháy và dấu ngoặc nhọn trong cũng một biểu thức là không nên. Thay vào đó, bạn chỉ nên áp dụng chúng một cách song song hoặc tách biệt chứ không nên hợp nhất hai dấu lại với nhau. Để có thể dễ dàng chạy được trên các trình duyệt thì việc chuyển đổi JSX thành mã JS là việc làm vô cùng quan trọng. JSX ngoài việc được sử dụng trong thư viện mã nguồn mở React thì nó cũng thường xuyên được sử dụng trong các trình biên dịch nữa.
Component
Component trong React sẽ giúp phân chia giao diện người dùng (UI) thành các thành phần nhỏ hơn để việc quản lý và tái sử dụng trở nên đơn giản. Mỗi Component sẽ đảm nhiệm từng phần hiển thị khác nhau của giao diện và có status và Props
Props là tên sản phẩm , giá cả, hình ảnh , v.....,
Props
Chúng ta sử dụng props để gửi dữ liệu đến component.
Props cho phép chúng ta giao tiếp giữa các components với nhau bằng cách truyền tham số qua lại giữa các components.
Khi một components cha truyền cho component con một props thì components con chỉ có thể đọc và không có quyền chỉnh sửa nó bên phía components cha.
const App = () => Gía trị của props.children
State là gì?
React có một đối tượng tích hợp đặc biệt khác được gọi là state, cho phép các thành phần tạo và quản lý dữ liệu của riêng chúng. Vì vậy, không giống như props, các thành phần không thể truyền dữ liệu với state, nhưng chúng có thể tạo và quản lý nó trong nội bộ.
Đây là một vài ví dụ cho thấy cách sử dụng state:
Chuyện gì sẽ xảy ra khi state thay đổi?
Được rồi, tại sao chúng ta phải dùng setState? Tại sao chúng ta thậm chí cần state đối tượng chính nó? Nếu bạn đang đặt câu hỏi này, đừng lo lắng, bạn sẽ hiểu state sớm thôi, để tôi giải đáp cho bạn nhé.
Một sự thay đổi trong state xảy ra dựa trên user-input, triggering an event, v.v. Ngoài ra, các thành phần React (với state) được hiển thị dựa trên dữ liệu trong state. State nắm thông tin ban đầu.
Vậy nên khi state thay đổi, React nhận ngay được thông tin và hiển thị DOM - Không phải mọi DOM, mà chỉ thành phần đã cập nhật state. Đây là một trong những lý do tại sao React lại nhanh.
Và React nhận thông báo như thế nào? Bạn đã đoán được nó: Cùng với setState. Phương pháp setState kích hoạt quá trình kết xuất cho phần cập nhật. React được thông báo, biết phần nào để thay đổi, và làm nó một cách nhanh chóng mà không cần kết xuất tất cả DOM.
Kết luận rằng, có 2 điểm quan trọng chúng ta cần chú ý khi sử dụng state:
State không được thay đổi trực tiếp - Cần sử dụng setState
State ảnh hưởng đến hiệu suất của app nên chúng ta không nên dùng khi không cần thiết.
Sự khác nhau giữa props và state là gì?
Cuối cùng thì chúng ta hãy xem những sự khác biệt chính giữa props và state:
Các thành phần nhận dữ liệu từ bên ngoài cùng props, trong đó chúng có thể tạo và quản lý data của chúng cùng state.
Props dùng để truyền dữ liệu, trong đó state quản lý dữ liệu.
Dữ liệu trong props chỉ để đọc, và không thể bị sửa đổi bởi thành phần nhận nó từ bên ngoài.
Dữ liệu state có thể được sửa đổi bởi thành phần của chính nó, nhưng riêng tư (Không thể bị truy cập từ bên ngoài)
Props chỉ có thể được truyền từ thành phần mẹ đến thành phần con (flow không trực tiếp)
Thay đổi state nên được thực hiện cùng setState.
useContext useContext là một hooks trong React Hooks cho phép chúng ta có thể làm việc với React Context trong một functional component vậy react context là gì React Context tồn tại để bạn không cần truyền dữ liệu một cách thủ công bằng việc sử dụng props ở tất cả các cấp của component. Context chia sử dữ liệu cho nhiều các component khác nhau. Việc truyền dữ liệu từ component cha xuống component con thông qua props là tương đối dài dòng và khó kiểm sóat so với việc sử dụng Context API. Bằng việc sử dụng Context API, chúng ta không còn cần phải truyền các dữ liệu muốn chia sẻ với nhau thông qua việc dùng props.
VD : nhập một đoạn văn xuất ra một đoạn văn
App.jsx
con.jsx
chau.jsx
kết quả
useReducer useState trong React để quản lí component state. Thỉnh thoảng nếu bạn có nhiều thành phần trong một state, giống như bạn có một object bao gồm nhiều state cùng một lúc
Hay chúng ta thường dùng useReducer để quản lí một số state liên quan vơi nhau như khi fetching data từ API: status, data, error. Quản lí chung các state này như một object.
Đây là trường hợp mà useReducer có thể giúp bạn quản lí state này dễ hơn.
useReducer giúp chúng ta tạo nên một kho lưu trữ các state và thay đổi state đó thông qua hàm dispatch một action và dựa theo loại action truyền đến mà xử lý thích hợp, sau đó trả về một state mới. Nếu bạn đã làm việc với Redux thì concept nó tương tự như thế.
vd : khi nhấn nút cong thi cộng lên 1 và khi nhấn nút tru trừ 1 và khi nhấn nút tro ve 0
kết quả
React.PureComponent React.PureComponenttương tự như React.Component. Sự khác biệt giữa chúng là React.Componentkhông triển khai shouldComponentUpdate(), nhưng React.PureComponenttriển khai nó với so sánh trạng thái và chỗ dựa nông.
Nếu render()chức năng của thành phần React của bạn hiển thị cùng một kết quả với cùng một đạo cụ và trạng thái, thì bạn có thể sử dụng React.PureComponentđể tăng hiệu suất trong một số trường hợp.
Ghi chú
React.PureComponent' shouldComponentUpdate()chỉ so sánh sơ sài các đối tượng. Nếu chúng chứa cấu trúc dữ liệu phức tạp, nó có thể tạo ra kết quả âm tính giả đối với những khác biệt sâu hơn. Chỉ mở rộng PureComponentkhi bạn muốn có các đạo cụ và trạng thái đơn giản hoặc sử dụng forceUpdate()khi bạn biết cấu trúc dữ liệu sâu đã thay đổi. Hoặc, xem xét sử dụng các đối tượng không thay đổi để tạo điều kiện so sánh nhanh dữ liệu lồng nhau.
Hơn nữa, React.PureComponent's shouldComponentUpdate()bỏ qua các bản cập nhật chống đỡ cho toàn bộ cây con thành phần. Hãy chắc chắn rằng tất cả các thành phần con cũng là tinh khiết.
React.memo Nội dung này đã lỗi thời.
Đọc tài liệu React mới cho memo.
const MyComponent = React.memo(function MyComponent(props) { / render using props / }); React.memolà một thành phần bậc cao hơn .
Nếu thành phần của bạn hiển thị cùng một kết quả với cùng một đạo cụ, bạn có thể gói nó trong một lệnh gọi để React.memotăng hiệu suất trong một số trường hợp bằng cách ghi nhớ kết quả. Điều này có nghĩa là React sẽ bỏ qua việc hiển thị thành phần và sử dụng lại kết quả được hiển thị cuối cùng.
React.memochỉ kiểm tra các thay đổi chống đỡ. Nếu thành phần chức năng của bạn được gói trong React.memocó useStatehoặc Hook trong quá trình triển khai, thì thành phần đó vẫn sẽ hiển thị lại khi trạng thái hoặc ngữ cảnh thay đổi useReducer.useContext
Theo mặc định, nó sẽ chỉ so sánh nông các đối tượng phức tạp trong đối tượng đạo cụ. Nếu muốn kiểm soát so sánh, bạn cũng có thể cung cấp hàm so sánh tùy chỉnh làm đối số thứ hai.
function MyComponent(props) { / render using props / } function areEqual(prevProps, nextProps) { / return true if passing nextProps to render would return the same result as passing prevProps to render, otherwise return false / } export default React.memo(MyComponent, areEqual); Phương pháp này chỉ tồn tại dưới dạng tối ưu hóa hiệu suất . Đừng dựa vào nó để “ngăn chặn” kết xuất, vì điều này có thể dẫn đến lỗi.
Ghi chú
Không giống như shouldComponentUpdate()phương thức trên các thành phần của lớp, areEqualhàm trả về truenếu các giá trị bằng nhau và falsenếu các giá trị không bằng nhau. Đây là nghịch đảo từ shouldComponentUpdate.