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 个状态。第一个状态是布尔值，表示输入是否良好。第二种状态是永远不会更新的 formSchema。最后，第三个状态是每个输入的 Refs，它也永远不会更新。

我的问题是：如果只有一个状态 validInputs 更有意义，因为它经常更新，然后为 formSchema 和 inputRef 创建一个带有原版 javascript 的 const 对象？还是一切都应该像以前一样进入状态？

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

Answer 1

你只需要在以下情况下使用状态：

它控制某种 element（例如 input、select、 textarea 等等）。
它控制着某种需要被操作的数据（比如需要创建、读取、更新和删除某些项目的待办事项列表——对于同构应用程序也是如此，其中一些数据需要在发送到 back-end 进行存储之前在 front-end 上进行操作）。
它用于某种 conditional rendering，其中 DOM 需要 re-rendered 并进行 UI 更改（如 isLoading 布尔值显示true 时的 Spinner，但在 false 时显示某种布局。

没有理由让你的状态混乱（无论 data type 是什么）：需要跨多个组件重复使用，是静态的，并且不会以任何方式更新 DOM （比如 ref，或 field-level 验证函数或某种静态项目列表）。

简单来说，无论它是 class 组件还是带钩子的功能组件，只要它动态地需要 manipulating/controlling 某些内容，您才需要使用状态DOM。

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

Answer 2

我担心你经常更新的状态是对象。是的，你可以这样做，但这不是通过将它们放入对象来更新你的个人状态的好方法。

如果数据未更改或更新，则无需保持数据的状态。您可以在某些变量中分配该类型的数据。

//you can track your state value and state change by this function
//you can use this same function in different component
export function useFormInput(initialValue = "") {
    const [input, setInput] = useState(initialValue);
    function handleInputChange(e) {
        setInput(e.target.value);
    }

    return {
        value: input,
        onChange: handleInputChange,
    }
}


const FormAuth = props => {
  //Frequently updates
  //useFormInput function will return input value and unchange function
  const firstName = useFormInput();
  const lastName = useFormInput();

  // Never updates
  //here your not updating data is assigned in formSchema variable
  const formSchema = {
    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 = {
    firstNameRef: React.createRef(),
    lastNameRef: React.createRef(),
    emailRef: React.createRef(),
    passwordRef: React.createRef(),
    confirmPasswordRef: React.createRef()
  }

  return(
    <div>
      //firstname value and onchange function will be
      //assigned useing spread operator
      <input {...firstName} placeholder="first name"/>
      <input {...lastName} placeholder="last name"/>
    </div>
  )
}

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

React Hooks - Should I use 'useState' for state that is unchanging?

javascript

reactjs

react-hooks