Sử dụng công dụng của React

Sử dụng useEffectcó lẽ là phần tốt nhất của React Hooks. Nó giúp giảm bớt sự lộn xộn của các phương thức vòng đời thành phần và quan trọng nhất, nó giúp tách các logic khác nhau có thể xuất hiện trong các phương thức vòng đời. Hôm nay, chúng ta sẽ xem xét một ví dụ cho từng lợi ích chính của useEffectvới các ví dụ từ trang web React.

Trước tiên, hãy xem xét cách hook có thể giúp giảm bớt sự lộn xộn nói chung. Trường hợp đầu tiên này sẽ là cách phương thức vòng đời dựa trên lớp điển hình của bạn sẽ bao gồm trong một trường hợp cơ bản mà không cần ngắt kết nối.

componentDidMount() { 
    document.title = `You clicked ${this.state.count} times`;  
}
componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;  
}

useEffect(() => {
    document.title = `You clicked ${count} times`;  
});

Như bạn đã có thể biết từ ví dụ trên, điều này sau đó sẽ phân tích mức độ tốt useEffecttrong trường hợp sử dụng lệnh gọi API và ngắt kết nối. Dưới đây là một ví dụ đơn giản về các phương pháp vòng đời của bạn có thể trông như thế nào nếu bạn đang sử dụng ChatAPI để đăng ký trạng thái trực tuyến của một người bạn.

componentDidMount() {
    ChatAPI.subscribeToFriendStatus(      
        this.props.friend.id,      
        this.handleStatusChange    
    );  
}
componentWillUnmount() {    
    ChatAPI.unsubscribeFromFriendStatus(      
        this.props.friend.id,      
        this.handleStatusChange    
    );  
}
handleStatusChange(status) {    this.setState({      isOnline: status.isOnline    });  }

useEffect(() => {    
    function handleStatusChange(status) {
        setIsOnline(status.isOnline);    
    }
ChatAPI.subscribeToFriendStatus(
        props.friend.id, 
        handleStatusChange
    );
return function cleanup() {
        ChatAPI.unsubscribeFromFriendStatus(
            props.friend.id, 
            handleStatusChange );    
    };  
});

Đừng quên rằng nó useEffectđược chạy trên mỗi lần render! Điều này có thể quá mức cần thiết nếu bản cập nhật của bạn đắt về mặt đồ họa hoặc một lệnh gọi API không cần thiết liên tục. Một trong những phần hay nhất useEffectlà việc tối ưu hóa thứ gì đó dễ dàng như thế nào.

useEffect(() => {
    const subscription = props.source.subscribe();
return () => {
      subscription.unsubscribe();
    };
},
  [props.source],
);

useEffect(() => {}, []);

Ngoài ra, nếu bạn thêm một mảng trống vào useEffectlàm đối số thứ hai, thì nó sẽ chỉ chạy một lần và sau đó ngắt kết nối nếu cần. Điều này tương tự như nếu bạn chỉ sử dụng componentDidMountvà componentWillUnmountkhông sử dụng componentDidUpdateĐây là một thủ thuật quan trọng để biết liệu bạn có muốn chạy nó một lần khi bắt đầu hay không.

Bây giờ, những ví dụ này khá đơn giản và tôi hy vọng tôi có thể hướng dẫn bạn trong quá trình chuyển đổi từ sử dụng Class sang Hooks dễ dàng hơn. useEffectlà một công cụ tuyệt vời trong việc sử dụng Hooks và nó giúp giảm tải việc quản lý các chức năng vòng đời khổng lồ cồng kềnh có thể tích lũy trong cơ sở mã của bạn.

Mỗi useEffectchức năng của nó có thể xử lý gắn kết, cập nhật và ngắt kết nối của riêng nó. Tôi cảm thấy rằng điều này giúp các nhà phát triển “bên ngoài” dễ dàng bảo trì hơn và nếu cần, thực hiện các thay đổi đối với phần đó của cơ sở mã mà không vô tình làm xáo trộn các phần khác của mã. Họ cũng có thể dễ dàng thực hiện các thay đổi hoặc bổ sung để tối ưu hóa cho nó.

Họ có thể biết một cách an toàn rằng useEffectchức năng họ đang sửa đổi chỉ xử lý những gì cần thiết cho đăng ký hoặc bản cập nhật cụ thể đó. Tất nhiên, giả sử nhà phát triển ban đầu không thêm logic không liên quan vào chức năng đó! Tôi biết bạn sẽ không bao giờ làm điều gì đó như vậy, phải không?

Cảm ơn bạn đã đọc schpiel nhỏ của tôi về cách sử dụng useEffecthook trong React. Nếu bạn thích nó (và đã học được điều gì đó), tôi đang nghĩ sẽ đề cập đến chủ đề tối ưu hóa trong React trong tương lai gần, đặc biệt, useStatevì tôi chưa nói về điều đó. Bất kể, cảm ơn bạn đã dành thời gian và luôn an toàn!