Xem xét ví dụ về hooks dưới đây

   import { useState } from 'react';

   function Example() {
       const [count, setCount] = useState(0);

       return (
           <div>
               <p>You clicked {count} times</p>
               <button onClick={() => setCount(count + 1)}>
                  Click me
               </button>
          </div>
        );
     }

Về cơ bản, chúng tôi sử dụng phương thức this.forceUpdate () để buộc thành phần hiển thị lại ngay lập tức trong các thành phần lớp React như ví dụ dưới đây

    class Test extends Component{
        constructor(props){
             super(props);
             this.state = {
                 count:0,
                 count2: 100
             }
             this.setCount = this.setCount.bind(this);//how can I do this with hooks in functional component 
        }
        setCount(){
              let count = this.state.count;
                   count = count+1;
              let count2 = this.state.count2;
                   count2 = count2+1;
              this.setState({count});
              this.forceUpdate();
              //before below setState the component will re-render immediately when this.forceUpdate() is called
              this.setState({count2: count
        }

        render(){
              return (<div>
                   <span>Count: {this.state.count}></span>. 
                   <button onClick={this.setCount}></button>
                 </div>
        }
 }

Nhưng truy vấn của tôi là Làm cách nào để buộc thành phần chức năng ở trên hiển thị lại ngay lập tức bằng hook?

Điều này có thể thực hiện được với useStatehoặc useReducer, vì useStatesử dụng useReducernội bộ :

const [, updateState] = React.useState();
const forceUpdate = React.useCallback(() => updateState({}), []);

forceUpdatekhông được sử dụng trong các trường hợp bình thường, chỉ trong thử nghiệm hoặc các trường hợp nổi bật khác. Tình huống này có thể được giải quyết theo một cách thông thường hơn.

setCountlà một ví dụ về việc sử dụng không đúng cách forceUpdate, setStatekhông đồng bộ vì lý do hiệu suất và không nên bị buộc phải đồng bộ chỉ vì cập nhật trạng thái không được thực hiện chính xác. Nếu một trạng thái dựa vào trạng thái đã đặt trước đó, thì việc này sẽ được thực hiện với chức năng cập nhật ,

Nếu bạn cần đặt trạng thái dựa trên trạng thái trước đó, hãy đọc về đối số của trình cập nhật bên dưới.

<...>

Cả trạng thái và đạo cụ nhận được bởi chức năng trình cập nhật đều được đảm bảo là cập nhật. Đầu ra của trình cập nhật được hợp nhất nông với trạng thái.

setCount có thể không phải là một ví dụ minh họa vì mục đích của nó không rõ ràng nhưng đây là trường hợp của hàm cập nhật:

setCount(){
  this.setState(({count}) => ({ count: count + 1 }));
  this.setState(({count2}) => ({ count2: count + 1 }));
  this.setState(({count}) => ({ count2: count + 1 }));
}

Điều này được dịch 1: 1 thành hooks, ngoại trừ các hàm được sử dụng như callbacks tốt hơn nên được ghi nhớ:

   const [state, setState] = useState({ count: 0, count2: 100 });

   const setCount = useCallback(() => {
     setState(({count}) => ({ count: count + 1 }));
     setState(({count2}) => ({ count2: count + 1 }));
     setState(({count}) => ({ count2: count + 1 }));
   }, []);

Như những người khác đã đề cập, useStatehoạt động - đây là cách mobx-react-lite triển khai các bản cập nhật - bạn có thể làm điều gì đó tương tự.

Xác định một hook mới, useForceUpdate-

import { useState, useCallback } from 'react'

export function useForceUpdate() {
  const [, setTick] = useState(0);
  const update = useCallback(() => {
    setTick(tick => tick + 1);
  }, [])
  return update;
}

và sử dụng nó trong một thành phần -

const forceUpdate = useForceUpdate();
if (...) {
  forceUpdate(); // force re-render
}

Xem https://github.com/mobxjs/mobx-react-lite/blob/master/src/utils.ts và https://github.com/mobxjs/mobx-react-lite/blob/master/src/useObserver .ts

Nói chung, bạn có thể sử dụng bất kỳ phương pháp xử lý trạng thái nào mà bạn muốn để kích hoạt cập nhật.

Với TypeScript

ví dụ về hộp mã

useState

const forceUpdate: () => void = React.useState()[1].bind(null, {})  // see NOTE below

useReducer

const forceUpdate = React.useReducer(() => ({}), {})[1] as () => void

như móc tùy chỉnh

Chỉ cần bọc bất kỳ cách tiếp cận nào bạn thích như thế này

function useForceUpdate(): () => void {
  return React.useReducer(() => ({}), {})[1] as () => void // <- paste here
}

Làm thế nào điều này hoạt động?

" Để kích hoạt bản cập nhật " có nghĩa là thông báo cho React engine rằng một số giá trị đã thay đổi và nó sẽ hiển thị thành phần của bạn.

[, setState]từ useState()yêu cầu một tham số. Chúng tôi loại bỏ nó bằng cách ràng buộc một đối tượng mới {}.
() => ({})in useReducerlà một trình giảm thiểu giả trả về một đối tượng mới mỗi khi một hành động được gửi đi.
{} (đối tượng mới) là bắt buộc để nó kích hoạt cập nhật bằng cách thay đổi một tham chiếu trong trạng thái.

PS: useStatechỉ gói gọn useReducertrong nội bộ. nguồn

LƯU Ý: Sử dụng .bind với useState gây ra sự thay đổi trong tham chiếu hàm giữa các lần hiển thị. Có thể bọc nó bên trong useCallback như đã được giải thích ở đây , nhưng sau đó nó sẽ không phải là một lớp lót ™ sexy . Phiên bản Reducer đã giữ bình đẳng tham chiếu giữa các lần hiển thị. Điều này rất quan trọng nếu bạn muốn chuyển hàm forceUpdate trong đạo cụ.

JS đơn giản

const forceUpdate = React.useState()[1].bind(null, {})  // see NOTE above
const forceUpdate = React.useReducer(() => ({}))[1]

Thay thế cho câu trả lời của @ MinhKha:

Nó có thể sạch hơn nhiều với useReducer:

const [, forceUpdate] = useReducer(x => x + 1, 0);

Cách sử dụng: forceUpdate()- sạch hơn mà không có params

Bạn có thể chỉ cần xác định useState như vậy:

const [, forceUpdate] = React.useState(0);

Và cách sử dụng: forceUpdate(n => !n)

Hy vọng điều này giúp đỡ !

Tốt nhất bạn chỉ nên để thành phần của bạn phụ thuộc vào trạng thái và đạo cụ và nó sẽ hoạt động như mong đợi, nhưng nếu bạn thực sự cần một hàm để buộc thành phần hiển thị lại, bạn có thể sử dụng useStatehook và gọi hàm khi cần.

Thí dụ

const { useState, useEffect } = React;

function Foo() {
  const [, forceUpdate] = useState();

  useEffect(() => {
    setTimeout(forceUpdate, 2000);
  }, []);

  return <div>{Date.now()}</div>;
}

ReactDOM.render(<Foo />, document.getElementById("root"));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Câu hỏi thường gặp về React Hooks giải pháp chính thức cho forceUpdate:

const [_, forceUpdate] = useReducer((x) => x + 1, 0);
// usage
<button onClick={forceUpdate}>Force update</button>

Ví dụ làm việc

const App = () => {
  const [_, forceUpdate] = useReducer((x) => x + 1, 0);

  return (
    <div>
      <button onClick={forceUpdate}>Force update</button>
      <p>Forced update {_} times</p>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.1/umd/react.production.min.js" integrity="sha256-vMEjoeSlzpWvres5mDlxmSKxx6jAmDNY4zCt712YCI0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.1/umd/react-dom.production.min.js" integrity="sha256-QQt6MpTdAD0DiPLhqhzVyPs1flIdstR4/R7x4GqCvZ4=" crossorigin="anonymous"></script>
<script>var useReducer = React.useReducer</script>
<div id="root"></div>

Mã đơn giản

const forceUpdate = React.useReducer(bool => !bool)[1];

Sử dụng:

forceUpdate();

Bạn có thể (ab) sử dụng hook thông thường để buộc kết xuất bằng cách tận dụng thực tế là React không in boolean trong mã JSX

// create a hook
const [forceRerender, setForceRerender] = React.useState(true);

// ...put this line where you want to force a rerender
setForceRerender(!forceRerender);

// ...make sure that {forceRerender} is "visible" in your js code
// ({forceRerender} will not actually be visible since booleans are
// not printed, but updating its value will nonetheless force a
// rerender)
return (
  <div>{forceRerender}</div>
)

Tùy chọn tiềm năng là chỉ buộc cập nhật trên thành phần cụ thể bằng cách sử dụng key. Việc cập nhật khóa kích hoạt hiển thị thành phần (không cập nhật được trước đó)

Ví dụ:

const [tableKey, setTableKey] = useState(1);
...

useEffect(() => {
    ...
    setTableKey(tableKey + 1);
}, [tableData]);

...
<DataTable
    key={tableKey}
    data={tableData}/>

Giải pháp trong một dòng duy nhất:

const [,forceRender] = useReducer((s) => s+1, 0)

Bạn có thể tìm hiểu về useReducer tại đây. https://reactjs.org/docs/hooks-reference.html#usereducer

Giải pháp một dòng:

const useForceUpdate = () => useState()[1];

useState trả về một cặp giá trị: trạng thái hiện tại và một hàm cập nhật nó - trạng thái và setter , ở đây chúng tôi chỉ sử dụng setter để buộc kết xuất lại.

Biến thể của tôi forceUpdatekhông phải thông qua một countermà là thông qua một đối tượng:

// Emulates `forceUpdate()`
const [unusedState, setUnusedState] = useState()
const forceUpdate = useCallback(() => setUnusedState({}), [])

Vì {} !== {}mọi lúc.

Điều này sẽ hiển thị các thành phần phụ thuộc 3 lần (các mảng có các phần tử bằng nhau không bằng nhau):

const [msg, setMsg] = useState([""])

setMsg(["test"])
setMsg(["test"])
setMsg(["test"])

Đối với các thành phần dựa trên Lớp React thông thường, hãy tham khảo Tài liệu React cho forceUpdateapi tại URL này . Tài liệu đề cập rằng:

Thông thường, bạn nên cố gắng tránh tất cả việc sử dụng forceUpdate () và chỉ đọc từ this.props và this.state trong render ()

Tuy nhiên, nó cũng được đề cập trong tài liệu rằng:

Nếu phương thức render () của bạn phụ thuộc vào một số dữ liệu khác, bạn có thể cho React biết rằng thành phần cần kết xuất lại bằng cách gọi forceUpdate ().

Vì vậy, mặc dù các trường hợp sử dụng để sử dụng forceUpdatecó thể hiếm và tôi chưa sử dụng nó bao giờ, tuy nhiên tôi đã thấy nó được các nhà phát triển khác sử dụng trong một số dự án công ty cũ mà tôi đã làm việc.

Vì vậy, để biết chức năng tương đương cho các thành phần chức năng, hãy tham khảo Tài liệu phản ứng cho HOOKS tại URL này . Theo URL ở trên, người ta có thể sử dụng hook "useReducer" để cung cấp forceUpdatechức năng cho các thành phần chức năng.

Mẫu mã làm việc that does not use state or propsđược cung cấp bên dưới, cũng có sẵn trên CodeSandbox tại URL này

import React, { useReducer, useRef } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  // Use the useRef hook to store a mutable value inside a functional component for the counter
  let countref = useRef(0);

  const [, forceUpdate] = useReducer(x => x + 1, 0);

  function handleClick() {
    countref.current++;
    console.log("Count = ", countref.current);
    forceUpdate(); // If you comment this out, the date and count in the screen will not be updated
  }

  return (
    <div className="App">
      <h1> {new Date().toLocaleString()} </h1>
      <h2>You clicked {countref.current} times</h2>
      <button
        onClick={() => {
          handleClick();
        }}
      >
        ClickToUpdateDateAndCount
      </button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

LƯU Ý: Một cách tiếp cận thay thế bằng hook useState (thay vì useReducer) cũng có sẵn tại URL này .

react-tidycó một móc tùy chỉnh chỉ để làm điều đó được gọi là useRefresh:

import React from 'react'
import {useRefresh} from 'react-tidy'

function App() {
  const refresh = useRefresh()
  return (
    <p>
      The time is {new Date()} <button onClick={refresh}>Refresh</button>
    </p>
  )
}

Tìm hiểu thêm về móc này

Tuyên bố từ chối trách nhiệm Tôi là người viết thư viện này.