useState trong React: Hướng dẫn đầy đủ – cách sử dụng usestate trong phản ứng

Hướng dẫn này bao gồm useState Hook trong React, tương đương với this.state / this.setSate cho các thành phần chức năng.

Bạn đang xem : cách sử dụng usestate trong react

Người đàn ông của gia đình. Nhà phát triển Java và JavaScript. Swift và người yêu thích VR / AR. Thích sách, phim, và vẫn đang thử nhiều thứ. Tìm tôi tại eherrera.net

useState là một Hook cho phép bạn có các biến trạng thái trong các thành phần chức năng. Bạn chuyển trạng thái ban đầu cho hàm này và nó trả về một biến có giá trị trạng thái hiện tại (không nhất thiết là trạng thái ban đầu) và một hàm khác để cập nhật giá trị này.

Hướng dẫn này đóng vai trò là hướng dẫn đầy đủ về Hook useState trong React, tương đương với this.state / this.setSate cho chức năng các thành phần. Chúng tôi sẽ trình bày chi tiết những điều sau:

Nếu bạn mới bắt đầu với React Hooks và đang tìm kiếm một hướng dẫn trực quan, hãy xem video hướng dẫn bên dưới.

Các thành phần lớp và chức năng trong React

Có hai loại thành phần trong React: thành phần lớp và thành phần chức năng.

Các thành phần lớp là các lớp ES6 mở rộng từ React.Component và có thể có phương pháp trạng thái và vòng đời :

Thông báo lớp

 mở rộng React.Component {
  hàm tạo (đạo cụ) {
    siêu (đạo cụ);
    this.state = {
      thông điệp: ''
    };
  }

  componentDidMount () {
    / * ... * /
  }

  kết xuất () {
    trả về & lt; div & gt; {this.state.message} & lt; / div & gt ;;
  }
}

Các thành phần chức năng là các hàm chỉ chấp nhận các đối số là thuộc tính của thành phần và trả về JSX hợp lệ:

Hàm

 Thông báo (đạo cụ) {
  trả về & lt; div & gt; {props.message} & lt; / div & gt;
}
// Hoặc như một hàm mũi tên
const Message = (props) = & gt; & lt; div & gt; {props.message} & lt; / div & gt;

Như bạn có thể thấy, không có trạng thái hoặc phương thức vòng đời. Tuy nhiên, kể từ React 16.8, chúng ta có thể sử dụng Hooks.

React Hooks là các hàm thêm các biến trạng thái vào các thành phần chức năng và thiết bị các phương thức vòng đời của các lớp. Họ có xu hướng bắt đầu bằng sử dụng .

Hook React.useState làm gì?

Như đã nêu trước đây, useState cho phép bạn thêm trạng thái vào các thành phần hàm. Việc gọi React.useState bên trong một thành phần hàm sẽ tạo ra một phần trạng thái duy nhất được liên kết với thành phần đó.

Trong khi trạng thái trong một lớp luôn là một đối tượng, với Hooks, trạng thái có thể là bất kỳ loại nào. Mỗi phần của trạng thái chứa một giá trị duy nhất, có thể là một đối tượng, một mảng, một boolean hoặc bất kỳ kiểu nào khác mà bạn có thể tưởng tượng.

Vậy khi nào bạn nên sử dụng Hook useState ? Nó đặc biệt hữu ích cho trạng thái thành phần địa phương, nhưng các dự án lớn hơn có thể yêu cầu các giải pháp quản lý nhà nước bổ sung.

Khai báo trạng thái trong React

useState là một bản xuất được đặt tên từ react . Để sử dụng nó, bạn có thể viết:

 React.useState

Hoặc để nhập nó chỉ cần viết useState :

 nhập React, {useState} từ 'react';

Nhưng không giống như đối tượng trạng thái mà bạn có thể khai báo trong một lớp, đối tượng này cho phép bạn khai báo nhiều hơn một biến trạng thái, như thế này:

 nhập React từ 'react';

class Message mở rộng React.Component {
  hàm tạo (đạo cụ) {
    siêu (đạo cụ);
    this.state = {
      thông điệp: '',
      danh sách: [],
    };
  }
  / * ... * /
}

