передняя часть Seewo ENOW
Официальный сайт компании:CVTE (Гуанчжоу CVTE)
Команда: enow team центра программных платформ Seewo для будущего образования в рамках CVTE
Автор этой статьи:
предисловие
Когда я слышу такой вопрос, первая общая мысль, которая приходит мне в голову, такова:
- Пользовательское понимание
Hookосновная концепция - Возможность использовать пользовательские
HookИнкапсулировать логику мультиплексирования - Узнать о настройке
Hook Hook-
Reack HookМысль
Что такое пользовательский хук React
HookдаReact 16.8новые особенности. Это позволяет вам писатьclassиспользовать в случаеstateИ другиеReactхарактеристика.ReactОфициальный предоставляет обычно используемыеStateHookа такжеEffectHookИспользуется для управления состоянием функциональных компонентов и побочными эффектами соответственно.(Официальное введение React Hook).
В дополнение к официально предоставленным StateHook и EffectHook мы можем самостоятельно извлечь общую логику компонентов в многократно используемые функции, которые должны быть названы и использоваться в форме соглашений React для совместного использования логики компонентов.
Так как написать наш собственный пользовательский крюк
Давайте рассмотрим простой пример Например, нам нужно установить заголовок страницы после получения определенных данных и использовать его на каждой странице.
import React, { useState, useEffect } from 'react';
export default function App() {
// 正常我们这样子实现
const [title, setTitle] = useState('默认标题')
useEffect(() => {
document.title = title;
}, [title]);
const onTitleChange = (event) => {
setTitle(event.target.value);
}
return (<div>
<h2>{title}</h2>
<input type="text" onInput={onTitleChange}/>
</div>)
}
- Извлечение общей логики и инкапсуляция ее в пользовательский хук
export function useSetPageTitle (initTitle) {
const [title, setTitle] = useState(initTitle || '默认标题');
useEffect(() => {
document.title = title;
}, [title]);
return [title, setTitle]
}
- Используйте useSetPageTitle, только что написанный в других компонентах
import { useSetPageTitle } from '../App';
export default function Chirld() {
// 这里使用刚才写自定义Hook
const [title, setTitle] = useSetPageTitle();
return (<div>
<h2>{title}</h2>
<input type="text" onInput={onTitleChange}/>
</div>>)
}
это обычайhookСформировалось.Ощущается мгновенное улучшение?Получается, что я тоже могу написать такой высокий кастомHook, Хахаха.
Умный, вы, должно быть, обнаружили следующие характеристики
Обычай соглашения ReactHookДолженuseначало
Используя вышеприведенный пример【useSetPageTitle】. Из этого не следует, следовательно, невозможность определить, включать ли функцию своего внутреннегоHook, React не сможет автоматически проверятьHookнарушил ли онHookправило.
настроитьHookМожет свободно сочетаться с другимиhookиспользовать
Вы можете использовать другие внутренние компонентыHookи другие настройкиHook.Используется в приведенном выше демонстрационном примере.useStateа такжеuseEffect.
Используйте только крючки на верхнем уровне функциональных компонентов Rection
Это делается для обеспеченияHookВызывается в одном и том же порядке при каждом рендеринге. Если это не верхний уровень, это вызовет ошибку состояния или метода выполнения и вызоветBUG.
- Контрпример
когдаstate='A'Выполнить вызов, когда условие выполненоHookПорядок нормальный, когда последующие условия рендеринга не выполняются, тоReactпередачаHookСбой последовательности, и метод приведет к выполнению логики состояния ошибки.
import React, { useState, useEffect } from 'react';
import './App.css';
import { useSetPageTitle } from './hooks';
export default function App() {
const [state, setState] = useState('A');
// 反例
if (state === 'A') {
useEffect(() => {
console.log('只执行一次')
}, [state]);
}
useState({});
useEffect(() => {
// 获取数据
}, []);
useState({});
console.log(title)
return (
<div className="App">
<p> Hello React Hook! </p>
</div>
);
}
- Правильный случай
import React, { useState, useEffect } from 'react';
export default function App() {
const [state, setState] = useState('A');
useEffect(() => {
if (state === 'A') {
console.log('执行相应的逻辑')
}
}, [state]);
useState({});
useEffect(() => {
// 获取数据
}, []);
useState({});
return (
<div className="App">
<p> Hello React Hook! </p>
</div>
);
}
Чтобы избежать ошибок, мы можем использовать плагин ESLINT для обнаружения применения этих правил.
eslint-plugin-react-hooks
// 你的 ESLint 配置
{
"plugins": [
// ...
"react-hooks"
],
"rules": {
// ...
"react-hooks/rules-of-hooks": "error", // 检查 Hook 的规则
"react-hooks/exhaustive-deps": "warn" // 检查 effect 的依赖
}
}
Итак, в каких сценариях мы можем идентифицировать и извлекать пользовательские хуки?
настроитьHookрешено доReactПроблема невозможности гибко разделить логику в компонентах. Затем в развитии бизнеса могут быть созданы различные настройки.Hook, Общие вспомогательные функции, повторное использование состояний, повторное использование логики, повторное использование эффектов, повторное использование операций, моделирование жизненного цикла и многократное повторное использование комбинаций являются только неожиданными, я считаю, что трудно создать такую умную сцену, которую вы не можете сделать.
Вот несколько простых каштанов, бросающих кирпичи и привлекающих нефрит
- Например,
useMountимитация жизненного циклаcomponentDidMount
import React, { useState, useEffect } from 'react';
function useMount (fn) {
useEffect(() => {
fn();
}, []);
}
export default function App() {
useMount(() => {
// 你的逻辑
})
return (
<div className="App">
<p> Hello React Hook! </p>
</div>
);
}
- использовать
useEffectФункция возврата — это механизм, который вызывается перед уничтожением для имитацииunmount
function useUnmount (fn) {
useEffect(() => {
return () => {
fn();
}
}, []);
}
export default function App() {
useUnmount(() => {
console.log('销毁组件时输出')
})
return (
<div className="App">
<p> Hello React Hook! </p>
</div>
);
}
- Отслеживание изменений окна
import React, { useState, useEffect } from 'react';
function useOnResize (fn) {
useEffect(() => {
window.addEventListener('resize',fn);
return () => {
window.removeEventListener('resize',fn)
}
}, []);
}
export default function App() {
useOnResize(() => {
console.log(document.body.clientWidth)
})
return (
<div className="App">
<p> Hello React Hook! </p>
</div>
);
}
Вот несколько интересных библиотек Hooks для использования и справки.
Библиотека инструментов React Hooks, созданная совместно командой ant umi, ледовой командой Департамента Тао и спортивной командой Али.ahooks
Set of a helpful hooks, for different specific to some primitives types state changing helpers.
Может создавать всплывающие окна, подсказки, меню становятся очень простыми, обеспечивая уровень элементов DOM, созданных вне функции
Отличный хук для создания Http-запросов
Найдите больше отличных библиотек хуков и опубликуйте их в комментариях ниже, целую коллекцию отличных библиотек хуков..
создать новые колеса
Добро пожаловать (бу) получите (яо) новое (гэн) колесо (син) ребенок (ле), двигайтесь к (бяо) двигайтесь (ши) новое (сюэ) колесо (бу) ребенок (дун) вперед (ле)