Question

我使用了 react-hook-form，但我决定构建自己的钩子表单。但是现在我很困惑应该使用 useState 还是 useRef。考虑以下代码片段。

import { useState } from 'react';

const useForm = (submitCallback, defaultValues= {}) => {

    const [values, setValues] = useState(defaultValues);

    const handleChange = e => {
        e.persist();
        setValues(state => ({ ...state, [e.target.name]: e.target.value}));
    }

    const hadleSubmit = e => {
        e.preventDefault();
        submitCallback();
    }

    return {values, setValues, handleChange, hadleSubmit}
}

export default useForm;

const Form = () => {

    const submitForm = () => {
        console.log(values)
    }

    const { values, handleChange, handleSubmit } = useForm(submitForm)

    return (
        <div className="form">
            <div>
                <RandomComponent />
            </div>
            <div>
                <form onSubmit={handleSubmit}>
                    <Input 
                        type="text" 
                        label="Name: *" 
                        name="name"
                        value={values["name"] || ""} 
                        hadleChange={handleChange}/>
                </form>
            </div>
        </div>
    )
}

它工作正常，但我发现每次我向 Input 组件输入内容时，它都会导致整个 Form 组件重新渲染。我也将 Memo 用于 RandomComponent 和所有其他组件，因此只有 Input 重新渲染，我在其中输入和 Form 组件作为父组件。我明白为什么会发生这种情况，最近我发现了 useRef。那么有人有这方面的经验吗？对于这种情况，我应该使用 useRef 还是 useState。谢谢你的建议:)

反应自定义钩子形式 useRef() 或 useState()

0 个答案: