Các bạn đọc có thể xem lại Phần 1 - tại đây nha!

Không cập nhật trạng thái khi sử dụng React State Hook trong setInterval

Chúng tôi có thể đặt trạng thái trong lệnh setInterval callback để cập nhật trạng thái khi nó chạy.

Ví dụ, chúng ta có thể viết:

const App = () => {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    const timer = window.setInterval(() => {
      setCount(count => count + 1)
    }, 1000);

    return () => {
      window.clearInterval(timer);
    };
  }, []);

  return (
    <div>{count}</div>
  );
}

Chúng tôi thêm hàm setInterval vào callback useEffect. Chúng tôi call setCount bên trong callback bằng cách chuyển vào callback trả về số đếm + 1. 

count là trạng thái mà chúng tôi muốn thiết lập. Chúng tôi trả về một hàm để xóa bộ hẹn giờ với clearInterval để nó bị xóa khi thành phần ngắt kết nối.

Mảng trống sẽ đảm bảo rằng lệnh gọi lại useEffect được chạy khi thành phần gắn kết. 

Giảm calls của trình cập nhật trạng thái trong thành phần chức năng

Để giảm calls trình cập nhật trạng thái trong một thành phần hàm, chúng ta có thể sử dụng một trạng thái để lưu trữ một đối tượng.

Và chúng ta có thể sử dụng chức năng cập nhật trạng thái để cập nhật đối tượng thay vì sử dụng nhiều chức năng cập nhật trạng thái để cập nhật các giá trị riêng lẻ.

Ví dụ, chúng ta có thể viết:

const {useState, useEffect} = React;

function App() {
  const [userRequest, setUserRequest] = useState({
    loading: false,
    user: null,
  });

  useEffect(() => {
    setUserRequest({ loading: true });
    fetch('https://randomuser.me/api/')
      .then(res => res.json())
      .then(data => {
        const [user] = data.results;
        setUserRequest({
          loading: false,
          user
        });
      });
  }, []);

  const { loading, user } = userRequest;

  return (
    <div>
      {loading && 'Loading...'}
      {user && user.name.first}
    </div>
  );
}

Chúng tôi có hàm setUserTequest cập nhật trạng thái được lưu trữ dưới dạng đối tượng.

Nó có các thuộc tính tải và người dùng.

loading là boolean để chỉ tải.

user có dữ liệu người dùng.

Chúng tôi đặt thuộc tính tải với setUserRequest khi lệnh useEffect callback chạy lần đầu tiên. 

Và trong lần callback sau đó, chúng tôi called API của mình.

Và sau đó chúng tôi lấy dữ liệu và kết xuất nó sau đó.

Mảng trống đảm bảo rằng lệnh callback chỉ tải khi thành phần gắn kết.

Đặt trạng thái bên trong một useEffect Hook

Chúng ta có thể đặt trạng thái bên trong hook useEffect bằng cách hợp nhất các giá trị của trạng thái hiện có với các giá trị mới và trả về trạng thái đó dưới dạng trạng thái trong hàm trình cập nhật trạng thái.

Ví dụ, chúng tôi viết:

useEffect(() => {
  setState(state => ({ ...state, foo: props.foo }));
}, [props.foo]);

useEffect(() => {
  setState(state => ({ ...state, bar: props.bar }));
}, [props.bar]);

Chúng tôi xem các thuộc tính đạo cụ bằng cách chuyển chúng vào mảng.

Sau đó, chúng tôi hợp nhất các mục vào đối tượng trạng thái mà chúng tôi trả về trong lệnh gọi lại.

ComponentDidMount được gọi trước khi ref Callback

Refs được đặt trước khi hook componentDidMount và componentDidUpdate được gọi.

Ví dụ, nếu chúng ta có:

class App extends Component {
  componentDidMount() {
    //...
  }

  componentDidUpdate() {
    //...
  }

  render() {
    return <div ref={(el) => {this.divRef = el}} />;
  }
}

Chúng tôi đặt tham chiếu trong hiển thị và đảm bảo rằng chúng tôi có thể sử dụng nó ở bất kỳ nơi nào khác trong thành phần vì nó được đặt trước khi chạy bất kỳ lifecycle hooks.

React Async Rendering của các thành phần

Các thành phần luôn được hiển thị lại khi cập nhật trạng thái, vì vậy có thể đảm bảo rằng chúng ta gọi setState để cập nhật trạng thái.

Ví dụ, chúng ta có thể viết:

import React from 'react';

export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      data: null
    }
  }

  componentDidMount(){
    const endpoint = 'https://randomuser.me/api/';
    fetch(endpoint)
      .then((resp) => resp.json())
      .then((response) => {
        const [data] = response.results;
        setState({ data });
      });
  }

  render(){
    return (<div>
      {this.state.data === null ?
        <div>Loading</div>:
        <div>{this.state.data.name}</div>
      }
     </div>)};
}

Chúng tôi gọi setState khi lấy dữ liệu của mình trong phương thức compoenentDidMount.

Bây giờ chúng ta nhận được dữ liệu được hiển thị trong mã khi có tập dữ liệu là giá trị của trạng thái dữ liệu.

Nếu không, chúng ta sẽ thấy thông báo Đang tải.

Kết luận

Chúng ta có thể tải dữ liệu bằng hook componentDidMount.

Ngoài ra, chúng ta có thể xem các thay đổi giá trị trong hook useEffect.

refs được gán trước khi hook vòng đời của thành phần lớp.

Nguồn bài viết: thewebdev.info

Tham khảo khóa học Web Frontend + React

Khóa học Web Frontend nâng cao với React (ReactJs)