🫢static getDerivedStateFromProps Full (ok)
https://www.geeksforgeeks.org/react-js-static-getderivedstatefromprops/
Example 1
Phương thức getDerivedStateFromProps là phương thức vòng đời tĩnh được sử dụng khi trạng thái của một thành phần phụ thuộc vào sự thay đổi của props . Đây là phương thức tĩnh được gọi ngay trước phương thức render() trong cả giai đoạn gắn kết và cập nhật trong React.
Các thông số:
props: Các props được cập nhật được truyền từ thành phần cha
trạng thái: Trạng thái hiện tại của thành phần
Trở lại:
Trả về một đối tượng để cập nhật trạng thái thành phần hoặc giá trị null.
getderivedFromProps là phương thức thay thế cho phương thức componentWillRecieveProps . Phương thức này được giới thiệu trong React 16.3. Phương thức này không có quyền truy cập vào vì đây là phương thức tĩnh và do đó không thể trực tiếp thao tác trạng thái.
Chúng ta phải trả về một đối tượng để cập nhật trạng thái hoặc null để chỉ ra rằng không có gì thay đổi.
src\App.tsx
Đầu vào onChange
không cập nhật trạng thái khi getDerivedStateFromProps
sử dụng. Sau khi tôi truyền props từ parent sang child, tôi đang kiểm tra getDerivedStateFromProps
từ child component. Bản demo đầy đủ - https://codesandbox.io/s/011m5jwyjw
Step 1
src\App.tsx
src\List.tsx
src\Form.tsx
Step 2 (kết quả như mong đợi)
Bắt đầu từ React 16.4, getDerivedStateFromProps
được gọi và lấy các props thành phần trên mỗi bản cập nhật bất kể nguyên nhân là gì (thay đổi props hoặc trạng thái). Vì vậy, mỗi lần bạn gọi this.setState
các giá trị biểu mẫu được đặt lại bằng mã này:
Để khắc phục, hãy lưu người dùng hiện tại vào trạng thái và form
chỉ đặt lại thuộc tính trạng thái khi người dùng thay đổi.
src\Form.tsx
Các phương pháp hay nhất để sử dụng getDerivedStateFromProps trong ứng dụng React của bạn
Rakesh Purohit
Người ủng hộ nhà phát triển
Cập nhật lần cuối vào ngày 27 tháng 10 năm 2023
React là một thư viện JavaScript phổ biến để xây dựng giao diện người dùng, đặc biệt là các ứng dụng một trang, nơi bạn cần trải nghiệm người dùng nhanh và tương tác. Một trong những tính năng chính của React là kiến trúc dựa trên thành phần. Trong React, giao diện người dùng được chia thành nhiều thành phần, mỗi thành phần chịu trách nhiệm hiển thị một phần của UI.
Trong bài đăng trên blog này, chúng ta sẽ tập trung vào một khía cạnh cụ thể của các thành phần React: phương thức getDerivedStateFromProps. Đây là một phương thức tĩnh tồn tại trên thành phần lớp trong React. Nó là một phần của các phương thức vòng đời của thành phần, là một loạt các phương thức được gọi tại các thời điểm khác nhau trong vòng đời của một thành phần.
Hiểu về vòng đời của thành phần React
Để hiểu getDerivedStateFromProps, trước tiên điều quan trọng là phải hiểu vòng đời của một thành phần React. Vòng đời của một thành phần React có thể được chia thành ba giai đoạn chính: Gắn kết, Cập nhật và Gỡ gắn kết.
Giai đoạn Mounting là khi thành phần instance được tạo và chèn vào DOM. Giai đoạn Updating là khi thành phần được render lại do có sự thay đổi về props hoặc state. Giai đoạn Unmounting là khi thành phần bị xóa khỏi DOM.
Vai trò của getDerivedStateFromProps trong vòng đời thành phần React
getDerivedStateFromProps được gọi ngay trước phương thức render trong quá trình gắn kết ban đầu của thành phần và cũng trước mỗi lần render lại. Phương thức này tồn tại trong những trường hợp sử dụng hiếm hoi khi trạng thái phụ thuộc vào những thay đổi trong props theo thời gian.
Phương thức getDerivedStateFromProps có hai tham số: nextProps và prevState. nextProps là một đối tượng biểu diễn các props mới mà thành phần đang nhận được và prevState là một đối tượng biểu diễn trạng thái hiện tại của thành phần. Phương thức này phải trả về một đối tượng để cập nhật trạng thái hoặc null để chỉ ra rằng các props mới không yêu cầu bất kỳ cập nhật trạng thái nào.
Cú pháp của getDerivedStateFromProps
Phương thức getDerivedStateFromProps là một phương thức tĩnh, nghĩa là nó được gọi trên chính lớp đó, không phải trên các thể hiện của lớp đó. Điều quan trọng cần lưu ý là bạn không thể sử dụng 'this' bên trong getDerivedStateFromProps. Sau đây là cú pháp cơ bản của getDerivedStateFromProps:
Trong đoạn mã này, getDerivedStateFromProps là một phương thức tĩnh có hai đối số: props và state. Phương thức này trả về một trạng thái mới dựa trên props hoặc null nếu props mới không yêu cầu bất kỳ cập nhật trạng thái nào.
Cách sử dụng getDerivedStateFromProps: Một ví dụ
Hãy xem một ví dụ về cách sử dụng getDerivedStateFromProps. Giả sử chúng ta có một thành phần hiển thị bình luận của người dùng. Văn bản bình luận được truyền dưới dạng prop cho thành phần. Bất cứ khi nào prop thay đổi, chúng ta muốn cập nhật trạng thái của thành phần bằng văn bản bình luận mới.
Sau đây là cách chúng ta có thể đạt được điều này với getDerivedStateFromProps:
Trong ví dụ này, getDerivedStateFromProps kiểm tra xem prop bình luận mới có khác với trạng thái bình luận hiện tại không. Nếu khác, nó sẽ trả về trạng thái mới với bình luận mới. Nếu không, nó sẽ trả về null, cho biết không cần cập nhật trạng thái.
Sự khác biệt giữa getDerivedStateFromProps và các phương thức vòng đời khác
getDerivedStateFromProps là phương thức vòng đời React duy nhất theo một số cách. Đầu tiên, nó là phương thức tĩnh, nghĩa là nó không có quyền truy cập vào thể hiện của thành phần. Đây là lý do tại sao bạn không thể sử dụng 'this' bên trong getDerivedStateFromProps.
Thứ hai, getDerivedStateFromProps được gọi trước khi render ban đầu và trước mỗi lần cập nhật. Điều này khác với các phương thức vòng đời khác như componentDidMount và componentDidUpdate, chỉ được gọi một lần sau lần render đầu tiên và sau mỗi lần cập nhật.
Cuối cùng, không giống như các phương thức vòng đời khác, getDerivedStateFromProps không kích hoạt việc render lại. Thay vào đó, nó cho phép bạn cập nhật trạng thái dựa trên các thay đổi trong props và trạng thái được cập nhật sẽ được sử dụng trong lần render tiếp theo.
Tránh những cạm bẫy phổ biến với getDerivedStateFromProps
Mặc dù getDerivedStateFromProps có thể hữu ích trong một số trường hợp, nhưng điều quan trọng là phải sử dụng nó một cách tiết kiệm và nhận thức được những cạm bẫy tiềm ẩn của nó. Một lỗi phổ biến là sử dụng getDerivedStateFromProps để phản chiếu props trong trạng thái. Điều này có thể dẫn đến lỗi và khiến thành phần khó hiểu hơn.
Thay vì sao chép props vào state, bạn nên hướng đến việc làm cho component của mình được kiểm soát hoàn toàn hoặc không được kiểm soát hoàn toàn. Một component được kiểm soát hoàn toàn nhận tất cả dữ liệu của nó dưới dạng props và truyền đạt các thay đổi đến component cha của nó thông qua các lệnh gọi lại. Một component không được kiểm soát quản lý state của riêng nó bên trong và không dựa vào props để lấy dữ liệu.
Một cạm bẫy phổ biến khác là sử dụng getDerivedStateFromProps khi bạn có thể sử dụng một giải pháp thay thế đơn giản hơn. Ví dụ, nếu bạn cần thực hiện một số phép tính mỗi khi một prop thay đổi, bạn có thể muốn sử dụng getDerivedStateFromProps và lưu trữ kết quả trong trạng thái. Tuy nhiên, thường thì việc thực hiện phép tính trong phương thức render sẽ đơn giản và hiệu quả hơn và tránh các bản cập nhật trạng thái không cần thiết.
Tầm quan trọng của việc không sao chép Props vào State của Component
Như đã đề cập trước đó, một trong những lỗi thường gặp với getDerivedStateFromProps là sao chép props vào trạng thái của thành phần. Đây là một anti-pattern trong React và nên tránh vì một số lý do.
Đầu tiên, nó làm cho thành phần khó hiểu hơn. Khi bạn nhìn thấy một giá trị trong trạng thái, không rõ liệu nó được điều khiển bởi thành phần hay bởi thành phần cha thông qua props.
Thứ hai, nó có thể dẫn đến lỗi. Nếu thành phần cha cập nhật prop, nhưng thành phần con đã sao chép prop vào trạng thái của nó, thành phần con sẽ không phản ánh giá trị prop mới.
Cuối cùng, nó có thể gây ra việc render lại không cần thiết. Mỗi lần bạn gọi setState, thành phần sẽ render lại. Nếu bạn sao chép props vào state trong getDerivedStateFromProps, bạn có thể gây ra việc render lại không cần thiết mỗi khi thành phần nhận được props mới.
Truyền dữ liệu từ thành phần cha sang thành phần con
Trong React, dữ liệu thường được truyền từ thành phần cha sang thành phần con thông qua props. Đây là luồng dữ liệu một chiều, từ thành phần cha sang thành phần con. Thành phần con có thể sử dụng props trong phương thức render của nó, nhưng không thể sửa đổi props.
Sau đây là ví dụ về cách truyền dữ liệu từ thành phần cha sang thành phần con:
Trong ví dụ này, ParentComponent truyền data prop của nó cho ChildComponent. ChildComponent sau đó sử dụng data prop trong phương thức render của nó.
Hiểu về trạng thái được dẫn xuất từ Props
Derived state đề cập đến trạng thái được bắt nguồn từ props. Đây là trạng thái cần được cập nhật bất cứ khi nào props thay đổi. Đây là nơi getDerivedStateFromProps xuất hiện. Nó cho phép bạn cập nhật trạng thái dựa trên những thay đổi trong props.
Tuy nhiên, điều quan trọng cần lưu ý là trạng thái có nguồn gốc có thể khiến các thành phần của bạn khó hiểu hơn và có thể dẫn đến lỗi. Trong hầu hết các trường hợp, tốt hơn là sử dụng props trực tiếp thay vì lấy trạng thái từ chúng.
Thứ tự các phương thức vòng đời trong React
Trong thành phần lớp React, các phương thức vòng đời được gọi theo thứ tự sau:
constructor
tĩnh getDerivedStateFromProps
làm ra
thành phầnDidMount
Khi thành phần cập nhật, các phương thức vòng đời được gọi theo thứ tự này:
static getDerivedStateFromProps
shouldComponentUpdate
render
lấySnapshotBeforeUpdate
thành phầnDidUpdate
Cuối cùng, khi thành phần được hủy gắn kết, phương thức componentWillUnmount sẽ được gọi.
Setting the State of a Component in React
Trong React, bạn có thể thiết lập trạng thái của một thành phần bằng phương thức setState. Phương thức này được sử dụng để cập nhật trạng thái của thành phần và kích hoạt việc kết xuất lại.
Sau đây là ví dụ về cách thiết lập trạng thái trong thành phần React:
Trong ví dụ này, MyComponent có trạng thái đếm. Phương thức incrementCount cập nhật trạng thái đếm bằng phương thức setState. Nút trong phương thức render kích hoạt phương thức incrementCount khi được nhấp.
Transferring Data from Child to Parent in React
Trong khi dữ liệu trong React thường chảy xuống từ thành phần cha đến thành phần con, có những trường hợp thành phần con cần gửi dữ liệu ngược lên thành phần cha. Điều này có thể đạt được bằng cách sử dụng các hàm gọi lại.
Một thành phần cha có thể truyền một hàm cho một thành phần con thông qua props. Sau đó, thành phần con có thể gọi hàm này và truyền dữ liệu trở lại thành phần cha. Sau đây là một ví dụ:
Trong ví dụ này, ParentComponent truyền một hàm handleData cho ChildComponent. Sau đó, ChildComponent gọi hàm này và truyền một chuỗi cho hàm đó.
Examples of Derived State in React
Derived state trong React đề cập đến trạng thái được bắt nguồn từ props. Đây là trạng thái cần được cập nhật bất cứ khi nào props thay đổi. Sau đây là một ví dụ về derived state:
Trong ví dụ này, MyComponent có trạng thái derivedData được bắt nguồn từ prop data. Phương thức transformData được sử dụng để chuyển đổi prop data thành trạng thái derivedData. Phương thức getDerivedStateFromProps cập nhật trạng thái derivedData bất cứ khi nào prop data thay đổi.
Understanding Props in React with Examples
Props trong React được sử dụng để truyền dữ liệu từ các thành phần cha sang các thành phần con. Chúng chỉ đọc và không thể bị thay đổi bởi thành phần con. Sau đây là một ví dụ về việc sử dụng props trong React:
Trong ví dụ này, ParentComponent truyền một prop name cho ChildComponent. Sau đó, ChildComponent sử dụng prop name trong phương thức render của nó.
Sử dụng Derived State từ Props trong Functional Components
Trong các thành phần chức năng, bạn có thể sử dụng các hook useState và useEffect để đạt được chức năng tương tự như getDerivedStateFromProps trong các thành phần lớp. Sau đây là một ví dụ:
Trong ví dụ này, thành phần chức năng MyComponent sử dụng hook useState để tạo trạng thái derivedData. Hook useEffect sau đó được sử dụng để cập nhật trạng thái derivedData bất cứ khi nào data prop thay đổi.
Sử dụng State như Props trong React
Trong React, state có thể được truyền dưới dạng props từ thành phần cha sang thành phần con. Điều này cho phép thành phần con sử dụng giá trị state và render lại khi state thay đổi. Sau đây là một ví dụ:
Trong ví dụ này, ParentComponent có trạng thái dữ liệu. Nó truyền trạng thái này dưới dạng prop cho ChildComponent. Sau đó, ChildComponent sử dụng prop dữ liệu trong phương thức render của nó.
Vai trò của getDerivedStateFromProps trong Render có điều kiện
getDerivedStateFromProps có thể được sử dụng trong kết xuất có điều kiện để cập nhật trạng thái dựa trên các thay đổi trong props. Điều này có thể hữu ích khi đầu ra kết xuất phụ thuộc vào cả props và trạng thái.
Sau đây là ví dụ về việc sử dụng getDerivedStateFromProps trong kết xuất có điều kiện:
Trong ví dụ này, MyComponent có trạng thái isDataLoaded. Phương thức getDerivedStateFromProps cập nhật trạng thái này dựa trên việc data prop có phải là null hay không. Sau đó, phương thức render sử dụng trạng thái isDataLoaded để render đầu ra khác nhau theo điều kiện.
Tác động của getDerivedStateFromProps lên việc kết xuất lại thành phần
getDerivedStateFromProps không kích hoạt việc render lại. Thay vào đó, nó cho phép bạn cập nhật trạng thái trước khi phương thức render được gọi. Trạng thái được cập nhật sau đó được sử dụng trong phương thức render.
Tuy nhiên, điều quan trọng cần lưu ý là việc gọi setState trong getDerivedStateFromProps sẽ không kích hoạt việc render lại bổ sung. Điều này là do getDerivedStateFromProps được gọi ngay trước phương thức render, do đó bản cập nhật trạng thái sẽ được bao gồm trong lần render sắp tới.
Kết luận: Sức mạnh và cạm bẫy của getDerivedStateFromProps
getDerivedStateFromProps là một công cụ mạnh mẽ trong React, nhưng nên sử dụng một cách tiết kiệm và thận trọng. Nó phù hợp nhất cho những trường hợp sử dụng hiếm hoi khi trạng thái phụ thuộc vào những thay đổi trong props theo thời gian.
Tuy nhiên, getDerivedStateFromProps có thể khiến các thành phần của bạn khó hiểu hơn và có thể dẫn đến lỗi nếu không được sử dụng đúng cách. Thường thì tốt hơn là sử dụng props trực tiếp thay vì lấy trạng thái từ chúng và làm cho các thành phần của bạn được kiểm soát hoàn toàn hoặc không được kiểm soát hoàn toàn.
Hãy nhớ rằng, chìa khóa để sử dụng getDerivedStateFromProps hiệu quả là hiểu khi nào cần thiết và khi nào nên sử dụng giải pháp thay thế đơn giản hơn. Với việc sử dụng cẩn thận, getDerivedStateFromProps có thể giúp bạn tạo ra các thành phần React linh hoạt và mạnh mẽ hơn.
Bạn không có nhiều thời gian? Hãy tăng tốc với DhiWise!
Bạn có thấy mệt mỏi khi phải thiết kế màn hình thủ công, viết mã vào cuối tuần và nợ kỹ thuật không? Hãy để DhiWise giải quyết cho bạn!
Bạn có thể xây dựng ngay một cửa hàng thương mại điện tử, ứng dụng chăm sóc sức khỏe, danh mục đầu tư, trang web blog, phương tiện truyền thông xã hội hoặc bảng điều khiển quản trị. Sử dụng thư viện hơn 40 mẫu miễn phí được xây dựng sẵn của chúng tôi để tạo ứng dụng đầu tiên của bạn bằng DhiWise.
Last updated
Was this helpful?