@wiliamfeng nếu Form của e chỉ cần lấy kết quả khi bấm Submit thì có lẽ kết qủa đó e k nên lưu vào state vì trong trường hợp này a nghĩ Form có cần phải render lại để làm gì đâu. Ở đây a vẫn cho tất cả là PureComponent vì trong các component ở đây k có cái nào có tình trạng renderProps nên theo a cứ để PureComponent đi. NẾU RESULT Ở ĐÂY LÀ STATE nó vẫn sẽ render tất cả mặc dù mình đang dùng PureComponent do props của nó là onChange đang reference tới 1 hàm _handleInputTextChange là hàm HOF và nó bị thay đổi điều này khiến InputText vẫn sẽ re-render nên trong trường hợp này có thể để InputText là component rồi trong shouldComponentUpdate so sánh nextState.value !== this.state.value thì mới cho render vì value này cũng trùng với value truyền qua hàm onChange. NHƯNG THEO A TRONG TRƯỜNG HỢP FORM KHÔNG THAY ĐỔI THÌ K NÊN DÙNG STATE
Ở đây a ví dụ có 1 InputText tính toán cái gì đó ở đây a ví dụ đơn giản chỉ trả ra value ở hàm onChange. 1 Form nhận vào data và trả ra result ở hàm onSubmit là kết quả cuối cùng của form này.
Còn trường hợp vì sao a lại lấy default mà không khởi tạo luôn vì a đang ví dụ data đó từ server trả về và e đâu biết có những trường nào đâu mà tự nhập sẵn trước được
Đây là demo e bật console lên xem nhé. khi e thay đổi InputText của cái nào thì cái đó render thôi xong rồi submit thì vẫn ra kết quả nhé
Anh cho em hỏi muốn limit bản ghi http://localhost:1281/odata/Product trong cấu hình thì làm thế nào ạ. Vì khi đặt các param kia thì nó sẽ quét tất cả dữ liệu rồi mới lọc ra theo điều kiện. Nếu api connect đến một DB dữ liệu lớn thì không ổn.
Còn tuỳ thuộc vào bạn có bao nhiêu điều kiện trong câu truy vấn nữa, nếu mà ít thì bạn nên sử dụng eloquent(pivot table) sẽ tiện hơn, còn nếu muốn điều kiện chặt chẽ hơn thì nên sử dụng query builder nhá.
Hi Mỹ, cho mình hỏi chút. Khi mình test bằng Postman phần api user thì khi điền access token vào phần header thì báo lỗi Unauthenticated.
Nhưng khi chuyển sang mục authorization rồi điền access token thì lại được.
cái này e vẫn chưa thật hiểu. Về lifecycle shouldComponentUpdate thì em biết nó dùng để check xem có nên render() lại một component hay không - tuy nhiên trường hợp sử dụng nó là khi một component cha thay đổi dẫn đến việc render() lại một component con một cách không cần thiết => khi đó ta mới dùng shouldComponentUpdate để kiểm tra thông qua cái này :
tức là ta kiểm tra state hiện tại với state kế tiếp có khác nhau hay không.Nếu khác mới cho render() lại. Còn về PureComponent thì e chưa đọc nhiều nhưng hình như nó là dùng để mình bớt phải sử dụng đến shouldComponentUpdate.
Còn đối với câu hỏi trong trường hợp trên của e thì không có quan hệ cha - con trong component vì ở đây chỉ có duy nhất một component Form thôi. Và khi người dùng thay đổi giá trị ở 1 trường nào đó => bắt buộc phải set lại giá trị của trường đó trong state => vì vậy state chắc chắn bị thay đổi => nên khó tránh khỏi việc render() lại toàn bộ Form lắm => e không biết là có cách nào hạn chế việc đó ko ?
Thêm một ý nữa là trong ví dụ của anh ở trên là anh thực hiện việc setState trong componentDidMount() => làm cho component render() thêm lần nữa => trong khi việc này đâu cần thiết vì mình có thể khởi tạo giá trị cho các trường trong state ngay từ đầu cũng được mà ?
E cũng chỉ đưa ra một vài ý kiến trên sự hiểu biết cá nhân của mình thôi. Có chỗ nào sai xót mong anh giảng giải thêm ạ . Tks anh nhiều !
@wiliamfeng nên nhớ các Component Form View kia e phải để làm PureComponent nhé. chưa biết thì đọc thêm về PureComponent, shouldComponentUpdate, shallow compare trong react nhé.
Và nên nhớ lúc đầu e nên tạo giá trị mặc định bằng cách biến đổi cái mảng ví dụ data như của a ở trên ra để setState mặc định nhé
khi componentDidMount chạy results sẽ ra default như sau
việc sử dụng block trong rails thì phần lớn các bạn chỉ dùng để phục vụ cho loop, ngoài ra nếu dùng với ruby thì nó cũng có nhiều tác dụng nhỏ nhỏ khác ví dụ
def my_method
yield("John", 2)
end
my_method { |name, age| puts "#{name} is #{age} years old" }
Bạn hiểu đúng, mình ko phản bác đâu , đúng là nó chính là nền tảng để bạn sử dụng cho các method loop.
Nhưng định nghĩa về block thì ko phải là định nghĩa nó là nền tảng của phần nào mà định nghĩa chính bản thân thằng block "đơn giản chỉ là một khối lệnh thôi", ý mính là vậy
theo mình hiểu thì các iterator method method của bạn chính là các instance method đúng ko? và nó được sử dụng cho vòng loop (kiểu áp dụng iterator pattern - phần này là áp dụng nhé) đúng ko? Với mình vẫn đang suy nghĩ định nghĩa của block nó đơn giản chỉ là khối lệnh thôi chứ đâu phải là nền tảng của riêng các method dùng để loop nhỉ?
THẢO LUẬN
@wiliamfeng nếu Form của e chỉ cần lấy kết quả khi bấm Submit thì có lẽ kết qủa đó e k nên lưu vào state vì trong trường hợp này a nghĩ Form có cần phải render lại để làm gì đâu. Ở đây a vẫn cho tất cả là PureComponent vì trong các component ở đây k có cái nào có tình trạng renderProps nên theo a cứ để PureComponent đi. NẾU RESULT Ở ĐÂY LÀ STATE nó vẫn sẽ render tất cả mặc dù mình đang dùng PureComponent do props của nó là onChange đang reference tới 1 hàm _handleInputTextChange là hàm HOF và nó bị thay đổi điều này khiến InputText vẫn sẽ re-render nên trong trường hợp này có thể để InputText là component rồi trong shouldComponentUpdate so sánh nextState.value !== this.state.value thì mới cho render vì value này cũng trùng với value truyền qua hàm onChange. NHƯNG THEO A TRONG TRƯỜNG HỢP FORM KHÔNG THAY ĐỔI THÌ K NÊN DÙNG STATE
Ở đây a ví dụ có 1 InputText tính toán cái gì đó ở đây a ví dụ đơn giản chỉ trả ra value ở hàm onChange. 1 Form nhận vào data và trả ra result ở hàm onSubmit là kết quả cuối cùng của form này.
Còn trường hợp vì sao a lại lấy default mà không khởi tạo luôn vì a đang ví dụ data đó từ server trả về và e đâu biết có những trường nào đâu mà tự nhập sẵn trước được
Đây là demo e bật console lên xem nhé. khi e thay đổi InputText của cái nào thì cái đó render thôi xong rồi submit thì vẫn ra kết quả nhé
https://codesandbox.io/s/n439n6p7p
Thực ra vẫn còn 1 cách nữa mà vẫn dùng state. nhưng comment dài quá nên thôi
Anh cho em hỏi muốn limit bản ghi http://localhost:1281/odata/Product trong cấu hình thì làm thế nào ạ. Vì khi đặt các param kia thì nó sẽ quét tất cả dữ liệu rồi mới lọc ra theo điều kiện. Nếu api connect đến một DB dữ liệu lớn thì không ổn.
Còn tuỳ thuộc vào bạn có bao nhiêu điều kiện trong câu truy vấn nữa, nếu mà ít thì bạn nên sử dụng eloquent(pivot table) sẽ tiện hơn, còn nếu muốn điều kiện chặt chẽ hơn thì nên sử dụng query builder nhá.
Hi Mỹ, cho mình hỏi chút. Khi mình test bằng Postman phần api user thì khi điền access token vào phần header thì báo lỗi Unauthenticated. Nhưng khi chuyển sang mục authorization rồi điền access token thì lại được.
cái này e vẫn chưa thật hiểu. Về lifecycle
shouldComponentUpdate
thì em biết nó dùng để check xem có nênrender()
lại mộtcomponent
hay không - tuy nhiên trường hợp sử dụng nó là khi mộtcomponent
cha thay đổi dẫn đến việc render() lại mộtcomponent
con một cách không cần thiết => khi đó ta mới dùngshouldComponentUpdate
để kiểm tra thông qua cái này :tức là ta kiểm tra
state
hiện tại vớistate
kế tiếp có khác nhau hay không.Nếu khác mới chorender()
lại. Còn vềPureComponent
thì e chưa đọc nhiều nhưng hình như nó là dùng để mình bớt phải sử dụng đếnshouldComponentUpdate
.Còn đối với câu hỏi trong trường hợp trên của e thì không có quan hệ cha - con trong
component
vì ở đây chỉ có duy nhất mộtcomponent
Form thôi. Và khi người dùng thay đổi giá trị ở 1 trường nào đó => bắt buộc phải set lại giá trị của trường đó trongstate
=> vì vậy state chắc chắn bị thay đổi => nên khó tránh khỏi việc render() lại toàn bộ Form lắm => e không biết là có cách nào hạn chế việc đó ko ?Thêm một ý nữa là trong ví dụ của anh ở trên là anh thực hiện việc
setState
trongcomponentDidMount()
=> làm cho component render() thêm lần nữa => trong khi việc này đâu cần thiết vì mình có thể khởi tạo giá trị cho các trường trongstate
ngay từ đầu cũng được mà ?E cũng chỉ đưa ra một vài ý kiến trên sự hiểu biết cá nhân của mình thôi. Có chỗ nào sai xót mong anh giảng giải thêm ạ . Tks anh nhiều !
Cảm ơn Toàn đã chia sẻ! Rất hữu ích!
@doantrongtai Ghê vậy (??)
@wiliamfeng nên nhớ các Component Form View kia e phải để làm PureComponent nhé. chưa biết thì đọc thêm về PureComponent, shouldComponentUpdate, shallow compare trong react nhé. Và nên nhớ lúc đầu e nên tạo giá trị mặc định bằng cách biến đổi cái mảng ví dụ data như của a ở trên ra để setState mặc định nhé
khi componentDidMount chạy results sẽ ra default như sau
Comment chuẩn !
Óc Hợi dạo này còn marketing ở cuối post luôn hả. Tiếp tục giữ lửa nhé (go)
bài viết hữu ích quá, cảm ơn tác giả.
@dat.hedspi cảm ơn bạn. Giờ thì mình hiểu hơn một chút rồi.
việc sử dụng block trong rails thì phần lớn các bạn chỉ dùng để phục vụ cho loop, ngoài ra nếu dùng với ruby thì nó cũng có nhiều tác dụng nhỏ nhỏ khác ví dụ
Đơn giản nhưng vẫn hữu ích đúng ko
@dat.hedspi ok, cảm ơn bạn nhé.
việc passing object trong rails nó là passing referrence value chứ ko phải chỉ là truyền tham chiếu đâu, bạn có thể tham khảo thêm ở đây nhé https://launchschool.com/blog/object-passing-in-ruby
Bạn hiểu đúng, mình ko phản bác đâu , đúng là nó chính là nền tảng để bạn sử dụng cho các method loop. Nhưng định nghĩa về block thì ko phải là định nghĩa nó là nền tảng của phần nào mà định nghĩa chính bản thân thằng block "đơn giản chỉ là một khối lệnh thôi", ý mính là vậy
@dat.hedspi
iterator method
là cácinstance method
được sử dụng cho vòng lặp. Chuẩn bạn ạ.Trong sách Ruby mình đính kèm ở cuối bài, nó có một câu như thế này:
nên mình nghĩ là mình hiểu đúng.
theo mình hiểu thì các
iterator method
method của bạn chính là cácinstance method
đúng ko? và nó được sử dụng cho vòng loop (kiểu áp dụng iterator pattern - phần này là áp dụng nhé) đúng ko? Với mình vẫn đang suy nghĩ định nghĩa của block nó đơn giản chỉ là khối lệnh thôi chứ đâu phải là nền tảng của riêng các method dùng để loop nhỉ?Bạn cho ý kiến nhé