用hooks写个登录表单 前沿开发团队

export default React.memo(Filed);

但是仅仅这样的话，Field组件还是全部重新渲染了。这是因为我们的onChange函数每次都会返回新的函数对象，导致memo失效了。我们可以把Filed的onChange函数用useCallback包裹起来，这样就不用每次组件渲染都生产新的函数对象了。

const changeUserName = useCallback((e) => {  const value = e.target.value;  setState((prevState) => { // 注意因为我们设置useCallback的依赖为空，所以这里要使用函数的形式来获取最新的state（preState）    return {      ...prevState,      username: value,    };  });}, []);

还有没有其他的方案呢，我们注意到了useReducer,