THẢO LUẬN

Avatar
đã bình luận câu trả lời trong câu hỏi
thg 2 26, 2019 2:36 SA

@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

+1
Avatar
đã bình luận cho bài viết
thg 2 26, 2019 2:22 SA

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.

0

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á.

0

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. 1.PNG Nhưng khi chuyển sang mục authorization rồi điền access token thì lại được. 2.PNG

0
thg 2 25, 2019 11:45 CH

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 :

shouldComponentUpdate(nextProps, nextState) {
  return this.state.value != nextState.value;
}

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 !

0
thg 2 25, 2019 5:31 CH

Cảm ơn Toàn đã chia sẻ! Rất hữu ích!

0
Avatar
đã bình luận cho bài viết
thg 2 25, 2019 4:20 CH

@doantrongtai Ghê vậy (??)

+1
Avatar
đã bình luận câu trả lời trong câu hỏi
thg 2 25, 2019 3:52 CH

@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é

Screenshot 2019-02-25 22.49.48.png

khi componentDidMount chạy results sẽ ra default như sau

Screenshot 2019-02-25 22.52.27.png

0
thg 2 25, 2019 3:37 CH

Comment chuẩn !

0

Ó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)

0
thg 2 25, 2019 10:44 SA

bài viết hữu ích quá, cảm ơn tác giả.

0

@dat.hedspi cảm ơn bạn. Giờ thì mình hiểu hơn một chút rồi.

+1

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" }

Đơn giản nhưng vẫn hữu ích đúng ko 😄

0

@dat.hedspi ok, cảm ơn bạn nhé.

+1

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

0

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 😄

+1

@dat.hedspi iterator method là các instance method được sử dụng cho vòng lặp. Chuẩn bạn ạ.

0

Trong sách Ruby mình đính kèm ở cuối bài, nó có một câu như thế này:

The use of blocks is fundamental to the use of iterators

nên mình nghĩ là mình hiểu đúng.

+1

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ỉ?

Bạn cho ý kiến nhé 😄

0
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí