Tham chiếu Hooks API

https://vi.reactjs.org/docs/hooks-reference.html

Trang này mô tả các API cho Hooks tích hợp sẵn trong React.

Nếu bạn chưa quen với Hooks, bạn có thể muốn xem tổng quan trước. Bạn cũng có thể tìm thấy thông tin hữu ích trong phần câu hỏi thường gặp.

Basic Hooks

`useState`

const [state, setState] = useState(initialState);

Trả về một giá trị trạng thái và một hàm để cập nhật nó.

Trong lần hiển thị ban đầu, trạng thái (trạng thái) được trả về giống với giá trị được truyền như đối số đầu tiên (InitialState).

Hàm setState được sử dụng để cập nhật trạng thái. Nó chấp nhận một giá trị trạng thái mới và xếp hàng đợi kết xuất lại thành phần.

setState(newState);

Trong các lần hiển thị tiếp theo, giá trị đầu tiên do useState trả về sẽ luôn là trạng thái mới nhất sau khi áp dụng các bản cập nhật.

Ghi chú

React đảm bảo rằng danh tính hàm setState là ổn định và sẽ không thay đổi khi hiển thị lại. Đây là lý do tại sao có thể an toàn khi bỏ qua danh sách phụ thuộc useEffect hoặc useCallback.

Functional updates

Nếu trạng thái mới được tính bằng trạng thái trước đó, bạn có thể chuyển một hàm cho setState. Hàm sẽ nhận giá trị trước đó và trả về giá trị cập nhật. Dưới đây là ví dụ về thành phần bộ đếm sử dụng cả hai dạng setState:

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  );
}

Các nút “+” và ”-” sử dụng dạng chức năng, vì giá trị được cập nhật dựa trên giá trị trước đó. Nhưng nút “Đặt lại” sử dụng dạng bình thường, vì nó luôn đặt số đếm trở lại giá trị ban đầu.

Nếu hàm cập nhật của bạn trả về cùng giá trị với trạng thái hiện tại, kết xuất sau đó sẽ bị bỏ qua hoàn toàn.

Ghi chú

Không giống như phương thức setState được tìm thấy trong các thành phần lớp, useState không tự động hợp nhất các đối tượng cập nhật. Bạn có thể sao chép hành vi này bằng cách kết hợp biểu mẫu trình cập nhật chức năng với cú pháp lây lan đối tượng:

setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

Một tùy chọn khác là useReducer, phù hợp hơn để quản lý các đối tượng trạng thái chứa nhiều giá trị con.

Lazy initial state

Đối số InitialState là trạng thái được sử dụng trong quá trình kết xuất ban đầu. Trong các lần hiển thị tiếp theo, nó bị bỏ qua. Nếu trạng thái ban đầu là kết quả của một phép tính tốn kém, bạn có thể cung cấp một hàm thay thế, hàm này sẽ chỉ được thực thi trên kết xuất ban đầu:

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

Bailing out of a state update

Nếu bạn cập nhật State Hook về cùng giá trị với trạng thái hiện tại, React sẽ giải cứu mà không tạo ra các con hoặc hiệu ứng bắn. (React sử dụng thuật toán so sánh Object.is.)

Lưu ý rằng React vẫn có thể cần phải hiển thị lại thành phần cụ thể đó trước khi gỡ bỏ. Điều đó không đáng lo ngại vì React sẽ không đi “sâu hơn” vào cây một cách không cần thiết. Nếu bạn đang thực hiện các phép tính tốn kém trong khi hiển thị, bạn có thể tối ưu hóa chúng với useMemo.

`useEffect`

useEffect(didUpdate);

Chấp nhận một hàm chứa mã mệnh lệnh, có thể có hiệu lực.

Không cho phép đột biến, đăng ký, hẹn giờ, ghi nhật ký và các tác dụng phụ khác bên trong phần thân chính của thành phần chức năng (được gọi là giai đoạn kết xuất của React). Làm như vậy sẽ dẫn đến các lỗi khó hiểu và không nhất quán trong giao diện người dùng.

Thay vào đó, hãy sử dụng useEffect. Hàm được chuyển cho useEffect sẽ chạy sau khi kết xuất được cam kết với màn hình. Hãy coi các hiệu ứng như một lối thoát từ thế giới chức năng thuần túy của React sang thế giới mệnh lệnh.

Theo mặc định, các hiệu ứng chạy sau mỗi lần kết xuất hoàn thành, nhưng bạn có thể chọn chỉ kích hoạt chúng khi một số giá trị nhất định đã thay đổi.

Cleaning up an effect

Thông thường, các hiệu ứng tạo ra các tài nguyên cần được dọn dẹp trước khi thành phần rời khỏi màn hình, chẳng hạn như ID đăng ký hoặc bộ hẹn giờ. Để thực hiện việc này, hàm được truyền cho useEffect có thể trả về một hàm dọn dẹp. Ví dụ: để tạo một đăng ký:

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    // Clean up the subscription
    subscription.unsubscribe();
  };
});

Chức năng dọn dẹp chạy trước khi thành phần bị xóa khỏi giao diện người dùng để tránh rò rỉ bộ nhớ. Ngoài ra, nếu một thành phần hiển thị nhiều lần (như chúng thường làm), hiệu ứng trước đó sẽ được dọn dẹp trước khi thực hiện hiệu ứng tiếp theo. Trong ví dụ của chúng tôi, điều này có nghĩa là một đăng ký mới được tạo trên mỗi bản cập nhật. Để tránh gây ảnh hưởng đến mọi bản cập nhật, hãy tham khảo phần tiếp theo.

Timing of effects

Không giống như componentDidMount và componentDidUpdate, hàm được chuyển sang useEffect sẽ kích hoạt sau khi bố trí và sơn, trong một sự kiện được hoãn lại. Điều này làm cho nó phù hợp với nhiều tác dụng phụ phổ biến, như thiết lập đăng ký và trình xử lý sự kiện, bởi vì hầu hết các loại công việc sẽ không chặn trình duyệt cập nhật màn hình.

Tuy nhiên, không phải tất cả các hiệu ứng đều có thể được hoãn lại. Ví dụ: đột biến DOM hiển thị cho người dùng phải kích hoạt đồng bộ trước lần sơn tiếp theo để người dùng không nhận thấy sự mâu thuẫn trực quan. (Sự phân biệt về mặt khái niệm tương tự như trình nghe sự kiện thụ động và chủ động.) Đối với các loại hiệu ứng này, React cung cấp thêm một Hook bổ sung được gọi là useLayoutEffect. Nó có cùng chữ ký với useEffect và chỉ khác ở thời điểm nó được kích hoạt.

Mặc dù useEffect được hoãn lại cho đến khi trình duyệt hoàn thành, nhưng nó được đảm bảo sẽ kích hoạt trước khi có bất kỳ kết xuất mới nào. React sẽ luôn tạo các hiệu ứng của kết xuất trước đó trước khi bắt đầu cập nhật mới.

Conditionally firing an effect

Hành vi mặc định cho các hiệu ứng là kích hoạt hiệu ứng sau mỗi lần kết xuất hoàn thành. Bằng cách đó, một hiệu ứng luôn được tạo lại nếu một trong những phụ thuộc của nó thay đổi.

Tuy nhiên, điều này có thể là quá mức cần thiết trong một số trường hợp, như ví dụ về đăng ký từ phần trước. Chúng tôi không cần tạo đăng ký mới trên mọi bản cập nhật, chỉ khi nguồn hỗ trợ đã thay đổi.

Để thực hiện điều này, hãy chuyển đối số thứ hai để useEffect là mảng giá trị mà hiệu ứng phụ thuộc vào. Ví dụ được cập nhật của chúng tôi bây giờ trông như thế này:

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

Giờ đây, đăng ký sẽ chỉ được tạo lại khi props.source thay đổi.

Ghi chú

Nếu bạn sử dụng tối ưu hóa này, hãy đảm bảo rằng mảng bao gồm tất cả các giá trị từ phạm vi thành phần (chẳng hạn như đạo cụ và trạng thái) thay đổi theo thời gian và được sử dụng bởi hiệu ứng. Nếu không, mã của bạn sẽ tham chiếu các giá trị cũ từ các lần hiển thị trước đó. Tìm hiểu thêm về cách xử lý các hàm và việc cần làm khi giá trị mảng thay đổi quá thường xuyên.

Nếu bạn muốn chạy một hiệu ứng và làm sạch nó chỉ một lần (khi gắn kết và ngắt kết nối), bạn có thể chuyển một mảng trống ([]) làm đối số thứ hai. Điều này cho React biết rằng hiệu ứng của bạn không phụ thuộc vào bất kỳ giá trị nào từ đạo cụ hoặc trạng thái, vì vậy nó không bao giờ cần phải chạy lại. Đây không được xử lý như một trường hợp đặc biệt - nó theo dõi trực tiếp từ cách mảng phụ thuộc luôn hoạt động.

