Question

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

但是，通过React钩子的实现，即使状态不会更新，我也不确定应该使用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，它将永远不会被更新。最后，第三个状态是每个输入的Ref，它们也永远不会更新。

我的问题是：因为validInputs经常更新，然后formSchema 只具有一个状态更合理和inputRef用香草javascript创建一个const对象？还是应该一切都像以前那样进入状态？

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

Answer 1

您仅应在以下情况下利用状态：

它控制某种element（例如input，select， textarea等。
它控制着需要处理的某种数据（例如待办事项列表，需要创建，读取，更新和删除一些项目-同构应用也是如此，在某些情况下，需要在发送到后端进行存储之前在前端进行操作）。
它用于某种conditional rendering，其中DOM需要通过UI更改重新呈现（例如isLoading布尔值，当true时显示Spinner，但随后显示false时的某种布局。

如果状态（无论是data type是什么），则没有任何理由：需要在多个组件之间可重用，是静态的，并且不会以任何方式（例如ref或字段级验证功能或某种静态项目列表）。

简单来说，无论是类组件还是带有钩子的功能组件，只要状态需要动态地操纵/控制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”用于不变的状态？

2 个答案: