- vừa được xem lúc

Đôi chút hiểu về useEffect trong reactJS Hook.

0 0 37

Người đăng: Thắng Trần Đức

Theo Viblo Asia

1.Giới thiệu

  • Trong lần trước mình có giới thiệu cũng như có chia sẽ nhưng gi mình biết về react Hook cụ thể là useState trong reactJS. Link bài trước Đôi chút về useState thì trong bài này mình cũng muốn chia sẻ thêm cái nữa trong react Hook đó là useEffect. Sẽ tìm hiểu cơ bản khái niệm cũng như cách dùng của nó. useEffect mục đích để quản lý vòng đời của của một component và nó phục vụ chúng ta sử dụng trong function component thay vì các lifecycle như trước đây trong class component (về cơ bản là giống nhau)

1.Nội dung

Vậy ý nghĩa khi sinh ra useEffect thì mình nói ở trên thì cụ thể nó sẽ được dùng như sau:

#syntax
useEffect(effectFunction, arrayDependencies)

Vậy cú pháp thì như vậy ! Thực tế nó sẽ tương đương như thế nào so các lifecycle trong class component

  • componentDidUpdate:

Khi chúng ta muốn dùng componentDidUpdate trong function component chúng ta sẽ dùng như sau:

useEffect(function)

Như vậy thì function sẽ được gọi mỗi khi component được render xong (giống componentDidUpdate).Cùng xem ví dụ về nó nhé.

() => { const [count, setCount] = useState(0) const handleClick = () => setCount(count + 1) useEffect(() => { document.title = 'Count is: ' + count }) return <div> <p>Để title trang web để nhận thấy thay đổi</p> <button onClick={handleClick}>Increment Count</button> </div>
}
NOTE:
Như trong ví dụ trên thì bạn thấy hàm `function` hay chính là `setCount` luôn được gọi mỗi khi component được render xong vậy làm thế nào để ta có thể xử lý hàm này được gọi tới theo điều kiện của mình thì chính là đối số thứ 2 mà ta có đề cập trong syntax ban đầu `arrayDependencies` đối số này được hiểu là mỗi lần mảng này thay đổi và component render xong thì hàm `setCount` mới được gọi tới. :D
  • componentDidMount:

Ở trên mình có nói tới đối số thứ 2 là arrayDependencies khi thay đổi thì đối số thứ nhất mới thực thi (function) vậy nếu arrayDependencies không thay đổi tức ta gán bằng [] thì điều này có nghĩa nó tương đương với componentDidMount vì khi này function trong useEffect chỉ gọi 1 lần.Cùng xem ví dụ dưới:

() => { const [count, setCount] = useState(0) const handleClick = () => setCount(count + 1) useEffect(() => { document.title = 'Count is: ' + count }, []) return <div> <p>Để title trang web để nhận thấy thay đổi</p> <button onClick={handleClick}>Increment Count</button> </div>
}
  • componentUnWillMount:

Và một lifecycle nữa mình mình chia sẽ với mọi người nữa là componentUnWillMount thì thực tế khi sử dụng useEffect nó sẽ như thế nào? Thì như các bạn đã biết thì componentUnWillMount chạy mỗi khi một component chuẩn bị remove khỏi tree dom. Cùng xét ví dụ sau:

() => { useEffect(() => { const clickWindow = () => console.log('1') window.addEventListener('click', clickWindow) // return 1 function, sẽ được gọi ngay trước khi component unmount return () => { window.removeEventListener('click', clicked) } }, []) return <div>F12 check log của trình duyệt!</div>
}

Thì thực tế thì useEffect cho phép chúng ta return 1 function, function này sẽ thực thi trước khi mà component đó được unmounted.

3.Tổng kết

Trêm đây là một chút hiểu biết của mình cảm ơn các bạn đã đọc.

5.Refers

https://reactjs.org/docs/hooks-effect.html

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 496

- vừa được xem lúc

Cài đặt WSL / WSL2 trên Windows 10 để code như trên Ubuntu

Sau vài ba năm mình chuyển qua code trên Ubuntu thì thật không thể phủ nhận rằng mình đã yêu em nó. Cá nhân mình sử dụng Ubuntu để code web thì thật là tuyệt vời.

0 0 373

- vừa được xem lúc

Đặt tên commit message sao cho "tình nghĩa anh em chắc chắn bền lâu"????

. Lời mở đầu. .

1 1 691

- vừa được xem lúc

Tìm hiểu về Resource Controller trong Laravel

Giới thiệu. Trong laravel, việc sử dụng các route post, get, group để gọi đến 1 action của Controller đã là quá quen đối với các bạn sử dụng framework này.

0 0 334

- vừa được xem lúc

Phân quyền đơn giản với package Laravel permission

Như các bạn đã biết, phân quyền trong một ứng dụng là một phần không thể thiếu trong việc phát triển phần mềm, dù đó là ứng dụng web hay là mobile. Vậy nên, hôm nay mình sẽ giới thiệu một package có thể giúp các bạn phân quyền nhanh và đơn giản trong một website được viết bằng PHP với framework là L

0 0 417

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 413