Nếu bạn truyền một mảng trống ([]), các đạo cụ và trạng thái bên trong hiệu ứng sẽ luôn có giá trị ban đầu của chúng. Trong khi truyền [] vì đối số thứ hai gần với mô hình tinh thần componentDidMount và componentWillUnmount quen thuộc, thường có các giải pháp tốt hơn để tránh chạy lại các hiệu ứng quá thường xuyên. Ngoài ra, đừng quên rằng React sẽ ngăn chặn quá trình chạy useEffect cho đến khi trình duyệt hoàn thành, do đó, việc làm thêm sẽ ít gặp vấn đề hơn.

Chúng tôi khuyên bạn nên sử dụng quy tắc toàn diện như một phần của gói eslint-plugin-react-hooks của chúng tôi. Nó cảnh báo khi các phụ thuộc được chỉ định không chính xác và đề xuất cách khắc phục.

Mảng phụ thuộc không được chuyển làm đối số cho hàm effect. Tuy nhiên, về mặt khái niệm, đó là những gì chúng đại diện: mọi giá trị được tham chiếu bên trong hàm effect cũng sẽ xuất hiện trong mảng phụ thuộc. Trong tương lai, một trình biên dịch đủ nâng cao có thể tự động tạo mảng này.

`useContext`

const value = useContext(MyContext);

Chấp nhận một đối tượng ngữ cảnh (giá trị được trả về từ React.createContext) và trả về giá trị ngữ cảnh hiện tại cho ngữ cảnh đó. Giá trị ngữ cảnh hiện tại được xác định bởi giá trị prop của gần nhất phía trên thành phần đang gọi trong cây.

Khi gần nhất phía trên thành phần cập nhật, Hook này sẽ kích hoạt kết xuất với giá trị ngữ cảnh mới nhất được chuyển cho nhà cung cấp MyContext đó. Ngay cả khi tổ tiên sử dụng React.memo hoặc shouldComponentUpdate, kết xuất vẫn sẽ xảy ra bắt đầu từ chính thành phần sử dụng useContext.

Đừng quên rằng đối số để useContext phải là chính đối tượng ngữ cảnh:

Đúng: useContext (MyContext) Không chính xác: useContext (MyContext.Consumer) Không chính xác: useContext (MyContext.Provider) Một thành phần gọi useContext sẽ luôn hiển thị lại khi giá trị ngữ cảnh thay đổi. Nếu việc kết xuất thành phần là tốn kém, bạn có thể tối ưu hóa nó bằng cách sử dụng ghi nhớ.

Nếu bạn đã quen thuộc với API ngữ cảnh trước Hooks, useContext (MyContext) tương đương với static contextType = MyContext trong một lớp hoặc với .

useContext (MyContext) chỉ cho phép bạn đọc ngữ cảnh và đăng ký các thay đổi của nó. Bạn vẫn cần một ở trên trong cây để cung cấp giá trị cho ngữ cảnh này.

Putting it together with Context.Provider

import React, {useContext} from 'react';
const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};
const ThemeContext = React.createContext(themes.light);
function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}
function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}
export default App;

Ví dụ này được sửa đổi cho các móc từ ví dụ trước trong Hướng dẫn nâng cao về ngữ cảnh, nơi bạn có thể tìm thêm thông tin về thời điểm và cách sử dụng Ngữ cảnh.

Additional Hooks

Các móc sau đây là biến thể của các móc cơ bản từ phần trước hoặc chỉ cần thiết cho các trường hợp cạnh cụ thể. Đừng căng thẳng về việc tìm hiểu chúng trước.

const [state, dispatch] = useReducer(reducer, initialArg, init);

Một thay thế cho useState. Chấp nhận trình rút gọn kiểu (trạng thái, hành động) => newState và trả về trạng thái hiện tại được ghép nối với một phương thức điều phối. (Nếu bạn đã quen thuộc với Redux, bạn đã biết cách này hoạt động.)

useReducer thường được ưu tiên sử dụngState khi bạn có logic trạng thái phức tạp liên quan đến nhiều giá trị con hoặc khi trạng thái tiếp theo phụ thuộc vào trạng thái trước đó. useReducer cũng cho phép bạn tối ưu hóa hiệu suất cho các thành phần kích hoạt các bản cập nhật sâu vì bạn có thể chuyển công văn xuống thay vì gọi lại.

