F8 hướng tới đáp ứng cả những bạn lần đầu học React nên mình sẽ làm chi tiết một chút. Trong các bài sau mình sẽ thêm nhiều ví dụ, mỗi bài mình sẽ giải thích chi tiết từng dòng code, cách logic chạy. Mong các anh em đã từng học qua thông cảm nếu thời lượng dài nhé 😍 Trong này này chúng ta sẽ học về useState trong React hook (React hook 2021) nhé anh em 😍
15:10 chỗ này rất đúng vì trong doc có nói "the state is only created the first time our component renders" tức là logic trong useState chỉ chạy đúng 1 lần lúc render lần đầu thôi, còn lại ở những lần render sau thì nó sẽ lấy giá trị mới nhất được return từ setCount().
ngày xưa không ai chỉ anh cần học những gì để đi làm . trong khi tự học mà anh còn có kiến thức rộng như vậy . thì a xác định hướng đi kiểu gì vậy ạ (tức là học những gì trước những gì sau ) ..e cám ơn . a giảng rất dễ hiểu .. chúc a có nhiều sức khỏe
Ui đỉnh quá anh ơi, em đọc docs của trang React mấy nay bị cấn cái flow của useState, xem video của anh hiểu ngay, cảm ơn anh nhiều ạ! Chúc anh ngày mới nhiều niềm vui.
Em cảm ơn anh Sơn nhiều ạ . Những bài anh giảng rất chi tiết và dễ hiểu giúp một đứa lần đầu học React như em có thể tiếp cận dễ dàng hơn . Em chúc anh nhiều sức khỏe và gặt hái được nhiều thành công ạ.
Anh Sơn ơi cho em hỏi. Các bài tập về phần hook em làm theo anh mà em muốn lưu lại để sau này xem lại thì mỗi phần em tạo một file js rồi mỗi lần em muốn chạy file nào thì em import vào đúng k anh.
Em chào thầy Sơn, em có câu hỏi là trong trường hợp giá trị truyền vào đối số setState() bằng với giá trị lúc khởi tạo thì component này có được render lại không ạ. Mong nhận được lời giải đáp từ phía thầy Sơn ạ
Anh có thể giải thích thêm về cái callback trong setState không, em chưa hiểu tại sao mình sao mình lại truyền callback vào hàm setState ấy, nếu mà mình truyền time-1 thì nó chỉ dừng ở 59 và time luôn luôn ỏ 60
Vì a++ nó trả về giá trị của a trước khi tăng. Tức là a = 1 thì a++ là 1, sau đó bạn dùng a ở biểu thức khác nó mới là 2. Nếu muốn dùng ++ thì bạn viết phía trước, tức là ++a nhé.
Vì trong thực tế logic xử lý nó ko đơn giản chỉ là + 1 như vậy, nhiều dòng code hơn viết ra hàm tưởng minh hơn về ngữ nghĩa, một số trường hợp có thể tái sử dụng hàm. Một số tình huống trong tương lai các bạn đc học sẽ gây re render các component ko cần thiết. Việc tách hàm ra giúp kết hợp sử dụng đc useCallback hook để tối ưu. Một số cái mình nói có thể bạn sẽ được học trong các bài tới.
); } export default App; Cho em hỏi, tại sao khi em nhấn Click 2 lần thì component re-render 2 lần, dù cả x, y, z, t đều không đổi. Nhưng khi click lần 3 thì lại không re-render nữa ạ. Em cảm ơn.
@@F8VNOfficial Dạ vâng em cảm ơn anh. Tại vì em đang ở trường có cho học món AngularJs. Nó lại dùng thuật ngữ data binding trong khi react anh lại dùng từ re-render cập nhật cho nó nhảy số 1,2,3,4 nên em tưởng nó là 1. Em sẽ ngâm cứu lại cái này 😁
@@congnamle3632 Gọi là binding cũng đúng em, nhưng em cần focus vào ý nghĩa của cách người ta dùng từ để hiểu nó đang nói tới điều gì. - Re-render => Nói tới việc component update lại UI để hiển thị giao diện mới - Data binding => Nói tới việc dữ liệu dàng buộc, ví dụ UI bị dàng buộc bởi dữ liệu, khi dữ liệu thay đổi thì UI thay đổi theo Mặc dù nghe có vẻ giống nhau, nhưng để học sâu thì em cần chú ý tới ý nghĩa của nó, vì re-render và data binding là đang nói tới 2 vấn đề khác nhau nhé.
F8 hướng tới đáp ứng cả những bạn lần đầu học React nên mình sẽ làm chi tiết một chút. Trong các bài sau mình sẽ thêm nhiều ví dụ, mỗi bài mình sẽ giải thích chi tiết từng dòng code, cách logic chạy. Mong các anh em đã từng học qua thông cảm nếu thời lượng dài nhé 😍
Trong này này chúng ta sẽ học về useState trong React hook (React hook 2021) nhé anh em 😍
Ko phải học lần đầu vẫn mò vào xem đằng sau các hàm nó thực sự đang làm gì, thời nay có x2 x3 speed rồi nên dài 1 tí cũng chả sao cả
Rất dễ hiểu anh.
Cảm ơn anh rất nhiều nhé!
rất chi tiết và dễ hiểu, cảm ơn bạn !
Quý anh Sơn, em nghe bài dễ hiểu vs hút quá
Anh dạy chi tiết và hay quá ạ 😍😍
15:10 chỗ này rất đúng vì trong doc có nói "the state is only created the first time our component renders" tức là logic trong useState chỉ chạy đúng 1 lần lúc render lần đầu thôi, còn lại ở những lần render sau thì nó sẽ lấy giá trị mới nhất được return từ setCount().
xem trên youtube chủ yếu giúp kênh có thêm lượt view và tương tác, mong kênh bạn có thêm nhiều video hay cho các bạn trẻ có đam mê lập trình
Thật sự coi kênh thầy Sơn càng ngày càng đỉnh luôn, có mấy cái animation trong video khúc đầu xịn xò ghê :))
ngày xưa không ai chỉ anh cần học những gì để đi làm . trong khi tự học mà anh còn có kiến thức rộng như vậy . thì a xác định hướng đi kiểu gì vậy ạ (tức là học những gì trước những gì sau ) ..e cám ơn . a giảng rất dễ hiểu .. chúc a có nhiều sức khỏe
Anh là người dạy cực kì có tâm luôn, cái khó hiểu anh diễn giải thật sự dễ hiểu! Cám ơn anh thật nhiều
Cảm ơn em nhiều nha
Ui đỉnh quá anh ơi, em đọc docs của trang React mấy nay bị cấn cái flow của useState, xem video của anh hiểu ngay, cảm ơn anh nhiều ạ! Chúc anh ngày mới nhiều niềm vui.
wao anh giải thích kỹ cách nó chạy thật là hay quá, dễ hiểu vô cùng luôn ạ
Em cảm ơn anh Sơn nhiều ạ . Những bài anh giảng rất chi tiết và dễ hiểu giúp một đứa lần đầu học React như em có thể tiếp cận dễ dàng hơn . Em chúc anh nhiều sức khỏe và gặt hái được nhiều thành công ạ.
Cảm ơn anh vì bài giảng, nó rất chi tiết, thật sự xây dựng chắc cho em 1 nền tốt để em có thể phát triển thêm sau này, cảm ơn anh,!!!
Anh Sơn đỉnh quá, chỉ cần xem video của anh là hiểu luôn !!!
Bài giảng của a thực sự rất dễ hiểu, giải thích rõ ràng, chi tiết 😊 Cảm ơn và mong a luôn ra những video hay như vậy ạ ❤️
giang rât loi cuon nguoi nghe, de hieu, chi tiet . tuyet voi !
càng coi lại nhiều lần càng hiểu ra nhiều vấn đề hơn , cảm ơn anh sơn , cảm ơn F8
seri dạy học quá đỉnh, free mà tốt gấp vạn lần các khóa trả phí, Cảm ơn Sơn rất nhiều nhiều
haha
A sơn dạy có tâm thật sự a ơi.
Bài giảng tuyệt vời !!! Cảm ơn anh Sơn
cám ơn bạn Sơn, bạn làm hướng dẫn rất có tâm.
cảm ơn anh ạ hi vọng anh ra thêm nhiều nhiều videos nửa ạ. Rất dể hỉu luôn ạ
Ui a ra luôn, thank a nha, chúc a nhiều sức khỏe ra tiếp ạ
Rất chi tiết và cụ thể. Cảm ơn anh.
dậy hay như này mà k đẹp trai bằng mình, thật đáng tiếc :D :D :D
Thầy giảng hay quá thầy ơi, trong thời gian ngắn sắp tới thầy có thể làm nhiều video hơn về react hooks và redux được không ạ.
Em cảm ơn!
Cảm ơn bài giảng của anh ạ.
Đã học và hiểu. Cảm ơn thầy Sơn
import { useState } from "react";
const orders = [100, 200, 300];
function App() {
const [counter, setCounter] = useState(() => {
const total = orders.reduce((total, cur) => total + cur);
return total;
});
const [info, setInfo] = useState({
name: "Nguyen Van A",
age: 18,
address: "Ha Noi, VN",
});
const handleIncrease = () => {
setCounter((prevState) => prevState + 1);
};
const handleUpdate = () => {
setInfo({
...info,
bio: "Yeu mau hong",
});
};
return (
{counter}
Increase
{JSON.stringify(info)}
Update
);
}
export default App;
F8: có tâm, có tầm
Chất lượng quá anh ạ
Hóng video của anh mãi UwU
anh ơi ra nhanh nha . em hóng ghê :>>
cho mình hỏi với hooks thì nên chia state ra thành nhiều state và setState nhỏ, hay là để 1 state nested lớn, cám ơn ạ
Chúc anh nhiều sức khỏe ^^
hóng quá 😎
Cảm ơn anh Sơn nhiều
hay quá!
Mong anh ra luôn khóa full stack ạ
Anh Sơn ơi cho em hỏi. Các bài tập về phần hook em làm theo anh mà em muốn lưu lại để sau này xem lại thì mỗi phần em tạo một file js rồi mỗi lần em muốn chạy file nào thì em import vào đúng k anh.
Em chào thầy Sơn, em có câu hỏi là trong trường hợp giá trị truyền vào đối số setState() bằng với giá trị lúc khởi tạo thì component này có được render lại không ạ. Mong nhận được lời giải đáp từ phía thầy Sơn ạ
Nếu bằng (===) thì không re-render bạn nhé
lâu lâu xem lại hoài lun
hay quá anh 🙏
Love your lesson🥰🥰
em cảm ơn anh nhiều!
Anh có thể giải thích thêm về cái callback trong setState không, em chưa hiểu tại sao mình sao mình lại truyền callback vào hàm setState ấy, nếu mà mình truyền time-1 thì nó chỉ dừng ở 59 và time luôn luôn ỏ 60
Cho mình hỏi là có thể dùng data get được từ useSelector() làm giá trị init cho useState() ko, vì sao và cách fix ạ. Mình cảm ơn
cho em hỏi mỗi lần muốn làm bài tập thì làm ở đâu ạ nếu mỗi lần làm một bài lại npm dự án react thì hơi bất tiện ạ
Hay anh ơi
E cám ơn bài giảng của a, e lúc đầu tự học useState mà k hiểu bản chất cốt lõi của nó nên hay bị nhầm.
Mua khóa Evondev mới ra cho em trai học đọc qua với vào xem thử Sơn dạy mới thấy sai lầm khi mua
em cảm ơn nhé
a sơn ơi cho em hỏi, vậy trường hợp nào mình sử dụng useState callback và không callback vậy a. e cảm ơn a nhiều
cái nào cần tính toán logic như ở 15:46 thì dùng callback, còn ko thì thôi.
cái khúc 3 cái countor anh nói cùng 1 giá trị, em cứ nghĩ nó sẽ return từng lần gọi và lưu vào biến count (chỗ detructoring chứ ạ) giúp em với ạ
MÌnh có thêm object vào mãng được không a? a giải đáp giúp e với nhé. ^^ thank a
18:41 tại sao arrow function có lúc dùng ngoặc () có lúc dùng {} vậy anh?
prev => () handleupdate = ()=> {}
vào time 7:26 nếu thay counter+1 = counter ++ tại sao bấm 2 lần nó mới thay đổi giá trị vậy bạn
Vì a++ nó trả về giá trị của a trước khi tăng. Tức là a = 1 thì a++ là 1, sau đó bạn dùng a ở biểu thức khác nó mới là 2. Nếu muốn dùng ++ thì bạn viết phía trước, tức là ++a nhé.
Trong trường hợp nào mình dùng onClick={()=>handleIncrease()}, onClick={handleIncrease}. Hai cách dùng này có khác nhau không ạ?
A ơi lúc đó anh chọn chuyên ngành nào của CNTT vậy cho e xin ý kiến với
ảnh gap year, nghỉ học đại học xong làm trái ngành rồi sau đó tự học lập trình rồi tự đi xin việc đó chứ
Chào Thầy Sơn, sao không dùng Setcounter(courter+1) ngay vị trí handleIncrease (nghĩa là không cần viết thêm hàm handleIncrease) ? Cám ơn Thầy ạ,
Vì trong thực tế logic xử lý nó ko đơn giản chỉ là + 1 như vậy, nhiều dòng code hơn viết ra hàm tưởng minh hơn về ngữ nghĩa, một số trường hợp có thể tái sử dụng hàm. Một số tình huống trong tương lai các bạn đc học sẽ gây re render các component ko cần thiết. Việc tách hàm ra giúp kết hợp sử dụng đc useCallback hook để tối ưu. Một số cái mình nói có thể bạn sẽ được học trong các bài tới.
1 video cày cỡ 5,6 lần là hiểu
Cmt đầu
Em có đoạn code sau:
import { useState } from 'react';
const App = () => {
const [x, setX] = useState('a');
const [y, setY] = useState('b');
const [z, setZ] = useState('c');
const [t, setT] = useState('d');
console.log('render: ', x, y, z, t);
const handle = () => {
setX('c');
setY('d');
setZ('e');
setT('f');
};
return (
Click
{x}, {y}, {z}, {t}
);
}
export default App;
Cho em hỏi, tại sao khi em nhấn Click 2 lần thì component re-render 2 lần, dù cả x, y, z, t đều không đổi. Nhưng khi click lần 3 thì lại không re-render nữa ạ. Em cảm ơn.
Có thể ở file index.js của em đang chưa comment StrictMode lại phải ko?
em có comment rồi nhưng vẫn bị ạ
Xem lần 1 khóc tiếng miên 😢 xem lần 2 thông não :D
vậy là setState() là 1 async function đúng k ạ?
Ủa mình lên video kìa
thầy Sơn ơi sao em console.log() thì trên trình duyệt nó lại in ra 2 lần vậy ạ
File index.js có StrictMode bạn ơi
🧡
a ơi cho em hỏi là tại sao state mình để là const mà vẫn có thể thay đổi giá trị được ạ?
mảng là const mà b :D
@@tubui6639 ok
Nó được render lại thì em có nghe thuật ngữ " Data binding" phải không anh?
Render lại là "re-render", binding data là "ràng buộc dữ liệu" rồi em
@@F8VNOfficial Dạ vâng em cảm ơn anh. Tại vì em đang ở trường có cho học món AngularJs. Nó lại dùng thuật ngữ data binding trong khi react anh lại dùng từ re-render cập nhật cho nó nhảy số 1,2,3,4 nên em tưởng nó là 1. Em sẽ ngâm cứu lại cái này 😁
@@congnamle3632 Gọi là binding cũng đúng em, nhưng em cần focus vào ý nghĩa của cách người ta dùng từ để hiểu nó đang nói tới điều gì.
- Re-render => Nói tới việc component update lại UI để hiển thị giao diện mới
- Data binding => Nói tới việc dữ liệu dàng buộc, ví dụ UI bị dàng buộc bởi dữ liệu, khi dữ liệu thay đổi thì UI thay đổi theo
Mặc dù nghe có vẻ giống nhau, nhưng để học sâu thì em cần chú ý tới ý nghĩa của nó, vì re-render và data binding là đang nói tới 2 vấn đề khác nhau nhé.
mình tưởng nếu như vậy thì sẽ thêm liên tục thằng bio vào chứ nhỉ không biết mình nhầm ở đâu
anh có thể tải source code với file .md lên git đc không ạ?
😊
Cho em hỏi về code foldor tittok đó lấy ở đâu vậy ạ?
setState bên class components tự merge giá trị cũ, bên Hooks quên spread phát ghi đè hơi căng nhỉ 😅
Ah ơi e học trên f8 bằng điện thoại mà sao ko có mục bài tập anh nhỉ?
anh có thể vd trả dữ liệu con về cha dc ko ạ
Có ai thắc mắc tại sao useState chỉ có 2 đối số mà lại dùng mảng chứ không dùng object không?
Dùng object sao được hả bạn, destructuring của object bạn phải biết tên của properties chứ.
do useState() return về mảng thì dùng mảng
Có ai hiểu rõ giải thích giúp mình nguyên lý chạy của 3 cái setCount dùng callback k nhỉ
chưa ra video mới luôn à ah
function App() {
console.log("react-app")
return (
);
}
A Sơn cho e hỏi sao code của e bị re-render lại 2 lần thế nhỉ
ở tab console nó hiện ra:
react-app
react-app
như này ạ :((
Mình cũng bị vậy, chưa biết sao luôn :(
@@namhv967 bạn bỏ React.Strictmode đi
em chào anh ạ
hi anh
Anh Sơn chưa ra video :))))
hello
hook chỉ dùng với function component
xem ngay mà vẫn ko kịp nhỉ
cmt t3