Thay thế một số LifeCycle của class Component bằng Hook trong function component

Trong bài viết này chúng ta cùng tìm hiểu tiếp một số chức năng của React Hook qua đó giúp bạn có thể đỡ khổ hơn với LifeCycle của class.

useState

Cái hàm này đã nói lên tất cả là chúng ta cần khởi tạo state cho một functional component và tất nhiên là có khởi tạo cụng phải có setState cho nó đúng không ạ.
Ví dụ ngày xưa viết Class thì mình dùng như thế này:

constructor(props) {
     super(props);
     this.state = { isLoading: false }
 }
 onClick() {
     this.setState({
         isLoading: true,
     })
 }

Còn dùng useState cực kỳ ngắn gọn chỉ cần làm như sau:

const [isLoading, setLoading] = useState(false);

onClick() {
     setLoading(true)
 }

Khi bạn setLoading(true) thì component sẽ tự động render tương tự như của class component

useEffect

Trong class component chúng ta thường dùng ComponentDidMount để thao tác với API bên thứ 3 để thực hiện các tác vụ bất đồng bộ trong React. Vì vậy Hook sinh ra useEffect để cứu rỗi chúng ta không cần phải dùng class mà vẫn có thể thao tác với API.
Đây là 1 ví dụ về sử dụng class kết hợp với Redux để call API:

import { callApi } from './actions'

const App = ({ callApi, data }) => {
  useEffect(() => {
    callApi('some_payload_')
  }, [])
  return(
    <div>
         {data.map(item => {// do something })}
    </div>
  )
}

const mapDispatchToProps = dispatch => ({
  callApi: (keyword) => dispatch(callApi)
})

export default connect({}, mapDispatchToProps)(App)

Đây là cách dùng với React useEffect:

useEffect(
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [props.source], // giá trị được subcrive
);

Ở đây mình giải thích rõ hơn về phần [props.source] là tham số thứ 2 truyền vào useEffect.

  • Nếu không có nó thì sẽ render liên tục đến khi crash app :joy: cái này nên chú ý để tránh nhé
  • Nếu truyển một mảng trống thì nó chỉ chạy 1 lần nên cực kỳ giống của ComponentDidMount
  • Cuối cùng nếu truyền một mảng có giá trị thì chỉ khi nào props.source thay đổi thì nó sẽ chạy hàm useEffect. Cái này là ứng dụng của ComponentShouldUpdate

Nếu muốn thực hiện componentWillUnMount thì làm thế nào nhỉ. Đơn giản chỉ cần return một function trong hàm này xong nhé( Bắt buộc phải là return function nhé)
Nói có sách mách nó chứng đây là ví dụ:

useEffect(() => {
  // almost same as componentDidMount
  console.log('mounted!');
  return () => {
    // almost same as componentWillUnmount
    console.log('unmount!');
  };
}, []);

Sau đây là bài giới thiệu cơ bản về Hook. Tuần tiếp theo chúng ta sẽ cùng nhau tìm hiểu về Hook thay thế Redux như thế nào nhé. Mọi người có câu hỏi vui lòng để lại bên dưới để chúng ta cùng nhau trao đổi.

reference

4 Likes

Viết tiếp về 2 cái useCallback với useMemo nhé, 2 hook đó cũng dùng nhiều đấy :wink:

Cuối tuần a nhé. Có gì chỉ giáo react e với

Em có thể giới thiệu sơ bộ cho những người chưa biết về React không?
React Hook là gì và LifeCycle của class là gì.

Đọc comment này của anh Mike, em nhớ đến 1 rule của Gitlab trong giao tiếp. Đó là low-context communication. Hiểu rằng mình phải luôn trong giả định có ai đó sẽ đọc cái mình viết vào thời điểm khác (mình ko có ở đó để giải thích thêm) Vậy nên mình cần có trách nhiệm cung cấp đủ context để bất cứ ai có thể đọc hiểu dễ dàng, từ việc hiểu context :))

At GitLab, we communicate assuming others have low context. We provide as much context as possible to avoid confusion.

The goal of low context is to be considerate of the people or audience you’re speaking to. It’s important to recognize that what you write — either internally or externally — may be read in the future, or by someone who is coming into the conversation at a time after the initial thread began

Em sẽ cố gắng viết 1 bài về LifeCycle để giải thích rõ hơn về nó ạ. Vì nó hơi dàu ạ

Thank you chị đã góp ý ạ! Em sẽ cố gắng hoàn thiện

Story mới của em về lifecycle Anh tham khảo tại đây ạ

Hay :smiley: