Вы можете спросить, почему я просто не использую antd ?
Материальный UI может быть не популярен в отечественных компаниях и фронтенд-кругах, потому что у них есть antd.Правда, antd — очень хорошее решение уровня предприятия, и Ali тоже на него позиционируется, но это чистый UI-фреймворк. На самом деле, это слишком сложно и слишком инкапсулировано, что часто заставит пользователей чувствовать себя несвободными и сделает повторение кода и пользовательского интерфейса слишком высоким.Однако, на самом деле, это хорошая вещь в системе управления фоном уровня предприятия, что может сделать стиль и использование унифицированными, что снижает стоимость обучения. Но для самой важной области интерфейса, то есть возможности создавать страницы с разными стилями и функциями, использование antd часто не лучший выбор, особенно в продуктах to C, которые практически невозможно увидеть и antd. в этом плане хорошо поработали.Отвечает только за единый стиль материалов юнитов, а как комбинировать,расширять и инкапсулировать полностью передано разработчикам.В этом тоже прелесть Material Design.Они используют этот стиль дизайна их продукции много, и вы редко чувствуете однообразие и повторение страниц.
Таким образом, нет никакой разницы между управлением формами в Material UI и использованием форм в любом другом фреймворке, даже в нативных приложениях React, а реализация многих хуков React в Material UI соответствует стилю кода, официально рекомендованному React в будущем.
На самом деле, реализация rc-form в antd по-прежнему основана на контролируемых компонентах и управлении состоянием. Antd фактически переименовывает каждую из этих реализаций. В большинстве случаев эти имена могут существенныйForm.create()На самом деле это компонент высокого порядка. Чрезмерное использование компонентов высокого порядка также может излишне увеличить DOM-уровень кода. Однако самое хлопотное на самом деле - получение наиболее часто используемых значений формы формы. Если вы хотите получить одно или несколько значений по отдельности, вам нужно написать много кода, который вы не знаете, почему, например, почему объект формы формы появляется в свойствах компонента, и если родительский компонент хочет чтобы получить дочерний компонент Форма сложнее.Вы должны привязать ref дочернего компонента к родительскому компоненту, чтобы проверить и получить его значение.Эти коды на самом деле очень избыточны, так что пользователь полностью отделен от родной формы, так что Пользователи чрезмерно зависят от antd, и даже оставляют antd без обработки форм.
Контролируемые и неконтролируемые компоненты
Возможно, для многих людей, много лет использующих rc-форму antd, эти два понятия станут очень расплывчатыми, но на самом деле в большинстве React-приложений это самый распространенный способ работы с формами, у обоих методов есть свои плюсы и минусы. минусы, которые могут быть более сложными в использовании, чем упакованные компоненты antd, но решение является более общим и простым для понимания, потому что в большинстве случаев мы не рекомендуем вводить весь UI для обработки формы Фреймворк и этот метод программирования ближе к нативному, позволяя людям знать, что они делают, а также гарантируется читабельность кода переформирования.
Управляемые компоненты
Для каждого поля в форме, входного радио и т.п. привязать к нему состояние, и каждый раз при изменении входного значения передаватьonValueChangeпеределыватьsetStateВ то же время значение ввода также напрямую связано с соответствующим значением в состоянии.
Преимущество этого метода в том, что, используя характеристики состояния, мы можем легко извлечь и отформатировать его, а уведомление о каждом изменении ввода также означает, что мы можем проверить его во времени для каждого изменения значения. Проблема с этим методом заключается в том, что нам нужно добавить много состояния в компонент.Если в компоненте много элементов формы, состояние компонента будет накапливаться в длинном списке, и большинство этих данных должны принимать только последнее значение. , Да нет необходимости ставить его в состояние, а ведь каждое изменение будет сбрасыватьsetStateЭто означает, что каждый ввод сопровождается повторным рендерингом, и мы часто не добавляем к нему анти-шейк в этом случае, поэтому вызванный повторный рендеринг не имеет большого значения.
неконтролируемые компоненты
Метод, который ближе к нативной форме, в основном не имеет отношения к управлению React, он просто использует ref для прямого получения DOM формы для получения Value. Этот метод более прямой, но он также имеет много недостатков, таких как невозможность своевременной проверки формы и ручная привязка ref для каждого узла.В большинстве случаев и большинство реализаций библиотек форм в основном основаны на контролируемых компонентах и управлении состоянием.
с формой реакции-хука
Это просто самая элегантная библиотека для работы с формами, которую я когда-либо видел.Во всей библиотеке меньше десяти API, и реализация полностью основана на хуках React (имеется в виду, что ваша версия React также поддерживает хуки).Можно сказать, что он объединяет контролируемые преимущества компонентов и неконтролируемых компонентов, так что значение компонента не зависит от DOM и не должно зависеть от состояния, поэтому не будет так много повторных рендеров.Также его проверка также очень полезно, потому что он расширяет H5.Собственный модуль проверки также будет иметь более глубокое понимание собственного программирования в процессе использования, давайте взглянем на простой 🌰
const SignInSide = props => {
const classes = useStyles()
const { register, handleSubmit, errors } = useForm()
const handleLogin = data => {
console.log(errors)
console.log(data)
props.dispatch(actions.asyncLogin(data))
}
const handleAuth = () => {
props.dispatch(actions.asyncAuth())
}
return (
<Grid container component="main" className={classes.root}>
<CssBaseline />
<Grid item xs={false} sm={4} md={7} className={classes.image} />
<Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<form className={classes.form} onSubmit={handleSubmit(handleLogin)}>
<TextField
inputRef={register({
required: 'no email is dame',
maxLength: { value: 10, message: 'too long' },
})}
error={Boolean(errors.email)}
variant="outlined"
margin="normal"
fullWidth
id="email"
label="Email Address"
name="email"
helperText={
errors.email ? errors.email.message : 'input your email'
}
autoFocus
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign In
</Button>
<Grid container>
<Grid item xs>
<Link href="#" variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<Link href="#" variant="body2" onClick={handleAuth}>
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
<Box *mt*={5}>
<Copyright />
</Box>
</form>
</div>
</Grid>
</Grid>
)
}
Поскольку Material UI не предоставляет нам интерфейс для проверки, он просто дает нам стиль ошибки проверки в TextField, и здесь мы можем определить разные подсказки для разных проверок в сочетании с механизмом ошибок rhf, и в то же время это может быть идеальным. Обратная связь анимации проверки и отправленные данные формы будут переданы только после прохождения всех проверок.handleLogin, вы можете использовать его напрямую и свободно.Если вы хотите передать его родительскому компоненту, просто передайте этот метод через реквизиты.
Если вы считаете, что использование таким образом будет более проблематичным, вы можете интегрировать и инкапсулировать его с помощью rhf на основе собственного ввода, что также поощряет делать каждый в Material UI.
Reference
Контролируемые и неконтролируемые формы ввода в React не должны быть сложными — Гоша Аринич
Понимание и использование форм AntDesign — слепки
GitHub — react-hook-form/react-hook-form: 📋 React hooks для проверки формы без хлопот