我发现使用hooks处理用户文本输入的方法有几种。哪种方式更可取或更适当?你会选择哪种方式?
1)处理输入的最简单的钩子,但是你要处理的字段越多,你就需要编写重复的代码越多。
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
事件:
onChange={event => setPassword(event.target.value)}
onChange={event => setUsername(event.target.value)}
2)类似于上面的示例,但使用动态键名
const [inputValues, setInputValues] = useState({
username: '', password: ''
});
const handleOnChange = event => {
const { name, value } = event.target;
setInputValues({ ...inputValues, [name]: value });
};
事件:
onChange={handleOnChange}
3) useReducer
是useState
的一种替代方案,且根据ReactJS文档所述,useReducer
通常优于useState
。
const [inputValues, setInputValues] = useReducer(
(state, newState) => ({ ...state, ...newState }),
{username: '', password: ''}
);
const handleOnChange = event => {
const { name, value } = event.target;
setInputValues({ [name]: value });
};
事件:
onChange={handleOnChange}
4) useCallback
返回的是一个记忆化版本的回调函数,只有当其中一个依赖项发生变化时才会更改。
const [inputValues, setInputValues] = useState({
username: '', password: ''
});
const handleOnChange = useCallback(event => {
const { name, value } = event.target;
setInputValues({ ...inputValues, [name]: value });
});
事件:
onChange={handleOnChange}
useCallback
没有多大意义……在我看来,useReduce
对于对象而言比useState
更加灵活且出错概率更小。 - Aprillion