Đây là ví dụ về bộ đếm từ phần useState, được viết lại để sử dụng bộ giảm tốc:

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

Ghi chú

React đảm bảo rằng danh tính chức năng điều phối là ổn định và sẽ không thay đổi khi hiển thị lại. Đây là lý do tại sao có thể an toàn khi bỏ qua danh sách phụ thuộc useEffect hoặc useCallback.

Specifying the initial state

Có hai cách khác nhau để khởi tạo trạng thái useReducer. Bạn có thể chọn một trong hai tùy thuộc vào trường hợp sử dụng. Cách đơn giản nhất là chuyển trạng thái ban đầu làm đối số thứ hai:

const [state, dispatch] = useReducer(
    reducer,
    {count: initialCount}
  );

React không sử dụng quy ước đối số state = initialState được Redux phổ biến. Giá trị ban đầu đôi khi cần phụ thuộc vào các đạo cụ và do đó, thay vào đó được chỉ định từ lệnh gọi Hook. Nếu bạn cảm thấy mạnh mẽ về điều này, bạn có thể gọi useReducer (giảm thiểu, không xác định, giảm thiểu) để mô phỏng hành vi Redux, nhưng nó không được khuyến khích.

Lazy initialization

Bạn cũng có thể tạo trạng thái ban đầu một cách lười biếng. Để làm điều này, bạn có thể chuyển một hàm init làm đối số thứ ba. Trạng thái ban đầu sẽ được đặt thành init (initialArg).

Nó cho phép bạn trích xuất logic để tính toán trạng thái ban đầu bên ngoài bộ giảm tốc. Điều này cũng hữu ích để đặt lại trạng thái sau này để phản hồi lại một hành động:

function init(initialCount) {
  return {count: initialCount};
}

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':
      return init(action.payload);
    default:
      throw new Error();
  }
}

function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({type: 'reset', payload: initialCount})}>
        Reset
      </button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

Bailing out of a dispatch

Nếu bạn trả về cùng một giá trị từ Móc treo giảm tốc như trạng thái hiện tại, React sẽ giải cứu mà không tạo ra các con hoặc hiệu ứng bắn. (React sử dụng thuật toán so sánh Object.is.)

`useCallback`

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

Trả về một cuộc gọi lại đã ghi nhớ.

Chuyển một lệnh gọi lại nội tuyến và một mảng phụ thuộc. useCallback sẽ trả về một phiên bản được ghi nhớ của lệnh gọi lại chỉ thay đổi nếu một trong các thành phần phụ thuộc đã thay đổi. Điều này hữu ích khi chuyển các lệnh gọi lại đến các thành phần con được tối ưu hóa dựa trên bình đẳng tham chiếu để ngăn các kết xuất không cần thiết (ví dụ: shouldComponentUpdate).

useCallback (fn, deps) tương đương với useMemo (() => fn, deps).

Ghi chú

Mảng phụ thuộc không được chuyển làm đối số cho lệnh gọi lại. Tuy nhiên, về mặt khái niệm, đó là những gì chúng đại diện: mọi giá trị được tham chiếu bên trong lệnh gọi lại cũng phải xuất hiện trong mảng phụ thuộc. Trong tương lai, một trình biên dịch đủ nâng cao có thể tự động tạo mảng này.

`useMemo`

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Trả về một giá trị được ghi nhớ.

Truyền một hàm “tạo” và một mảng các phụ thuộc. useMemo sẽ chỉ tính toán lại giá trị đã ghi nhớ khi một trong các thành phần phụ thuộc đã thay đổi. Tối ưu hóa này giúp tránh các tính toán tốn kém trên mỗi lần hiển thị.

Hãy nhớ rằng hàm được truyền cho useMemo chạy trong quá trình kết xuất. Đừng làm bất cứ điều gì ở đó mà bạn thường không làm trong khi kết xuất. Ví dụ, các tác dụng phụ thuộc về useEffect, không thuộc về useMemo.

Nếu không có mảng nào được cung cấp, một giá trị mới sẽ được tính trên mỗi lần hiển thị.

Bạn có thể dựa vào useMemo như một sự tối ưu hóa hiệu suất, không phải như một sự đảm bảo về ngữ nghĩa. Trong tương lai, React có thể chọn "bỏ qua" một số giá trị đã ghi nhớ trước đó và tính toán lại chúng vào lần hiển thị tiếp theo, ví dụ: để giải phóng bộ nhớ cho các thành phần ngoài màn hình. Viết mã của bạn để nó vẫn hoạt động mà không cần useMemo - và sau đó thêm nó để tối ưu hóa hiệu suất.

