React useState hook：將 setter 傳遞給子功能更新、回調和 useCallback

Question

關於 React 鈎子，我有幾個彼此相關的問題： `useState`和`useCallback` 。

1.1。 如果設置器 function 收到 function 它的參數將始終是之前的 state？

如果我想從子組件更新父 state，我應該如何將設置器傳遞給子組件 - 將其包裝在另一個 function 作為回調，如此處所述？ 只是按照這里的建議直接傳遞？

2.1。 每種方法的原因和優點/缺點是什么？

4.1。 在這種情況下向孩子傳遞回調有用嗎？

Answer 1

1. 究竟什么時候需要功能更新？

您可能需要更新組件上的任何 state。 例如，您通過 api 從服務器獲取用戶，您需要將該用戶存儲在您的組件中。 為此，您需要 useState 來存儲該用戶 object。 這是示例：

const [user, setUser] = useState({}); // declaration

let newUser = u; // u is coming from api
setUser(newUser);

1.1。 如果設置器 function 收到 function 它的參數將始終是之前的 state？

是的。 像 setState 一樣的 setter function 用於 class 組件。 這是僅更新 state 字段的示例：

this.setState({username: 'khabir'});

在這里，您正在使用以前的 state 更新 state：

this.setState(prevState =>{
   return{
        counter : prevState.counter +1
   }
})

2. 如果我想從子組件更新父 state，我應該如何將設置器傳遞給子組件 - 將其包裝在另一個 function 作為回調，如此處所述？ 只是按照這里的建議直接傳遞？

兩個例子都是一樣的。 你可以使用任何人。

3. 如果我可以直接傳遞它並且我正在使用備忘錄，那么是否需要使用這里解釋的 useCallback ？

如果您從父組件傳遞任何 function 對子組件的引用，則它會在每次渲染 Parent 時創建，因此 prevProps 和 props 不再相同，即使它們是相同的。

要應用備忘錄，我們需要確保 function 引用不會在每次渲染 Parent 時不必要地重新創建。 這就是使用 useCallback 的原因。 請完整閱讀該文章以獲得更好的理解。

4. 如果我想在從孩子更新父 state 時使用最新的 state 數據，我應該怎么做？

您不能直接從子組件更新父 state 但您可以將 function 引用發送到子組件並從定義的子組件（父組件上的函數）調用 function。 在該 function 主體（在父組件中）中，您可以更新父組件的 state。

4.1。 在這種情況下向孩子傳遞回調有用嗎？

是的，正如我在問題 4 的答案中所說的那樣。