Hook useState cho phép bạn chỉ khai báo một biến trạng thái (thuộc bất kỳ loại nào) tại một thời điểm, như sau:

 nhập React, {useState} từ 'react';

const Thông báo = () = & gt; {
   const messageState = useState ('');
   const listState = useState ([]);
}

useState lấy giá trị ban đầu của biến trạng thái làm đối số.

Bạn có thể chuyển nó trực tiếp, như được hiển thị trong ví dụ trước hoặc sử dụng một hàm để khởi tạo biến một cách lười biếng (hữu ích khi trạng thái ban đầu là kết quả của một phép tính tốn kém):

 const Thông báo = () = & gt; {
   const messageState = useState (() = & gt; đắtComputation ());
   / * ... * /
}

Giá trị ban đầu sẽ chỉ được chỉ định trên lần hiển thị ban đầu (nếu đó là một hàm, nó sẽ chỉ được thực thi trên lần hiển thị ban đầu).

Trong các lần hiển thị tiếp theo (do sự thay đổi trạng thái trong thành phần hoặc thành phần mẹ), đối số của Hook useState sẽ bị bỏ qua và giá trị hiện tại sẽ được truy xuất.

Điều quan trọng cần ghi nhớ là vì, ví dụ: nếu bạn muốn cập nhật trạng thái dựa trên các thuộc tính mới mà thành phần nhận được:

 const Message = (props) = & gt; {
   const messageState = useState (props.message);
   / * ... * /
}

Chỉ sử dụng useState sẽ không hoạt động vì đối số của nó chỉ được sử dụng lần đầu tiên – không phải bất cứ khi nào thuộc tính thay đổi (xem tại đây để biết cách phù hợp để thực hiện điều này ).

Nhưng useState không chỉ trả về một biến như các ví dụ trước ngụ ý.

Nó trả về một mảng, trong đó phần tử đầu tiên là biến trạng thái và phần tử thứ hai là một hàm để cập nhật giá trị của biến:

 const Thông báo = () = & gt; {
   const messageState = useState ('');
   const message = messageState [0]; // Chứa ''
   const setMessage = messageState [1]; // Đó là một chức năng
}

Thông thường, bạn sẽ sử dụng hủy cấu trúc mảng để đơn giản hóa mã hiển thị ở trên:

 const Thông báo = () = & gt; {
   const [message, setMessage] = useState ('');
}

Bằng cách này, bạn có thể sử dụng biến trạng thái trong thành phần chức năng giống như bất kỳ biến nào khác:

 const Thông báo = () = & gt; {
  const [message, setMessage] = useState ('');

  trở về (
    & lt; p & gt;
      & lt; strong & gt; {message} & lt; / strong & gt;
    & lt; / p & gt;
  );
};

Nhưng tại sao useState lại trả về mảng?

Bởi vì so với một đối tượng, một mảng linh hoạt hơn và dễ sử dụng hơn.

Nếu phương thức trả về một đối tượng có tập hợp thuộc tính cố định, bạn sẽ không thể chỉ định tên tùy chỉnh một cách dễ dàng.

Bạn phải làm như thế này (giả sử các thuộc tính của đối tượng là state setState ):

 // Không sử dụng cấu trúc đối tượng
const messageState = useState ('');
const message = messageState.state;
const setMessage = messageState

// Sử dụng cấu trúc đối tượng
const {state: message, setState: setMessage} = useState ('');
const {state: list, setState: setList} = useState ([]);

Phần tử thứ hai được trả về bởi useState là một hàm nhận giá trị mới để cập nhật biến trạng thái.

Dưới đây là một ví dụ sử dụng hộp văn bản để cập nhật biến trạng thái về mọi thay đổi:

 const Thông báo = () = & gt; {
  const [message, setMessage] = useState ('');

  trở về (
    & lt; div & gt;
      & lt; đầu vào
         type = "text"
         value = {message}
         placeholder = "Nhập tin nhắn"
         onChange = {e = & gt; setMessage (e.target.value)}
       / & gt;
      & lt; p & gt;
        & lt; strong & gt; {message} & lt; / strong & gt;
      & lt; / p & gt;
    & lt; / div & gt;
  );
};