`useRef`

const refContainer = useRef(initialValue);

useRef trả về một đối tượng ref có thể thay đổi có thuộc tính .current được khởi tạo cho đối số được truyền vào (initialValue). Đối tượng được trả về sẽ tồn tại trong toàn bộ thời gian tồn tại của thành phần.

Một trường hợp sử dụng phổ biến là truy cập một cách ngầm định vào một đứa trẻ:

import React, { useRef }  from 'react';
function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}
export default TextInputWithFocusButton;

Về cơ bản, useRef giống như một “hộp” có thể chứa một giá trị có thể thay đổi trong thuộc tính .current của nó.

Bạn có thể quen thuộc với các ref chủ yếu như một cách để truy cập DOM. Nếu bạn chuyển một đối tượng ref cho React với , React sẽ đặt thuộc tính .current của nó cho nút DOM tương ứng bất cứ khi nào nút đó thay đổi.

Tuy nhiên, useRef () hữu ích hơn là thuộc tính ref. Nó rất hữu ích để giữ mọi giá trị có thể thay đổi tương tự như cách bạn sử dụng các trường phiên bản trong các lớp.

Điều này hoạt động vì useRef () tạo một đối tượng JavaScript thuần túy. Sự khác biệt duy nhất giữa useRef () và việc tự tạo đối tượng {current: ...} là useRef sẽ cung cấp cho bạn cùng một đối tượng ref trên mỗi lần hiển thị.

Hãy nhớ rằng useRef không thông báo cho bạn khi nội dung của nó thay đổi. Việc thay đổi thuộc tính .current không gây ra kết xuất lại. Nếu bạn muốn chạy một số mã khi React đính kèm hoặc tách một tham chiếu đến nút DOM, bạn có thể muốn sử dụng một tham chiếu gọi lại để thay thế.

`useImperativeHandle`

useImperativeHandle(ref, createHandle, [deps])

useImperativeHandle tùy chỉnh giá trị cá thể được hiển thị với các thành phần mẹ khi sử dụng ref. Như mọi khi, mã bắt buộc sử dụng refs nên tránh trong hầu hết các trường hợp. useImperativeHandle nên được sử dụng với forwardRef:

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

Trong ví dụ này, một thành phần mẹ hiển thị sẽ có thể gọi inputRef.current.focus ().

`useLayoutEffect`

Chữ ký giống với useEffect, nhưng nó kích hoạt đồng bộ sau tất cả các đột biến DOM. Sử dụng điều này để đọc bố cục từ DOM và kết xuất lại đồng bộ. Các cập nhật được lên lịch bên trong useLayoutEffect sẽ được xóa đồng bộ, trước khi trình duyệt có cơ hội vẽ.

Ưu tiên sử dụng tiêu chuẩn Hiệu quả khi có thể để tránh chặn các cập nhật trực quan.

`useDebugValue`

useDebugValue(value)

useDebugValue có thể được sử dụng để hiển thị nhãn cho các móc tùy chỉnh trong React DevTools.

Ví dụ: hãy xem xét Móc tùy chỉnh useFriendStatus được mô tả trong “Xây dựng Móc của riêng bạn”:

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  // ...

  // Show a label in DevTools next to this Hook  // e.g. "FriendStatus: Online"  useDebugValue(isOnline ? 'Online' : 'Offline');
  return isOnline;
}

Trì hoãn các giá trị gỡ lỗi định dạng

Trong một số trường hợp, việc định dạng một giá trị để hiển thị có thể là một thao tác tốn kém. Nó cũng không cần thiết trừ khi Hook thực sự được kiểm tra.

Vì lý do này useDebugValue chấp nhận hàm định dạng làm tham số thứ hai tùy chọn. Chức năng này chỉ được gọi nếu Hooks được kiểm tra. Nó nhận giá trị gỡ lỗi dưới dạng tham số và sẽ trả về giá trị hiển thị được định dạng.

Ví dụ: một Hook tùy chỉnh trả về giá trị Ngày tháng có thể tránh gọi hàm toDateString một cách không cần thiết bằng cách truyền định dạng sau:

useDebugValue(date, date => date.toDateString());

PreviousNguyên tắc sử dụng Hook (ok)NextLý do tại sao trong React class, chúng ta đặt side effect bên trong componentDidMount ... (ok)

Last updated 4 years ago

Was this helpful?