Я постараюсь быть лаконичным. Посуда React Hooks, представленная в React 16.8. . Hooks позволяет организовать логику в компонентах, делая их крошечными и многократно используемыми без записи class. В некотором смысле, это способ React опираться на функции, потому что перед ними нам нужно было бы записать их в компоненте, и, хотя компоненты оказались мощными и функциональными сами по себе, они должны что-то отображать напередний конец. В некоторой степени это все прекрасно и прекрасно, но в результате получается DOM, который изобилует div, которые делают его грубым, чтобы копаться в DevTools и отлаживать.
Ну, React Hooks измените это. Вместо того, чтобы полагаться на нисходящий поток компонентов или абстрагировать компоненты различными способами, например higher-order components (HOC), мы можем вызывать и управлять потоком внутри компонента .
Хуки применяют философию React (явный поток данных и состав) внутри компонента, а не только между компонентами. В отличие от шаблонов, таких как реквизит рендеринга или компоненты более высокого порядка, хуки не вносят ненужных вложений в дерево компонентов.
Кроме того, React Hooks может помочь вам с:
- Нет необходимости изучать, запоминать, реализовывать методы жизненного цикла:
Это - componentDidMount
class Example extends React.Component {
componentDidMount() {
console.log('I am mounted!');
}
render() {
return null;
}
}
Поворотыв:
useEffect hook
function Example() {
useEffect(() => console.log('mounted'), []);
return null;
}
This - componentDidUpdate
componentDidMount() {
console.log('mounted or updated');
}
componentDidUpdate() {
console.log('mounted or updated');
}
Превращается в:
useEffect(() => console.log('mounted or updated'));
componentWillUnmount
componentWillUnmount() {
console.log('will unmount');
}
Превращается в:
useEffect(() => {
return () => {
console.log('will unmount');
}
}, []);
... просто назвать несколько
- Сложные компоненты становятся трудными для понимания:
Нам часто приходилось поддерживать компоненты, которые вначале были простыми, но переросли в неуправляемую неразбериху с состоянием логики и побочных эффектов. Каждый метод жизненного цикла часто содержит смесь несвязанной логики, и во многих случаях невозможно разбить эти компоненты на более мелкие, потому что логика с отслеживанием состояния повсюду. Их также сложно проверить. Хуки позволяют разделить один компонент на более мелкие функции в зависимости от того, с какими частями они связаны (например, настройка подписки или выборка данных), вместо принудительного разделения на основе методов жизненного цикла. Вы также можете выбрать управление локальным состоянием компонента с помощью редуктора, чтобы сделать его более предсказуемым.
Могу ли я предложить рассмотреть useEffect hook.
- Composable,Логика многократного использования:
Трудно повторно использовать логику с состоянием между компонентами. С помощью хуков вы можете извлекать логику с состоянием из компонента, чтобы он мог быть протестирован независимо и повторно использован. Хуки позволяют вам повторно использовать логику с состоянием без изменения иерархии компонентов. Это позволяет легко обмениваться хуками между многими компонентами или сообществом. По сути, мы можем создать наши собственные пользовательские крючки
Мы лишь слегка коснулись того, на что способны крючки React, но, надеюсь, этодает вам прочную основу. Вот еще несколько предопределенных хуков:
userReducer () Альтернатива useState. Принимает редуктор типа (state, action) => newState и возвращает текущее состояние в паре с методом dispatch.
useMemo () Возвращаетпамятное значение. Передайте функцию «create» и массив входов. useMemo будет только пересчитывать запомненное значение, когда один из входов изменился.
useRef () useRef возвращает изменяемый объект ref, свойство .current которого инициализируется переданным аргументом (initialValue). Возвращенный объект будет сохраняться в течение всего времени жизни компонента.
useContext () Теперь вы можете использоватьContext API в функциональных компонентах с использованием useContext(). Это избавит вас от хлопот, связанных с бурением с опорой.
Вот несколько диаграмм, которые, как мы надеемся, приведут точку домой
Реагируют крючки по существу
РеагируютКрючки - под капотом:
Жизненный цикл React Hooks:
Жизненный цикл компонентов класса:
Надеюсь, вы немного зацепились:)