Hãy thử nó tại đây .

Xem Thêm  Dynamic Memory Allocation in C using malloc(), calloc(), free() and realloc() - realloc

Tuy nhiên, chức năng cập nhật này không cập nhật giá trị ngay lập tức.

Đúng hơn, nó sẽ xếp hàng các thao tác cập nhật. Sau đó, sau khi hiển thị lại thành phần, đối số của useState sẽ bị bỏ qua và hàm này sẽ trả về giá trị gần đây nhất.
Nếu bạn sử dụng giá trị trước đó để cập nhật trạng thái, bạn phải chuyển một hàm nhận giá trị trước đó và trả về giá trị mới:

 const Thông báo = () = & gt; {
  const [message, setMessage] = useState ('');

  trở về (
    & lt; div & gt;
      & lt; đầu vào
        type = "text"
        value = {message}
        placeholder = "Nhập một số chữ cái"
        onChange = {e = & gt; {
          const val = e.target.value;
          setMessage (trước = & gt; trước + val)
        }}
      / & gt;
      & lt; p & gt;
        & lt; strong & gt; {message} & lt; / strong & gt;
      & lt; / p & gt;
    & lt; / div & gt;
  );
};

Hãy thử nó tại đây .

Sử dụng một đối tượng làm biến trạng thái với hook useState

Có hai điều bạn cần lưu ý về các bản cập nhật khi sử dụng các đối tượng:

  • Tầm quan trọng của tính bất biến
  • Và thực tế là trình thiết lập được trả về bởi useState không hợp nhất các đối tượng như setState () < / span> trong các thành phần lớp

Về điểm đầu tiên, nếu bạn sử dụng cùng một giá trị với trạng thái hiện tại để cập nhật trạng thái (React sử dụng Object.is để so sánh), React sẽ không kích hoạt hiển thị lại.

Khi làm việc với các đối tượng, bạn dễ mắc lỗi sau:

 const Thông báo = () = & gt; {
  const [messageObj, setMessage] = useState ({message: ''});

  trở về (
    & lt; div & gt;
      & lt; đầu vào
        type = "text"
        value = {messageObj.message}
        placeholder = "Nhập tin nhắn"
        onChange = {e = & gt; {
          messageObj.message = e.target.value;
          setMessage (messageObj); // Không hoạt động
        }}
      / & gt;
      & lt; p & gt;
        & lt; strong & gt; {messageObj.message} & lt; / strong & gt;
      & lt; / p & gt;
  & lt; / div & gt;
  );
};

Hãy thử tại đây .

Thay vì tạo một đối tượng mới, ví dụ trên sẽ thay đổi đối tượng trạng thái hiện có. Đối với React, đó cũng là một đối tượng.

Để làm cho nó hoạt động, chúng ta phải tạo một đối tượng mới:

 onChange = {e = & gt; {
  const newMessageObj = {message: e.target.value};
  setMessage (newMessageObj); // Bây giờ nó hoạt động
}}

Điều này dẫn chúng ta đến điều quan trọng thứ hai mà bạn cần nhớ.

Khi bạn cập nhật một biến trạng thái, không giống như this.setState trong một thành phần lớp, hàm được trả về bởi useState không tự động hợp nhất các đối tượng cập nhật, nó thay thế chúng. < / p>

Theo ví dụ trước, nếu chúng ta thêm một thuộc tính khác vào đối tượng thông báo ( id ):

 const Thông báo = () = & gt; {
  const [messageObj, setMessage] = useState ({message: '', id: 1});

  trở về (
    & lt; div & gt;
      & lt; đầu vào
        type = "text"
        value = {messageObj.message}
        placeholder = "Nhập tin nhắn"
        onChange = {e = & gt; {
          const newMessageObj = {message: e.target.value};
          setMessage (newMessageObj);
        }}
      / & gt;
      & lt; p & gt;
        & lt; strong & gt; {messageObj.id}: {messageObj.message} & lt; / strong & gt;
      & lt; / p & gt;
  & lt; / div & gt;
  );
};

Và chúng tôi chỉ cập nhật thuộc tính message như trong ví dụ trên, React sẽ thay thế đối tượng trạng thái ban đầu:

 {nội dung: '', id: 1}

