reactjs - useState 钩子和类型脚本的最佳实践

Question

我只是想知道当我有多个元素View并且每个元素都有一些可以改变的状态时，什么会被认为是最佳实践。

单独为每个元素使用钩子会更好useState，还是为整个屏幕创建一般状态并将其嵌套在其中的其他子状态会更好。

例如这样的：

interface InputTextState {
    focused: boolean,
    blurred: boolean,
    value: string,
    hasInvalidValue: boolean
}

interface AcceptButtonState {
   enabled: boolean,
   imgResource: string,
   hasUserClicked: boolean
}

interface ComponentState {
    inputState: InputTextState,
    buttonState: AcceptButtonState
}

然后我会像这样使用它：

const [state, setState] = React.useState<ComponentState>()

当我需要更新时，我只会更新我需要的东西

setState(prevState => ({...prevState, inputState: {focused: true}))

对此的替代方法似乎会创建许多类似这样的状态：

const [isInputTextBlurred, setIsInputTextBlurred] = React.useState<boolean>(false)
const [isInputTextFocused, setIsInputTextFocused] = React.useState<boolean>(false)
.....
const [hasUserClickedAccept, setHasUserClickedAccept] = React.useState>boolean(false)

标签： reactjsreact-nativereact-hooksreact-typescript