Kinh Nghiệm về ReactJS: Lifecycle của một component trong React (Phần 2) Mới Nhất
READ ALSO
Testnet là gì? Cách làm Testnet những dự án công trình bất Động sản
#### trong Excel là lỗi gì? Cách sửa lỗi #### nhanh gọn và đơn thuần và giản dị nhất
Tiếp nối phần 1, mời bạn đón xem phần 2 của chủ đề: Lifecycle của một component trong React!
NỘI DUNGCập nhật thông tinREAD ALSOĐổi tên một số trong những lifecycleCác Lifecycle mớiPhương thức getDerivedStateFromProps()Phương thức getSnapshotBeforeUpdate()Cập nhật thông tin
Xem lại Phần 1: Lifecycle của một component trong React
Đầu năm 2018, nhóm phát triển React đã đưa ra một số trong những yếu tố cần thay đổi để phục vụ render bất đông bộ. Một số yếu tố về lifecycle được phát hiện và đã tìm ra giải pháp khắc phục.
Một trong những yếu tố lớn số 1 là lúc thực thi những câu lệnh trong một số trong những hàm của lifecycle không được bảo vệ an toàn và uy tín. Một số hàm trong quy trình trước lúc render bị hiểu sai và lạm dụng. Hơn nữa, việc sử dụng sai hiệu suất cao trọn vẹn có thể gây ra nhiều yếu tố hơn khi render sự không tương đương bộ. Ví thế, React quyết định hành động thêm tiền tố “UNSAFE_” vào tên những phương thức trong những phiên bản React sau này.
Đổi tên một số trong những lifecycle
React không vô hiệu đột ngột những lifecyle không bảo vệ an toàn và uy tín, mà toàn bộ chúng ta sẽ tiến hành chú ý và vô hiệu từ từ trong những phiên bản React, rõ ràng là 3 phương thức:
componentWillMount()componentWillReceiveProps()componentWillUpdate()
16.3: React trình làng về những phương thức unsafe lifecycle: UNSAFE_componentWillMount(), UNSAFE_componentWillReceiveProps(), UNSAFE_componentWillUpdate(). Ở phiên bản này, cả hai tên phương thức cũ và mới đều sẽ thao tác thường thì.
16.3+: React bật chú ý trong console.log (DEV-mode warning) khi ta sử dụng những phương thức trên với tên cũ mà không còn tiền tố “UNSAFE_”. Cả hai tên phương thức cũ và mới vẫn sẽ thao tác thường thì.
Warning khi sử dụng componentWillMount() không còn tiền tố “UNSAFE_”
Warning khi sử dụng componentWillReceiveProps() không còn tiền tố “UNSAFE_”
Warning khi sử dụng componentWillUpdate() không còn tiền tố “UNSAFE_”
17.0: Ở phiên bản này trở đi, React sẽ vô hiệu trọn vẹn tên cũ của 3 phương thức trên. Chỉ khi sử dụng tên mới với “UNSAFE_ ” thì mới có thể trọn vẹn có thể hoạt động và sinh hoạt giải trí, nếu không sẽ gây nên ra lỗi.
Ghi chú: Nếu dự án công trình bất Động sản của toàn bộ chúng ta đang sử dụng phiên bản React =17.0 thì mới có thể thiết yếu thay tên, React khuyên dùng lệnh ‘codemod” để trọn vẹn có thể tự động hóa quy thay tên theo như đúng chuẩn của tớ.
cd your_project
npx react-codemod rename-unsafe-lifecycles
Các Lifecycle mới
Trong phiên bản 16.3, ngoài việc trình làng 3 phương thức đã được thay tên như trên, React có thêm 2 hàm trong lifecycle mới là getDerivedStateFromProps() và getSnapshotBeforeUpdate(), 2 phương thức mới này đều nằm trong quy trình Updating của một component.
Phương thức getDerivedStateFromProps()
Chúng ta hiểu nôm na phương thức này là “nhận state mới được tạo ra bởi props“.
Hàm render được khởi chạy khi xẩy ra 2 trường hợp sau:
Trường hợp 1: Khi ta gọi hàm setState để update lại state trong component.Trường hợp 2: Khi component đó là con có props được truyền vào từ component cha bị thay đổi.
Phương thức này được sử dụng ở trường hợp thứ hai, được khởi chạy trước lúc component được re-render (render lần thứ hai trở đi). Hàm này còn có 2 arguments là nextProps (props mới được thay đổi) và currentState (state hiện tại của component).
Mặc định nếu props thay đổi thì component sẽ re-render. Nhưng có một trường hợp là được props thay đổi nhưng component con không sở hữu và nhận ra được để re-render, đó là toàn bộ chúng ta khởi tạo state bằng chính props. Ví dụ:
class ParentComponent extends React.Component
constructor(props)
super(props);
this.state = gender: “” ;
handleChangeGender = (sự kiện) =>
this.setState( gender: sự kiện.target.value );
;
render()
return (
-Select-MaleFemale
);
class ChildComponent extends React.Component
constructor(props)
super(props);
this.state = name: props.gender ;
handleChange = (sự kiện) =>
this.setState( gender: sự kiện.target.value );
;
render()
return (
Hello! this.state.name
);
Theo ví dụ trên, ChildComponent có một state là ‘name’ được gán bằng ‘props.gender’ trong hàm constructor(). Cách này làm cho component không sở hữu và nhận ra được lúc nào props được thay đổi. Lúc đó, toàn bộ chúng ta cần sử dụng hàm getDerivedStateFromProps() để bắt được sự thay đổi của this.props, toàn bộ chúng ta so sánh nextProps và currentState để update lại state với giá trị props được thay đổi. Thêm đoạn code sau dưới hàm constructor trong ví dụ để trọn vẹn có thể update lại state:
static getDerivedStateFromProps = (nextProps, currentState) =>
// Bất cứ lúc nào props.gender thay đổi thì update lại state.
if (nextProps.gender !== currentState.name)
return
name: nextProps.gender,
;
// Trả về rỗng để biểu thị không còn update state
return null;
;
Ghi chú: Hạn chế gán giá trị của props vào lúc khởi tạo state để đơn thuần và giản dị hóa component và tránh xẩy ra lỗi.
Phương thức getSnapshotBeforeUpdate()
Hàm này được khởi chạy trước lúc component re-render thành công xuất sắc. Chạy sau hàm render() nhưng trước hàm componentDidUpdate(). Giá trị được trả về trong quy trình này được truyền vào argument thứ 3 (snapshot) của componentDidUpdate().
Xét ví dụ sau để xem cách sử dụng của hàm này. Đề bài là lúc toàn bộ chúng ta thêm tin nhắn vào list log, nếu list quá dài thì thanh scroll xuất hiện, tiếp theo đó thanh scroll sẽ tự động hóa scroll đến dòng mới nhất vừa mới được thêm vào:
class PostLog extends React.Component
constructor(props)
super(props);
this.state =
t: 0,
messages: [],
;
this.chatRef = React.createRef();
componentDidMount()
this.timerID = setInterval(() => this.addMessage(), 500);
addMessage()
let messages, t = this.state;
if (messages.length < 1000)
const newMessage = `Datetime: $new Date().toISOString() added log $t`;
messages = […messages, newMessage];
t++;
this.setState( messages, t );
renderMessage(msg, i)
return
;
render()
return (
Message Log
- this.state.messages.map((msg, i) =>
return this.renderMessage(msg, i);
)
);
Ví dụ trên, một log sẽ tiến hành tự động hóa thêm vào mỗi 500ms. Và ta sẽ thấy xuất hiện thanh scroll, nhưng không tự động hóa scroll xuống log mới nhất. Thêm đoạn code sau phía dưới hàm componentDidMount() để thấy được sự thay đổi:
// Hàm này sẽ trả về biến ‘snapshot’ trước lúc DOM update thành công xuất sắc.
getSnapshotBeforeUpdate(prevProps, prevState)
const current = this.chatRef;
const isScrolledToBottom =
current.scrollTop + current.offsetHeight >= current.scrollHeight;
return isScrolledToBottom ;
// Recieve the snapshot and check if the user is scrolled to the bottom of the log
// Hàm này nhận argument ‘snapshot’ và update lại vị trí scroll của element mới nhất.
componentDidUpdate(prevProps, prevState, snapshot)
if (snapshot.isScrolledToBottom)
this.chatRef.current.scrollTop = this.chatRef.current.scrollHeight;
Kết quả hiển thị như sau:
Demo GetDerivedStateFromProps()
Phương thức getSnapshotBeforeUpdate() có 2 arguments là prevProps (props trước đó) và prevState (state trước đó) và trả về là một giá trị bất kì. Hàm này sẽ không còn hoạt động và sinh hoạt giải trí riêng lẻ mà phối hợp sử dụng với componentDidUpdate().
Bên trên là những thay đổi về những phương thức mới lẫn cũ của lifecycle. Hy vọng nội dung bài viết này sẽ hữu ích với bạn. Cám ơn những bạn đã theo dõi nội dung bài viết.
Bài viết có tìm hiểu thêm thông tin từ link: https://vi.reactjs.org/blog/2018/03/27/update-on-async-rendering.html
CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO
Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Center, Số 72 Lê Thánh Tôn, Phường Bến Nghé, Quận 1, Thành phố Hồ Chí MinhVăn phòng đại diện thay mặt thay mặt: 42 Trần Phú, Phường 4, Quận 5, Thành phố Hồ Chí MinhĐiện thoại: 0364 333 333Tổng đài miễn phí: 1800 6734Email: [email protected]: www..org
Tags: Kiến thức Reactjs
đoạn Clip ReactJS: Lifecycle của một component trong React (Phần 2) mới nhất?
Heros đang tìm kiếm từ khóa ReactJS: Lifecycle của một component trong React (Phần 2) 2022-10-31 01:07:59 san sẻ Thủ Thuật về trong nội dung bài viết một cách Chi Tiết.
#ReactJS #Lifecycle #của #một #component #trong #React #Phần ReactJS: Lifecycle của một component trong React (Phần 2)
===> Nếu bạn có thắc mắc hay yếu tố gì nội dung bài viết trọn vẹn có thể để lại phản hồi cuối bài nha.