Thắc mắc về xử lý callback trong DOM event reactjs

[TruongAn (Trường)]

Chào buổi tối, em thấy trong react xử lý sự kiện DOM như này. Em ví dụ với click event:

Cách 1 : Đặt hàm callback ở ngoài

✔️✔️ good

const submit = () => { 
    console.log("Hello")
}

.......
< Button onClick={submit} /> 

Cách 2 : Viết function bên trong

✔️ normal

....
< Button onClick={ () => { console.log("Hello")} } />
....

Cách viết 3 : Viết trực tiếp hàm cần thực thi (lỗi logic, sai)

wrong

..
< Button onClick={ console.log("Hello") } />
...

Em còn hơi yếu về callback, em không biết cách 1 và 2 có gì khác nhau, khi gọi thì callback đó chạy như nào mà được khuyến cáo nên dùng cách 1 để tăng perfomence. Để ý thấy code mẫu trong codepen, code snippet dùng cách 1. Cách 3 thì tại sao lúc render nó tự chạy luôn.

Chúc cả nhà ngủ ngon!

[kisuluoibieng (Tên Gì Cũng Được)]

Bạn có thông tin về mô tả prop onClick không, cho mình xin link đi.

[TruongAn (Trường)]

Em ví dụ onClick anh, click trong js thuần qua react thành onClick. Hầu như tất cả event do DOM sinh ra đều dùng cách 1.

Docs trang chủ

Handling Events – React

[kisuluoibieng (Tên Gì Cũng Được)]

trên link này đã có giải thích và so sánh rồi, bạn đọc kĩ lại xem
và rõ ràng < Button onClick={ console.log("Hello") } /> câu lệnh này bạn đang truyền vào value cho prop onClick là một câu lệnh thực thi, câu lệnh này sẽ thực thi và trả về kết quả và được gán vào onclick

ở 2 cách trên, rõ ràng là khai báo hàm một hàm, hoặc một biến chứ không phải là một câu lệnh được gọi thực thi

nếu bạn hãy thử trả lời câu bên dưới xem

 //  đoạn code 1
const submit = () => console.log('hi');
const onClick = sayHi;

// đoạn code 2
const onClick = () => console.log('hi');

// đoạn code 3
const onClick = console.log('hi'); 

//  3 đoạn code này chạy ra kết quả gì, giải thích sự khác nhau nếu có

khuyến cáo để tăng performance cho một cái ví dụ nhỏ xíu như này là chưa hợp lý, phải có cái gì đó nhìn thấy được và giải thích được, còn nếu nguồn tài liệu mà bạn tham khảo đưa ra cái ví dụ như vậy và không có giải thích gì thì nên xem xét lại
có thể không phải là chém gió, nhưng nếu bạn đọc vào mà không biết vì sao, hoặc search mà vẫn không biết thì chắc là cũng chưa cần đọc đâu, học căn bản trước đi

[TruongAn (Trường)]

@kisuluoibieng

const sayHi = () => console.log('hi');
const onClick = sayHi;

// đoạn code 2
const onClick = () => console.log('hi');

// đoạn code 3
const onClick = console.log('hi'); 

• Đoạn code 1 và 2 là hoàn toàn giống nhau. Ở cả 2 đoạn code đều không có hàm nào được thực thi cả, chỉ là phép toán gán địa chỉ ô nhớ qua lại. Đoạn code 2 tạo ra arrow function ()=>console.log('hi') và gán vào onClick. Đoạn code 1 cũng tương tự nhưng lại đi đường vòng bằng cách gán arrow function đó vào hằng submit trước rồi mới mới gán submit vào onClick.
• Đoạn code 3 là thực thi hàm console.log('hi') đầu tiên rồi lấy kết quả gán vào onClick nhưng console.log không trả về gì cả nên giá trị onClick là undefined.

[TruongAn (Trường)]

Em trả lời như vậy có đúng không ạ? Nhờ anh/chị vào xác nhận giúp. Em cảm ơn!