Автор: Дэйв Седдиа Переводчик: Front-end Xiaozhi Источник: daveceddia
Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статья
GitHubGitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.
Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.
Что касается React 16.8, то если мы пишем функциональный компонент, а затем сталкиваемся с ситуацией, когда нам нужно добавить состояние, мы должны преобразовать компонент в компонент класса.
записыватьclass Thing extends React.Component, скопируйте тело функции вrender()метод, исправьте отступ и, наконец, добавьте требуемое состояние.
Сегодня вы можете использовать хуки, чтобы получить ту же функциональность и сэкономить часы работы. В этой статье основноеuseStateкрюк.
что делает useState
useStateХуки позволяют нам добавлять состояние к функциональным компонентам, мы обычно называем их «хуками», но на самом деле они являются функциями и входят в состав React 16.8. Вызывая функциональный компонентuseStateЭто создаст отдельное состояние.
В компоненте классаstateВсегда объект, для которого можно добавить свойства сохранения.
Для хуков состояние не обязательно должно быть объектом, оно может быть любого типа — массивы, числа, логические значения, строки и т. д. каждый звонокuseStateсоздастstateблок, содержащий значение.
Пример: показать/скрыть компоненты с помощью useState
Этот пример представляет собой компонент, который отображает некоторые текст и в концеread moreСсылка, при нажатии на ссылку она расширяет остальную часть текста.
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
// 两个 props:
// text - 显示的内容
// maxLength - 在点击“read more”之前显示多少个字符
function LessText({ text, maxLength }) {
// 创建一个状态，并将其初始化为“true”
const [hidden, setHidden] = useState(true);
if (text <= maxLength) {
return <span>{text}</span>;
}
return (
<span>
{hidden ? `${text.substr(0, maxLength).trim()} ...` : text}
{hidden ? (
<a onClick={() => setHidden(false)}> read more</a>
) : (
<a onClick={() => setHidden(true)}> read less</a>
)}
</span>
);
}
ReactDOM.render(
<LessText
text={`专注、努力是成功的真正关键。把你的眼睛盯在目标上，然后朝着目标迈出下一步`}
maxLength={35}
/>,
document.querySelector('#root')
);
Всего одной строкой кода мы делаем этот функциональный компонент с состоянием:
const [hidden, setHidden] = useState(true);
Но что именно делает эта функция?Если она вызывается при каждом рендеринге (что она и делает), как она сохраняет состояние.
Советы по реализации хуков
«Магия» здесь заключается в том, что React поддерживает объект за кулисами для каждого компонента, и внутри этого постоянного объекта есть массив «ячеек состояния». когда ты звонишьuseStateчас,ReactСохраните это состояние в следующей доступной ячейке и увеличьте индекс массива.
Предположим, вашhooksвсегда вызываются в одном и том же порядке (при соблюдении правил для хуков они будут в том же порядке), React умеет находить конкретныеuseStateПредыдущее значение вызова. правильноuseStateПервый вызов сохраняется в первом элементе массива, второй вызов сохраняется во втором элементе и так далее.
Это тоже не очень волшебная вещь, в основном это зависит от того факта, что вы, возможно, не думали об этом: компоненты, которые мы пишем, сделаныReactcall , поэтому он может выполнить некоторую работу заранее, прежде чем вызывать компонент. Кроме того, акт рендеринга компонента — это не просто вызов функции. картина<Thing />ТакойJSXкомпилируется какReact.createElement（Thing）- Судя по всему, React контролирует, как и когда он вызывается.
Пример: обновить состояние на основе предыдущего состояния
Посмотрите другой пример: обновление на основе предыдущего значенияstateценность .
Мы собираемся создать шагомер, который подсчитывает каждый раз, когда вы нажимаете кнопку, и после того, как вы нажмете на нее, он сообщит вам, сколько шагов вы сделали.
import React, { useState } from 'react';
function StepTracker() {
const [steps, setSteps] = useState(0);
function increment() {
setSteps(steps => steps + 1);
}
return (
<div>
总共走了 {steps} 步!
<br />
<button onClick={increment}>
点点我，步数不是个事！
</button>
</div>
);
}
ReactDOM.render(
<StepTracker />,
document.querySelector('#root')
);
Во-первых, позвонивuseStateсоздать новыйstateи инициализируйте его как0. он возвращаетсяstepsтекущая стоимость0а такжеsetStepsфункция обновленияsteps,использоватьincrementфункционировать, чтобыstepsУвеличить на 1.
Здесь вы также можете оптимизировать извлечениеincrementфункция, вы можете напрямуюincrementвстроенный внутри функции дляonClickв:
<button onClick={() => setSteps(steps => steps + 1)}>
I took another step
</button>
Пример: состояние как массив
запомнить,stateВы можете сохранить любое значение, которое хотите. Вот пример списка случайных чисел, нажатие на кнопку добавит в список новое случайное число:
function RandomList() {
const [items, setItems] = useState([]);
const addItem = () => {
setItems([
...items,
{
id: items.length,
value: Math.random() * 100
}
]);
};
return (
<>
<button onClick={addItem}>Add a number</button>
<ul>
{items.map(item => (
<li key={item.id}>{item.value}</li>
))}
</ul>
</>
);
}
Обратите внимание, что мыstateинициализируется пустым массивом[], И вaddItemОбновите значение в функции.
setItemsвозобновитьstateСтарое значение не будет "объединяться" - оно будет использовать покрытие нового значения.state. Это то же самое, чтоthis.setStateВ классе это работает иначе.
Пример: состояние с несколькими ключами
Посмотри снова,stateДля примера объекта создайте форму входа с 2 полями:usernameа такжеpassword.
Следующий пример в основном показывает, какstateОбъекты хранят несколько значений и как обновить одно значение.
function LoginForm() {
const [form, setValues] = useState({
username: '',
password: ''
});
const printValues = e => {
e.preventDefault();
console.log(form.username, form.password);
};
const updateField = e => {
setValues({
...form,
[e.target.name]: e.target.value
});
};
return (
<form onSubmit={printValues}>
<label>
Username:
<input
value={form.username}
name="username"
onChange={updateField}
/>
</label>
<br />
<label>
Password:
<input
value={form.password}
name="password"
type="password"
onChange={updateField}
/>
</label>
<br />
<button>Submit</button>
</form>
);
}
Если вы хотите попробовать, см.CodeSandbox.
Во-первых, мы создаемstateфрагмент и инициализировать его объектом
const [form, setValues] = useState({
username: '',
password: ''
})
Это похоже на способ инициализации состояния в классе.
Существует также функция, которая обрабатывает представления, где,e.preventDefaultчтобы предотвратить обновление страницы и распечатать значения формы.
updateFieldФункции интереснее. оно используетsetValuesПри передаче объекта, чтобы гарантировать, что существующее состояние не будет перезаписано, используется операция распространения (...form).
Ошибки, которые могут существовать после развертывания кода, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку логов.Кстати, всем рекомендую полезный инструмент мониторинга ошибок.Fundebug.
оригинал:Дэйв Решительность 嗲.com/usst-ну...
общаться с
Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.