Với đối tượng được sử dụng trong sự kiện onChange , chỉ chứa thuộc tính message :

 {message: 'message enter'} // thuộc tính id bị mất

Hãy thử tại đây , bạn sẽ thấy thuộc tính id bị mất như thế nào.

Bạn có thể sao chép hành vi của setState () bằng cách sử dụng đối số hàm chứa đối tượng cần thay thế và cú pháp trải đối tượng:

 onChange = {e = & gt; {
  const val = e.target.value;
  setMessage (prevState = & gt; {
    trả về {... beforeState, message: val}
  });
}}

Phần ... prevState sẽ nhận tất cả các thuộc tính của đối tượng và phần message: val sẽ ghi đè thuộc tính message .

Điều này sẽ có cùng kết quả khi sử dụng Object.assign (chỉ cần nhớ tạo một đối tượng mới):

 onChange = {e = & gt; {
  const val = e.target.value;
  setMessage (prevState = & gt; {
    return Object.assign ({}, prevState, {message: val});
  });
}}

Hãy thử nó tại đây .

Tuy nhiên, cú pháp spread đơn giản hóa thao tác này và nó cũng hoạt động với các mảng.

Về cơ bản, khi được áp dụng cho một mảng, cú pháp spread sẽ loại bỏ các dấu ngoặc để bạn có thể tạo một mảng khác với các giá trị của mảng ban đầu:

 [
  ... ['a', 'b', 'c'],
  'd'
]
// Tương đương với
[
  'a', 'b', 'c',
  'd'
]

Dưới đây là một ví dụ cho thấy cách sử dụng useState với mảng:

 const MessageList = () = & gt; {
  const [message, setMessage] = useState ("");
  const [messageList, setMessageList] = useState ([]);

  trở về (
    & lt; div & gt;
      & lt; đầu vào
        type = "text"
        value = {message}
        placeholder = "Nhập tin nhắn"
        onChange = {e = & gt; {
          setMessage (e.target.value);
        }}
      / & gt;
      & lt; đầu vào
        type = "nút"
        value = "Thêm"
        onClick = {e = & gt; {
          setMessageList ([
            ...danh sách tin nhắn,
            {
              // Sử dụng kích thước hiện tại làm ID (cần thiết để lặp lại danh sách sau này)
              id: messageList.length + 1,
              message: tin nhắn
            }
          ]);
          setMessage (""); // Xóa hộp văn bản
        }}
      / & gt;
      & lt; ul & gt;
        {messageList.map (m = & gt; (
          & lt; li key = {m.id} & gt; {m.message} & lt; / li & gt;
        ))}
      & lt; / ul & gt;
    & lt; / div & gt;
  );
};

Hãy thử nó tại đây .

Bạn chỉ cần cẩn thận khi áp dụng cú pháp lây lan cho mảng nhiều chiều vì nó sẽ không hoạt động như bạn mong đợi.

Điều này dẫn chúng ta đến một điều khác cần xem xét khi làm việc với các đối tượng dưới dạng trạng thái.

Trong JavaScript, mảng nhiều chiều là mảng trong các mảng:

 [
  ['value1', 'value2'],
  ['value3', 'value4']
]

Bạn có thể sử dụng chúng để nhóm tất cả các biến trạng thái của mình vào một nơi. Tuy nhiên, vì mục đích đó, sẽ tốt hơn nếu sử dụng các đối tượng lồng nhau:

 {
  'row1': {
    'key1': 'value1',
    'key2': 'value2'
  },
  'row2': {
    'key3': 'value3',
    'key4': 'value4'
  }
}

Nhưng vấn đề khi làm việc với mảng nhiều chiều và các đối tượng lồng nhau là Object.assign và cú pháp lây lan sẽ tạo ra một bản sao nông thay vì một bản sao sâu .

Từ tài liệu cú pháp spread :

Cú pháp Spread có hiệu quả đi sâu một cấp trong khi sao chép một mảng. Do đó, nó có thể không phù hợp để sao chép mảng đa chiều, như ví dụ sau cho thấy. (Điều này cũng đúng với Object.assign () và cú pháp spread.)

 let a = [[1], [2], [3]];
cho b = [... a];

b.shift (). shift (); // 1
// Mảng 'a' cũng bị ảnh hưởng: [[], [2], [3]]

Truy vấn StackOverflow này cung cấp các giải thích tốt cho ví dụ trên, nhưng điểm quan trọng là khi sử dụng các đối tượng lồng nhau, chúng ta không thể chỉ sử dụng spread cú pháp để cập nhật đối tượng trạng thái.

Ví dụ: hãy xem xét đối tượng trạng thái sau:

 const [messageObj, setMessage] = useState ({
  tác giả: '',
  thông điệp: {
    id: 1,
    chữ: ''
  }
});

Các đoạn mã sau đây cho thấy một số cách không chính xác để cập nhật trường text :

 // Sai
setMessage (presState = & gt; ({
  ... thịnh hành,
  text: 'Tin nhắn của tôi'
}));

// Sai
setMessage (presState = & gt; ({
  ... trước State.message,
  text: 'Tin nhắn của tôi'
}));

// Sai
setMessage (presState = & gt; ({
  ... thịnh hành,
  thông điệp: {
    text: 'Tin nhắn của tôi'
  }
}));

Để cập nhật đúng trường text , chúng tôi phải sao chép vào một đối tượng mới toàn bộ tập hợp các trường / đối tượng lồng nhau của đối tượng gốc:

 // Đúng
setMessage (presState = & gt; ({
  ... prevState, // sao chép tất cả các trường / đối tượng khác
  message: {// tạo lại đối tượng chứa trường để cập nhật
    ... prevState.message, // sao chép tất cả các trường của đối tượng
    text: 'Tin nhắn của tôi' // ghi đè giá trị của trường để cập nhật
  }
}));

Theo cách tương tự, đây là cách bạn cập nhật trường author của đối tượng trạng thái:

 // Đúng
setMessage (presState = & gt; ({
  author: 'Joe', // ghi đè giá trị của trường để cập nhật
  ... prevState.message // sao chép tất cả các trường / đối tượng khác
}));

Giả sử đối tượng message không thay đổi. Nếu nó thay đổi, bạn phải cập nhật đối tượng theo cách này:

 // Đúng
setMessage (presState = & gt; ({
  author: 'Joe', // cập nhật giá trị của trường
  message: {// tạo lại đối tượng chứa trường để cập nhật
    ... prevState.message, // sao chép tất cả các trường của đối tượng
    text: 'Tin nhắn của tôi' // ghi đè giá trị của trường để cập nhật
  }
}));

Nhiều biến trạng thái hoặc một đối tượng trạng thái

Khi làm việc với nhiều trường hoặc giá trị dưới dạng trạng thái của ứng dụng, bạn có tùy chọn tổ chức trạng thái bằng cách sử dụng nhiều biến trạng thái:

 const [id, setId] = useState (-1);
const [message, setMessage] = useState ('');
const [author, setAuthor] = useState ('');

Hoặc một biến trạng thái đối tượng:

 const [messageObj, setMessage] = useState ({
  id: 1,
  thông điệp: '',
  tác giả: ''
});

Tuy nhiên, bạn phải cẩn thận khi sử dụng các đối tượng trạng thái có cấu trúc phức tạp (các đối tượng lồng nhau). Hãy xem xét ví dụ này:

 const [messageObj, setMessage] = useState ({
  đầu vào: {
    tác giả: {
      id: -1,
      tác giả: {
        fName: '',
        lName: ''
      }
    },
    thông điệp: {
      id: -1,
      chữ: '',
      ngày: bây giờ ()
    }
  }
});

Nếu bạn phải cập nhật một trường cụ thể nằm sâu trong đối tượng, bạn sẽ phải sao chép tất cả các đối tượng khác cùng với các cặp khóa-giá trị của đối tượng có chứa trường cụ thể đó:

 setMessage (prevState = & gt; ({
  đầu vào: {
    ... prevState.input,
    thông điệp: {
      ... prevState.input.message,
      text: 'Tin nhắn của tôi'
    }
  }
}));

