Автор оригинала: Yogesh Chavan.
Многие функции были добавлены в JavaScript в ES6. И эти изменения помогают разработчикам записи код, который короткий и простой для понимания и обслуживания.
Когда вы используете Create-React-App Чтобы создать приложение React, у вас уже есть поддержка этих изменений. Это потому, что он использует Babel.js для преобразования кода ES6 + в код ES5, который понимает все браузеры.
В этой статье мы рассмотрим различные способы, которыми мы можем написать более короткий, проще и проще понять код React Code. Так что давайте начнем.
Посмотрите на следующий код Sandbox Demo:
Здесь у нас есть два входных текстовых поля, которые принимают вход от пользователей, и две кнопки, которые рассчитают добавление и вычитание чисел, представленных в качестве ввода.
Избегайте обработчиков событий вручную
Как вы знаете, в реакции, когда мы прикрепляем любой OnClick или Onchange или любой другой обработчик событий, как это:
Затем функция обработчика (OnfirstinPutchange) не сохраняет связывание это Отказ
Это не проблема с реагированием, но вот как работают обработчики событий JavaScript.
Поэтому мы должны использовать .bind Способ правильно связать это нравится:
constructor(props) {
// some code
this.onFirstInputChange = this.onFirstInputChange.bind(this);
this.onSecondInputChange = this.onSecondInputChange.bind(this);
this.handleAdd = this.handleAdd.bind(this);
this.handleSubtract = this.handleSubtract.bind(this);
}
Вышеуказанные линии кода будут поддерживать это Связывание класса правильно внутри функций обработчика.
Но добавление нового кода привязки для каждого нового обработчика событий утомительно. К счастью, мы можем исправить его, используя синтаксис свойств класса.
Использование свойств класса позволяет нам определять свойства непосредственно внутри класса.
Создание-реактивное приложение внутри использует @ Babel/Babel-Plugin-Transform - Свойства классов плагин для варимовой версии и Babel/Plugin-предложение-класс-свойства плагин для варимовой версии <7 Таким образом, вам не нужно вручную настроить его.
Чтобы использовать его, нам нужно преобразовать функции обработчика событий на синтаксис функции стрелки.
onFirstInputChange(event) {
const value = event.target.value;
this.setState({
number1: value
});
}
Приведенный выше код может быть написан следующим образом:
onFirstInputChange = (event) => {
const value = event.target.value;
this.setState({
number1: value
});
}
Аналогичным образом, мы можем преобразовать три других функция:
onSecondInputChange = (event) => {
// your code
}
handleAdd = (event) => {
// your code
}
handleSubtract = (event) => {
// your code
}
Кроме того, нет необходимости связывать обработчики событий в конструкторе. Таким образом, мы можем удалить этот код. Теперь конструктор будет выглядеть так:
constructor(props) {
super(props);
this.state = {
number1: "",
number2: "",
result: "",
errorMsg: ""
};
}
Мы можем упростить его еще дальше. Синтаксис Свойства класса позволяет нам объявить какую-либо переменную непосредственно внутри класса, поэтому мы можем полностью удалить конструктор и объявить состояние в качестве части класса, как показано ниже:
export default class App extends React.Component {
state = {
number1: "",
number2: "",
result: "",
errorMsg: ""
};
render() { }
}
Вот код Sandbox Demo: https://codesandox.io/s/trusting-dust-ukvx2.
Если вы проверили вышеуказанный код Sandbox Demo, вы увидите, что функциональность все еще работает как раньше.
Но использование свойств класса делает код гораздо проще и легко понять.
В наше время вы найдете код React Code, написанный так.
Используйте один метод обработчика событий
Если вы проверяете вышеуказанный код, вы увидите, что для каждого поля ввода у нас есть отдельный обработчик событий, onfirstinputchange и onsecondinputchange Отказ
Если количество входных полей увеличивается, количество функций обработчика событий также увеличивается, что не является хорошим.
Например, если вы создаете страницу регистрации, то будет много входных полей. Таким образом, создание отдельной функции обработчика для каждого поля ввода не выполнимо.
Давайте изменим это.
Чтобы создать один обработчик событий, который будет обрабатывать все поля ввода, нам нужно дать уникальное имя каждому входному входным полем, которое точно соответствует именам соответствующих состояний.
У нас уже есть эта настройка. Имена номер 1 и номер 2 которые мы дали на поля ввода, также определены в состоянии. Итак, давайте изменим метод обработчика обоих полей ввода на OninPutchange нравится:
и добавить новый OninPutchange Обработчик событий, как это:
onInputChange = (event) => {
const name = event.target.name;
const value = event.target.value;
this.setState({
[name]: value
});
};
Здесь, при установке состояния мы устанавливаем имя динамического состояния с динамическим значением. Итак, когда мы меняем №1 Значение поля ввода, event.target.name будет номер 1 и event.target.value. будет введено пользователем значение.
И когда мы меняем №2 Значение поля ввода, event.target.name будет номер 2 и event.target.value будет введено пользователем значение.
Итак, здесь мы используем синтаксис динамического ключа ES6 для обновления соответствующего значения состояния.
Теперь вы можете удалить onfirstinputchange и onsecondinputchange Методы обработчика событий. Мы больше не нуждаются в них.
Вот код Sandbox Demo: https://codesandbox.io/s/withered-feather-8gsyc
Используйте один метод расчета
Теперь давайте рефактором Handleadd и Handlesubtract методы.
Мы используем два отдельных метода, которые имеют практически тот же код, который создает дублирование кода. Мы можем исправить это, создав один метод и передаю параметр в функцию, идентифицирующую добавление или вычитание.
// change the below code: // to this code:
Здесь мы добавили новый встроенный метод для OnClick Обработчик, где мы вружим называем новым Руководство Метод, передавая имя операции.
Теперь добавьте новый Руководство Метод такой:
handleOperation = (operation) => {
const number1 = parseInt(this.state.number1, 10);
const number2 = parseInt(this.state.number2, 10);
let result;
if (operation === "add") {
result = number1 + number2;
} else if (operation === "subtract") {
result = number1 - number2;
}
if (isNaN(result)) {
this.setState({
errorMsg: "Please enter valid numbers."
});
} else {
this.setState({
errorMsg: "",
result: result
});
}
};
и удалить ранее добавленные Handleadd и Handlesubtract методы.
Вот код Sandbox Demo: https://codesandox.io/s/hardcore-brattain-zv09d.
Используйте синтаксис разрезания ES6
Внутри OninPutchange Метод, у нас есть код, как это:
const name = event.target.name; const value = event.target.value;
Мы можем использовать синтаксис разрезания ES6, чтобы упростить так:
const { name, value } = event.target;
Здесь мы извлекаем имя и ценность Свойства от Event.Target объект и создание местных Имя и ценность Переменные для хранения этих значений.
Теперь внутри Руководство Метод, вместо того, чтобы обратиться к состоянию каждый раз, когда мы используем this.state.number1 и this.state.number2. Мы можем отделить эти переменные заранее.
// change the below code:
const number1 = parseInt(this.state.number1, 10);
const number2 = parseInt(this.state.number2, 10);
// to this code:
let { number1, number2 } = this.state;
number1 = parseInt(number1, 10);
number2 = parseInt(number2, 10);
Вот код Sandbox Demo: https://codesandox.io/s/excinging-austin-ldncl.
Используйте расширенный объект буквальный синтаксис
Если вы проверяете SetState Функция вызова внутри Руководство Функция, это выглядит так:
this.setState({
errorMsg: "",
result: result
});
Мы можем использовать усиленный объект буквальный синтаксис для упрощения этого кода.
Если имя свойства точно совпадает с именем переменной, такими как Результат: результат Тогда мы можем пропустить упомянуть часть после толстой кишки. Так вышесказанное SetState Вызов функции может быть упрощен так:
this.setState({
errorMsg: "",
result
});
Вот код Sandbox Demo: https://codesandbox.io/s/affectionate-johnson-j50ks
Конвертировать компоненты класса, чтобы реагировать крюки
Начиная с React версии 16.8.0, RECT добавил способ использования способов использования состояния и жизненного цикла внутри функциональных компонентов с помощью реактивных крюков.
Использование React Cooks позволяет нам написать код, который намного короче и легко поддерживать и понимать. Итак, давайте преобразом приведенный выше код для использования синтаксиса React Clubs.
Если вы новичок, чтобы реагировать крюки, проверьте мой Введение в реактивный крюк статья.
Сначала объявляем компонент приложения как функциональный компонент:
const App = () => {
};
export default App;
Объявить государство, мы должны использовать Уместите Крюк, поэтому импортируйте его в верхней части файла. Тогда создайте 3 Уместите Звонки, один для хранения чисел вместе как объект. Мы можем обновить их вместе, используя функцию одного обработчика и два других Уместите Вызывает для хранения результата и сообщения об ошибке.
import React, { useState } from "react";
const App = () => {
const [state, setState] = useState({
number1: "",
number2: ""
});
const [result, setResult] = useState("");
const [errorMsg, setErrorMsg] = useState("");
};
export default App;
Изменить OninPutchange Метод обработчика к этому:
const onInputChange = () => {
const { name, value } = event.target;
setState((prevState) => {
return {
...prevState,
[name]: value
};
});
};
Здесь мы используем синтаксис Updater для настройки состояния, потому что при работе с React Clots State не объединяется автоматически при обновлении объекта.
Таким образом, мы впервые распространяем все свойства состояния, а затем добавляя новое состояние состояния.
Изменить Руководство Метод к этому:
const handleOperation = (operation) => {
let { number1, number2 } = state;
number1 = parseInt(number1, 10);
number2 = parseInt(number2, 10);
let result;
if (operation === "add") {
result = number1 + number2;
} else if (operation === "subtract") {
result = number1 - number2;
}
if (isNaN(result)) {
setErrorMsg("Please enter valid numbers.");
} else {
setErrorMsg("");
setResult(result);
}
};
Теперь верните тот же JSX, возвращенный из метода рендеринга компонента класса, но удалите все ссылки это а также Это от JSX.
Вот код Sandbox Code: https://codesandbox.io/s/musing-breeze-ec7px?file=/src/App.js
Неявно возвращает объекты
Теперь мы оптимизировали наш код, чтобы использовать современные функции ES6 и избегали дубликации кода. Есть еще одна вещь, которую мы можем сделать, это упростить SetState Функциональный вызов.
Если вы проверяете текущий SetState Функция вызова внутри OninPutchange Обработчик, похоже, это выглядит так:
setState((prevState) => {
return {
...prevState,
[name]: value
};
});
В функции стрелки, если у нас есть код, как это:
const add = (a, b) => {
return a + b;
}
Тогда мы можем упростить его, как показано ниже:
const add = (a, b) => a + b;
Это работает, потому что, если в корпусе функции стрелки есть одно оператор, то мы можем пропустить курчавые кронштейны и ключевое слово возврата. Это известно как неявное возвращение.
Так что, если мы возвращаем объект из функции стрелки, как это:
const getUser = () => {
return {
name: 'David,
age: 35
}
}
Тогда мы не может Упростите это так:
const getUser = () => {
name: 'David,
age: 35
}
Это связано с тем, что открытие вьющиеся кронштейны указывают на начало функции, поэтому вышеуказанный код недействителен. Чтобы сделать это работать, мы можем обернуть объект в круглых скобках, как это:
const getUser = () => ({
name: 'David,
age: 35
})
Вышеуказанный код такой же, как код ниже:
const getUser = () => {
return {
name: 'David,
age: 35
}
}
Таким образом, мы можем использовать ту же технику, чтобы упростить нашу SetState Функциональный вызов.
setState((prevState) => {
return {
...prevState,
[name]: value
};
});
// the above code can be simplified as:
setState((prevState) => ({
...prevState,
[name]: value
}));
Вот код Sandbox Demo: https://codesandox.io/s/sharp-dream-l90gf?file=/src/app.js.
Эта методика обертывающего кода в круглых скобках используется много в реакции:
- Чтобы определить функциональный компонент:
const User = () => ();Welcome, User
You're logged in successfully.
- Внутри функции MapstatoPOOPs в React-Redux:
const mapStateToProps = (state, props) => ({
users: state.users,
details: state.details
});
- Redux Action Creator Функции:
const addUser = (user) => ({
type: 'ADD_USER',
user
});
и много других мест.
Дополнительное совет, чтобы помочь вам написать лучшие компоненты реагирования
Если у нас есть такой компонент:
const User = (props) => ();Welcome, User
You're logged in successfully.
А позже хочу зарегистрировать реквизиты на консоль только для тестирования или отладки, а затем вместо преобразования кода на следующий код:
const User = (props) => {
console.log(props);
return (
Welcome, User
You're logged in successfully.
);
}
Вы можете использовать логический или оператор (
const User = (props) => console.log(props) || ();Welcome, User
You're logged in successfully.
Как это работает?
console.log Функция просто печатает значение, переданное ему, но это ничего не возвращает – поэтому он будет оценен как неопределенный
И потому что Оператор возвращает первую правдивую ценность, код после
Спасибо за прочтение!
Вы можете узнать все о функциях ES6 + подробно в моих Овладение современным JavaScript книга.
Также вы можете проверить мой бесплатный Введение в React Router курс.
Подписаться на мой Еженедельная рассылка Чтобы вступить в 1000+ других подписчиков, чтобы получить удивительные советы, трюки, статьи и скидки непосредственно в вашем почтовом ящике.
Оригинал: “https://www.freecodecamp.org/news/how-to-write-better-react-components/”