javascript - React Hooks - 我应该为不变的状态使用 'useState' 吗？

Question

当我最初学习 React Component 时，我总是被告知要将所有内容 放在this.state 中。无论是一些经常更新的数据还是一些根本不更新的数据。

但是，随着 React hooks 的实现，我不确定我应该多久使用一次 useState，即使状态不会更新。

让我举一个我的表单逻辑的例子:

const FormAuth = props => {
    //Frequently updates
    const [validInput, setValidInput] = useState({
        isCompletedForm: Boolean,
        firstName: Boolean,
        lastName: Boolean,
        email: Boolean,
        password: Boolean,
        confirmPassword: Boolean
    });

    // Never updates
    const [formSchema, setFormSchema] = useState({
        firstName: Joi.string().required(),
        lastName: Joi.string().required(),
        email: Joi.string().required().email().regex(emailRegex),
        password: Joi.string().required().regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$^+=!*()@%&?.]).{8,30}$/),
        confirmPassword: Joi.string().required()
    })

    // Never updates
    const [inputRef, setInputRef] = useState({
        firstNameRef: React.createRef(),
        lastNameRef: React.createRef(),
        emailRef: React.createRef(),
        passwordRef: React.createRef(),
        confirmPasswordRef: React.createRef()
    });

    // render some JSX
}

这里我有 3 个状态。第一个状态是 bool 值，表示输入是否良好。第二种状态是永远不会更新的 formSchema。最后，第三种状态是每个输入的 Refs，它也永远不会更新。

我的问题是:对于validInputs只有一个状态会更有意义，因为它经常更新，然后对于formSchema 和 inputRef 使用 vanilla javascript 创建一个 const 对象？还是一切都应该像以前一样进入状态？

在我看来，如果状态要更新，则只使用 useState 会更有意义，但我正在尝试了解 hooks 向前发展的正确约定。

Answer 1

只有在以下情况下才需要使用状态:

• 它控制某种 element (比如 input，select，textarea 等)。
• 它控制着某种需要被操作的数据(比如需要创建、读取、更新和删除某些项目的待办事项列表——同样适用于同构应用程序，其中一些数据需要在发送到后端进行存储之前在前端进行操作)。
• 它用于某种 conditional rendering ，其中 DOM 需要通过 UI 更改重新呈现(如 isLoading bool 值，当 true 时显示 Spinner，但当 时显示某种布局假).

没有理由让你的状态困惑(无论 data type 它是什么):需要跨多个组件重用，是静态的，并且不以任何方式更新 DOM(比如 ref 或字段级验证功能或某种静态项目列表)。

简单来说，无论它是类组件还是带钩子(Hook)的功能组件，只要它需要动态操作/控制 DOM 中的某些内容，您才需要使用状态。

这是一个带有一些验证的简单表单示例: