我今天收到了更多一般性問題。我是一個自學成才的程式員，并且是在業余愛好基礎上為小型私人專案做的。從教程和檔案中很難學到的是如何正確地構建代碼。
在 React.js 的情況下，我經常發現自己在單個頁面或組件中有數百行代碼。
給定以下示例：有一個帶有表單的頁面，其中包含不同的、可變的值（日期、布林值、數字、字串 = 所有不同型別的資料格式）。這些在單個 React.useState 中“保存”為名為“values”的物件，具有“date”、“startTime”、“specialDay”、“persons”等屬性。當其中一個發生變化時，其他的也可能發生變化，這需要一些邏輯（例如，如果日期更改，則從資料庫中更新所有其他值）。或者有時，我想更改單個嵌套屬性（例如 values.person[1].points），它在單個 React.useEffect() 呼叫（我需要多個）中導致數十行代碼。
我考慮過將這些東西匯出到一個額外的檔案中，但由于掛鉤的性質以及與組件的緊密關系，這根本行不通。據我了解，這不是“業務邏輯”，因為它主要是“如何設定狀態”邏輯。
我什至不知道，我的問題（如我描述的那樣）是否可以被除我自己之外的任何人理解。
也許簡而言之：如果我需要在 React 頁面和組件中進行大量邏輯、計算和條件/動態狀態更改，那么最好的構建方式是什么？
uj5u.com熱心網友回復：
如果您的問題是關于如何管理復雜的組件狀態，您應該考慮使用useReducer而不是useState.
reducer 函式將當前狀態和一個包含所發生事件資訊的“action”物件作為輸入，并回傳新狀態。
function reducer( state, action ) {
const newState = ... // figure out the new state
return newState;
}
由于 reducer 函式是常規的普通 javascript 函式，您可以將其移出到單獨的檔案中或將其分解為更專業的實用程式，而不受鉤子規則的約束。
您的組件可以只發送資訊并讓 reducer 計算出狀態更新。
import { useReducer } from 'react';
import myReducerFunction from './my-complex-state-reducer';
function MyComponent () {
const [state, dispatch] = useReducer(myReducerFunction, initialState);
return (
<button onClick={() => dispatch({ clicked: true, foo: 1234 })}>Do stuff</button>
);
}
uj5u.com熱心網友回復：
如果您提供一個代碼示例并盡最大努力將其重構為您想要的方式，這可能會更容易 - 然后這里的人可以幫助您進一步重構它。
您可以在這里上傳一些代碼并與我們分享 - https://codesandbox.io/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/535364.html
上一篇：過濾日期在范圍內的物件
下一篇：合并兩個物件，同時保留物件名稱