#reactjs #react-hooks
Вопрос:
Компонент использует крючок. Крючок изменяет свое состояние, компонент повторно визуализируется.
Вот пример, который я нашел, когда учился создавать крючки.
Компонент не имеет состояния, у крючка есть некоторое состояние. Всякий раз, когда состояние крючка изменяется, компонент будет повторно отображаться. Как компонент помечается для повторного рендеринга?
Мне кажется, что независимо от того, на какой глубине было вызвано состояние использования, оно всегда найдет компонент, инициировавший вызов, и свяжет его с состоянием.
Компонент
https://github.com/machadop1407/custom-use-fetch-hook-react/blob/main/src/App.js
Крючок
https://github.com/machadop1407/custom-use-fetch-hook-react/blob/main/src/useFetch.js
Комментарии:
1. извините, в чем ваш вопрос?
2. Читайте о методах жизненного цикла react, с которыми вы познакомитесь
3. biscuit765 — Я прочитал это, можете ли вы поделиться ссылкой о крючках и повторном рендеринге? Horts — вопрос в том, как крючок вызывает повторную передачу элемента управления?
4. React повторно отображает компоненты при каждом изменении состояния. Обновление состояния не происходит немедленно, но React попытается выполнить его в наилучший возможный момент. Поэтому, если состояние изменяется в крючке, и вы используете этот крючок в компоненте, компонент будет повторно отрисован.
5. Можем ли мы сказать вот так? Независимо от того, на какой глубине было вызвано состояние использования, он всегда найдет компонент, инициировавший вызов, и свяжет его с состоянием.
Ответ №1:
Состояние крючка костюма является частью состояния компонентов. С помощью крючка костюма вы можете думать, что его код находится в компоненте, который его использует.
Нравится:
const useCounter = () =gt; { const [counter,setCounter] = useState(0); const incrementCounter = () =gt; setCounter(counter 1); return [counter,incrementCounter]; } export default function App() { const [counter,incrementCounter] = useCounter(); return ( lt;div className="App"gt; lt;button onClick={incrementCounter}gt;{counter}lt;/buttongt; lt;/divgt; ); } является ли это эквивалентным:
export default function App() { const [counter, setCounter] = useState(0); const incrementCounter = () =gt; setCounter(counter 1); return ( lt;div className="App"gt; lt;button onClick={incrementCounter}gt;{counter}lt;/buttongt; lt;/divgt; ); } следующее является плохим правилом:
Независимо от того, на какой глубине было вызвано состояние использования, он всегда найдет компонент, инициировавший вызов, и свяжет его с состоянием
потому что нет никакого поиска государства. Использование крючка костюма не добавляет никакой «глубины» состоянию. Это просто реорганизация кода с сохранением состояния.
Комментарии:
1. Теперь все стало яснее, спасибо. Когда я говорил о глубине, я думал о вложенных крючках
2. Добро пожаловать @whowhenhow, я думаю, тогда вы сможете дать мне ответ на ваш вопрос.