Что такое хуки? Flashcards

Question

Q

Что такое хуки?

Answer 1

A

Хук — это функция javascript, которая позволяет создавать / получать доступ к состоянию и жизненным циклам React, и которая для обеспечения стабильности приложения должна использоваться в соответствии с двумя основными правилами:

Должна вызываться на верхнем уровне приложения — хук никогда не должен вызываться внутри циклов, условных выражений или вложенных функций, поскольку порядок вызова хуков всегда должен быть одинаковым, чтобы гарантировать предсказуемость результата во время рендеринга. Использование только верхнего уровня — это то, что гарантирует, что внутреннее состояние React правильно сохраняется между разными вызовами одного и того же хука.

Должен вызываться в функциях или других пользовательских обработчиках React — хук никогда не должен вызываться вне функции React или другого пользовательского обработчика, чтобы логика состояния компонента была четко видна из остальной части кода для области, установленной React.

React предоставляет три основных хука, которые отвечают обычным потребностям реализации жизненного цикла в компоненте класса.

Хук состояния useState
Этот хук возвращает значение с поддерживаемым состоянием и функцию, которая необходима для его обновления:
const [count, setCount] = useState(0)

const [count, setCount] = useState(0)
Начальное состояние — это параметр, переданный в useState, в данном случае 0, и это будет состояние, по крайней мере, во время начального рендеринга и до тех пор, пока функция setCount не будет вызвана с новым значением, так что в этом случае, например, значение setCount(count + 1) будет увеличиваться, став 1 в следующем рендеринге.
Также можно использовать значение предыдущего состояния в самой функции установки состояния, поэтому приведенное выше также можно записать как setCount(count => count + 1).

Хук эффекта useEffect
Этот хук позволяет нам добавлять побочные эффекты к заданному функциональному компоненту, то есть он позволяет нам вносить изменения в нашу логику после выполнения рендеринга таким же образом, как методы жизненного цикла компонентов класса componentDidMount, componentDidUpdate и componentWillUnmount.

Одно из больших преимуществ этого хука состоит в том, что он упрощает жизненный цикл, так что три доступных метода класса могут быть выражены с использованием только этого хука. Например, в случае компонента класса, который загружает набор данных из файла cookie при монтировании и записывает его при размонтировании, мы могли бы написать его так:

class LoadUnload extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null
}
}
componentDidMount() {
// theoretical function that returns cookie data as a js object
const loadedData = getCookie(‘data’);
this.setState({data: loadedData})
}
componentWillUnmount() {
const { data } = this.state;
// Theoretical function that saves the data object in JSON format
setCookie(data);
}
}

class LoadUnload extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null
}
}
componentDidMount() {
// theoretical function that returns cookie data as a js object
const loadedData = getCookie(‘data’);
this.setState({data: loadedData})
}
componentWillUnmount() {
const { data } = this.state;
// Theoretical function that saves the data object in JSON format
setCookie(data);
}
}
Это можно сделать с помощью одного функционального компонента:

function LoadUnload(props) {
const [data, setData] = useState(null);
useEffect(() => {
const loadedData = getCookie(‘data’);
setData(loadedData);
return () => setCookie(data);
}, []);

}
function LoadUnload(props) {
const [data, setData] = useState(null);
useEffect(() => {
const loadedData = getCookie(‘data’);
setData(loadedData);
return () => setCookie(data);
}, []);

}
Где, используя пустой массив зависимостей, мы говорим, что эффект запускается только при монтировании (componentDidMount), а результат функции — это новая функция, которая вызывается только при размонтировании (componentWillUnmount).

Хук контекста useContext
Если вы когда-либо использовали контекст React, это то, что вам нужно. Контекст в React — это способ передачи данных между различными компонентами без необходимости вручную каскадировать свойства. Например, когда мы хотим создать темы или местоположения, которые должны быть глобальными для всего дерева компонентов, и может быть обременительным распространять их для каждого добавленного компонента.

В случае компонентов класса контекст передается через провайдер, который охватывает дерево компонентов, которые должны иметь этот контекст, так что компонент, который имеет локализацию и использует контекст LocalContext, может быть записан следующим образом:

import {LocalContext} from ‘./local-context’;

class LocalizedText extends React.Component {    
   render() {      
     let local = this.context;      
     return (        
       <div          
         {...this.props}        
         >              
           <h1>{local.title}</h1>              
           <p>{local.paragraph}</p>        
       </div>      
    );    
  }   }   LocalizedText.contextType = LocalContext;     export default LocalizedText;

import {LocalContext} from ‘./local-context’;

class LocalizedText extends React.Component {    
   render() {      
     let local = this.context;      
     return (        
       <div          
         {...this.props}        
         >              
           <h1>{local.title}</h1>              
           <p>{local.paragraph}</p>        
       </div>      
    );    
  }   }   LocalizedText.contextType = LocalContext;     export default LocalizedText; В случае функционального компонента и с использованием хуков мы можем использовать useContext, что позволяет нам получить доступ к созданному контексту, например, для небольшого приложения, которое передает местоположение компоненту, подобному предыдущему, но функционально:

JavaScript
const local = {
en: {
title: ‘Hi’,
paragraph: ‘This is a little test’
},
es: {
title: ‘Hola’,
paragraph: ‘Esto es un pequeño ejemplo’
}
};

const LocalContext = React.createContext(local.es);

function App( ) {
return (
<ThemeContext.Provider value={local.en}>
<Container></Container>
</ThemeContext.Provider>
);
}

function Container(props) {
return (
<div>
<LocalizedText></LocalizedText>
</div>
);
}

const LocalContext = React.createContext(local.es);

function App( ) {
return (
<ThemeContext.Provider value={local.en}>
<Container></Container>
</ThemeContext.Provider>
);
}

function Container(props) {
return (
<div>
<LocalizedText></LocalizedText>
</div>
);
}

function LocalizedText(props) {
const local = useContext(LocalContext);
return (
<div {…props}>
<h1>{local.title}</h1>
<p>{local.paragraph}</p>
</div>
);
}

Brainscape's Knowledge GenomeTM

Что такое хуки? Flashcards

Brainscape's Knowledge Genome^TM