Javascript 多次渲染？

我有一个表单组件，输入字段的引用通过引用链接到useForm reducer。设置输入字段引用后，我必须设置初始表单状态？我已经做了如下工作。但这是第三次。如何解决这个渲染问题

import React, { useState } from 'react';

const useForm = () => {

    const [ formState, setFormState ] = useState({});
    const refs = useRef({});

    const register = useCallback(( fieldArgs ) => ref => {
        if(fieldArgs) {
            const { name, validations, initialValue } = fieldArgs;
    
            refs.current[name] = ref;
        }
        console.log('Register rendered');
    }, []);

    useEffect(() => {
        console.log('Effect Rendered');
        const refsKeys = Object.keys(refs.current);
        refsKeys.forEach(refKey => {
            if(!formState[refKey]) {
                setFormState(prevState => {
                    return {
                        ...prevState,
                        [refKey]: {
                            value: '',
                            touched: false,
                            untouched: true,
                            pristine: true,
                            dirty: false
                        }
                    }
                });
            }
        });
    }, [ refs ]);

    return [ register ];
}

export { useForm };

和应用程序组件，如下所示

const App = () => {

    const [ register ] = useFormsio();

    return(
        <form>

            <input
                type = 'email'
                placeholder = 'Enter your email'
                name = 'userEmail'
                ref = { register({ name: 'userEmail' }) } />

            <button
                type = 'submit'>
                    Submit
            </button>

        </form>
    )
}

const-App=（）=>{
常量[寄存器]=useFormsio（）；
返回(
提交
)
}

---

如何解决这个多重渲染问题？

我认为上面代码中的问题是，每当refs发生更改时，您都需要遍历表单中的所有字段并设置状态。

import React, { useState } from 'react';

const useForm = () => {

    const [ formState, setFormState ] = useState({});
    const refs = useRef({});

    const register = useCallback(( fieldArgs ) => ref => {
        if(fieldArgs) {
            const { name, validations, initialValue } = fieldArgs;
    
            refs.current[name] = ref;
        }
        console.log('Register rendered');
    }, []);

    useEffect(() => {
        console.log('Effect Rendered');
        const refsKeys = Object.keys(refs.current);
        refsKeys.forEach(refKey => {
            if(!formState[refKey]) {
                setFormState(prevState => {
                    return {
                        ...prevState,
                        [refKey]: {
                            value: '',
                            touched: false,
                            untouched: true,
                            pristine: true,
                            dirty: false
                        }
                    }
                });
            }
        });
    }, [ refs ]);

    return [ register ];
}

export { useForm };

为什么不在register方法中设置状态

const register = useCallback(( fieldArgs ) => ref => {
        if(fieldArgs) {
            const { name, validations, initialValue } = fieldArgs;
            if(!refs.current[name] ) {
                refs.current[name] = ref;
                setFormState(prevState => {
                    return {
                        ...prevState,
                        [refKey]: {
                            value: '',
                            touched: false,
                            untouched: true,
                            pristine: true,
                            dirty: false
                        }
                    }
                });
            }
        }
        console.log('Register rendered');
    }, []);

---

这两个渲染是否存在性能问题？有时react需要重复渲染作为其协调算法的一部分，他们的建议是更多地关注廉价的渲染函数（因此重新渲染不是什么大问题），因为跳过重新渲染可能会导致不正确的渲染结果。话虽如此，您的ref在第一次渲染中可能为null，然后它接受一个值，导致效果激发，然后导致使用钩子的组件重新渲染。请使用useffect和依赖项设置状态，然后三次渲染。如果我尝试使用相同的依赖项使用useEffect，但没有设置其中的状态，则只会呈现一次。所以我想，在useEffect中设置state是否是一个好方法？您应该始终诚实地将依赖项放入effect使用的数组中；否则它可能会导致意外的错误（无论是现在还是将来，如果你更新你的效果）好吧！我无法用我的代码找出问题所在。你能帮我解决这个问题吗