Trong một số trường hợp, việc sao chép các đối tượng lồng nhau sâu có thể tốn kém vì React có thể hiển thị lại các phần ứng dụng của bạn phụ thuộc vào các trường thậm chí không thay đổi.

Vì lý do này, điều đầu tiên bạn cần xem xét là cố gắng làm phẳng (các) đối tượng trạng thái của bạn. Đặc biệt, tài liệu React khuyến nghị chia trạng thái thành nhiều biến trạng thái dựa trên đó các giá trị có xu hướng thay đổi cùng nhau.

Nếu không thể thực hiện được, đề xuất là sử dụng các thư viện giúp bạn làm việc với các đối tượng không thể thay đổi, chẳng hạn như immutable.js hoặc immer .

Theo dõi trạng thái và tương tác của người dùng với các thành phần

Điều quan trọng là phải xác thực rằng mọi thứ hoạt động trong ứng dụng React sản xuất của bạn như mong đợi. Nếu bạn quan tâm đến việc theo dõi và theo dõi các vấn đề liên quan đến các thành phần VÀ xem cách người dùng tương tác với các thành phần cụ thể, hãy thử LogRocket . https://logrocket.com/signup/

LogRocket giống như một DVR cho các ứng dụng web, ghi lại mọi thứ diễn ra trên trang web của bạn theo đúng nghĩa đen. Plugin LogRocket React cho phép bạn tìm kiếm các phiên người dùng trong đó người dùng nhấp vào một thành phần cụ thể trong ứng dụng của bạn. Với LogRocket, bạn có thể hiểu cách người dùng tương tác với các thành phần và tìm ra bất kỳ lỗi nào liên quan đến các thành phần không hiển thị.

Ngoài ra, LogRocket ghi lại tất cả các hành động và trạng thái từ các cửa hàng Redux của bạn. LogRocket tạo công cụ cho ứng dụng của bạn để ghi lại các yêu cầu / phản hồi bằng tiêu đề + nội dung. Nó cũng ghi lại HTML và CSS trên trang, tạo lại các video hoàn hảo theo pixel của ngay cả những ứng dụng trang đơn phức tạp nhất.

Hiện đại hóa cách bạn gỡ lỗi ứng dụng React của mình – .

Quy tắc sử dụng useState

useState tuân theo cùng một quy tắc mà tất cả các Hook đều tuân theo :

  • Chỉ gọi Hook ở cấp cao nhất
  • Chỉ gọi các Hook từ các hàm React

Quy tắc thứ hai rất dễ làm theo. Không sử dụng useState trong một thành phần lớp:

Ứng dụng lớp

 mở rộng React.Component {
  kết xuất () {
    const [message, setMessage] = useState ('');

    trở về (
      & lt; p & gt;
        & lt; strong & gt; {message} & lt; / strong & gt;
      & lt; / p & gt;
    );
  }
}

Hoặc các hàm JavaScript thông thường (không được gọi bên trong một thành phần chức năng):

 hàm getState () {
  const messageState = useState ('');
  trả về messageState;
}
const [message, setMessage] = getState ();
const Thông báo = () = & gt; {
 / * ... * /
}

Bạn sẽ gặp lỗi .

Quy tắc đầu tiên có nghĩa là, ngay cả bên trong các thành phần chức năng, bạn không nên gọi useState trong các vòng lặp, điều kiện hoặc các hàm lồng nhau vì React dựa trên thứ tự mà useState các hàm được gọi để nhận giá trị chính xác cho một biến trạng thái cụ thể.

Về vấn đề đó, lỗi phổ biến nhất là đặt các lệnh gọi useState trong một câu lệnh có điều kiện (chúng sẽ không được thực thi mọi lúc):

 if (condition) {// Đôi khi nó sẽ được thực thi, làm cho thứ tự của các lệnh gọi useState thay đổi
  const [message, setMessage] = useState ('');
  setMessage (aMessage);
}
const [list, setList] = useState ([]);
setList ([1, 2, 3]);

Một thành phần chức năng có thể có nhiều lệnh gọi đến useState hoặc các Hook khác. Mỗi Hook được lưu trữ trong một danh sách và có một biến theo dõi Hook hiện đang được thực thi.

Khi useState được thực thi, trạng thái của Hook hiện tại được đọc (hoặc khởi tạo trong lần hiển thị đầu tiên) và sau đó, biến được thay đổi để trỏ đến Hook tiếp theo.

Đó là lý do tại sao điều quan trọng là phải luôn duy trì các lệnh gọi Hook theo cùng một thứ tự, nếu không, một giá trị thuộc về một biến trạng thái khác có thể được trả về.

Nói chung, dưới đây là ví dụ về cách hoạt động từng bước của tính năng này:

  1. React khởi tạo danh sách Hook và biến theo dõi Hook hiện tại
  2. Lần đầu tiên React gọi thành phần của bạn
  3. React tìm một lệnh gọi đến useState , tạo một đối tượng Hook mới (với trạng thái ban đầu), thay đổi biến Hook hiện tại để trỏ đến đối tượng này, thêm đối tượng vào danh sách Hooks và trả về mảng có trạng thái ban đầu và chức năng cập nhật nó
  4. React tìm thấy một lệnh gọi khác đến useState và lặp lại các hành động của bước trước, lưu trữ một đối tượng Hook mới và thay đổi biến Hook hiện tại
  5. Trạng thái thành phần thay đổi
  6. React gửi hoạt động cập nhật trạng thái (được thực hiện bởi hàm được trả về bởi useState ) tới một hàng đợi để được xử lý
  7. React xác định rằng nó cần hiển thị lại thành phần
  8. React đặt lại biến Hook hiện tại và gọi thành phần của bạn
  9. React tìm thấy một lệnh gọi đến useState , nhưng lần này, vì đã có Hook ở vị trí đầu tiên của danh sách Hook, nó chỉ thay đổi biến Hook hiện tại và trả về mảng hiện tại trạng thái và chức năng cập nhật nó
  10. React tìm thấy một lệnh gọi khác tới useState và vì Hook tồn tại ở vị trí thứ hai, một lần nữa, nó chỉ thay đổi biến Hook hiện tại và trả về mảng với trạng thái hiện tại và hàm để cập nhật nó

Nếu bạn thích đọc mã, ReactFiberHooks là lớp mà bạn có thể tìm hiểu cách Hooks hoạt động. < / p>

useReducer Hook

Đối với các trường hợp sử dụng nâng cao, bạn có thể sử dụng useReducer Hook để thay thế cho useState . Điều này đặc biệt hữu ích khi bạn có logic trạng thái phức tạp sử dụng nhiều giá trị phụ hoặc khi một trạng thái phụ thuộc vào giá trị trước đó.

Dưới đây là cách sử dụng Hook useReducer :

 const [trạng thái, văn bản] = useReducer (giảm thiểu, ban đầuArgument, init)
useReducer trả về một mảng chứa giá trị trạng thái hiện tại và một phương thức điều phối. Đây sẽ là lãnh thổ quen thuộc nếu bạn có kinh nghiệm sử dụng Redux.

Trong khi, với useState , bạn gọi hàm trình cập nhật trạng thái để cập nhật trạng thái, với useReducer , bạn gọi hàm send và chuyển nó một hành động - tức là một đối tượng có ít nhất thuộc tính type .

 công văn ({type: 'tăng'})

Thông thường, một đối tượng hành động cũng có thể có payload , ví dụ: {action: 'tăng', trọng tải: 10} .

Mặc dù không nhất thiết phải chuyển một đối tượng hành động tuân theo mẫu này, nhưng đây là một mẫu rất phổ biến được phổ biến bởi Redux .

Kết luận

useState là một Hook (hàm) cho phép bạn có các biến trạng thái trong các thành phần chức năng. Bạn chuyển trạng thái ban đầu cho hàm này và nó trả về một biến có giá trị trạng thái hiện tại (không nhất thiết là trạng thái ban đầu) và một hàm khác để cập nhật giá trị này.

Dưới đây là một số điểm quan trọng chính cần nhớ:

  • Chức năng cập nhật không cập nhật giá trị ngay lập tức
  • Nếu bạn sử dụng giá trị trước đó để cập nhật trạng thái, bạn phải chuyển một hàm nhận giá trị trước đó và trả về giá trị cập nhật, ví dụ: setMessage (beforeVal = & gt; beforeVal + currentVal) < / li>
  • Nếu bạn sử dụng cùng một giá trị với trạng thái hiện tại (React sử dụng Object.is để so sánh) để cập nhật trạng thái, React sẽ không kích hoạt kết xuất lại
  • Không giống như this.setState trong các thành phần lớp, useState không hợp nhất các đối tượng khi trạng thái được cập nhật. Nó thay thế chúng
  • useState tuân theo cùng một quy tắc mà tất cả các Hook đều làm. Đặc biệt, hãy chú ý đến thứ tự gọi các hàm này (có một plugin ESLint sẽ giúp bạn thực thi các quy tắc này)

Chia sẻ cái này:


Xem thêm những thông tin liên quan đến chủ đề cách sử dụng usestate trong phản ứng

Learn to use State in React in 19 minutes (for beginners)

alt

  • Tác giả: Sonny Sangha
  • Ngày đăng: 2021-08-29
  • Đánh giá: 4 ⭐ ( 2291 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: The first 1,000 people to use this link will get a 1 month free trial of Skillshare: https://skl.sh/2Srfwuf

    🚨 Join the world’s BEST developer community “Zero to Full Stack Hero” NOW: https://www.papareact.com/course

    This video is designed to get you familiar with the React useState Hook where we cover topics such:

    👉 What is the useState Hook?
    👉 What does it allow us to do?
    👉 Where state is supported!
    👉 Build a counter app using state!

    🔴 LOOKING FOR THE CODE? 🛠️
    https://links.papareact.com/github

    📩 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
    Sign up to the PAPA Newsletter here 👉 https://links.papareact.com/newsletter

    👇🏻FOLLOW ME HERE:
    Instagram: https://links.papareact.com/instagram
    Facebook: https://links.papareact.com/facebook
    LinkedIn: https://links.papareact.com/linkedin
    Twitter: https://links.papareact.com/twitter
    Discord: https://links.papareact.com/discord

    💰 WANT TO SUPPORT THE CHANNEL?
    Donate here: https://links.papareact.com/donate
    Grab some PAPA Merch: https://links.papareact.com/merch

    🕐 TIMESTAMPS:
    00:00 Intro
    00:17 Skillshare Sponsorship
    01:57 Introduction to the useState Hook
    02:54 Building a counter app using State
    05:04 Explaining State
    05:51 Implementing the useState Hook
    09:20 Non persistent State explanation
    09:54 Building counter in a Class Based Component
    16:41 Async explanation and demo
    18:40 Summary
    19:06 Outro

    Let’s get it PAPA fam🔥

    react useState javascript

Hooks trong React

  • Tác giả: websitehcm.com
  • Đánh giá: 4 ⭐ ( 3937 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hooks trong React w3seo Hooks là tính năng mới được giới thiệu trong phiên bản React 16.8, cho phép tính năng React mà không cần viết class

Sử dụng useState với một đối tượng: cách cập nhật

  • Tác giả: tech-wiki.online
  • Đánh giá: 4 ⭐ ( 5981 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

ReactJS: Cách gọi API web với Hook useEffect trong React

  • Tác giả: v1study.com
  • Đánh giá: 3 ⭐ ( 6918 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài hướng dẫn này, bạn sẽ sử dụng các Hook useEffect và useState để tìm nạp và hiển thị thông tin trong một ứng dụng mẫu, sử dụng máy chủ JSON làm AP

Sử dụng useState() Hook trong React như nào cho đúng?

  • Tác giả: techmaster.vn
  • Đánh giá: 3 ⭐ ( 1134 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Ví dụ về nút bật tắt phản ứng

  • Tác giả: www.folkstalk.com
  • Đánh giá: 4 ⭐ ( 5329 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nút bật hoặc tắt trong React JS. Tìm hiểu cách chuyển đổi văn bản nút bằng cách sử dụng react UseState & để tạo một thành phần nút với nhiều ví dụ.

UseState trong React Hook

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 7573 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: useState() là một hook cơ bản giúp sử dụng state trong Functional Component. Hook này nhận vào input là một giá trị hoặc function và output là một mảng có hai phần tử tương ứng cho state và setState....

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình