Введение
Не так давно реакция запустила новую функцию хуков в новой версии 16.7.0-alpha.0, ее роль заключается в том, чтобы позволить вам использовать состояние реакции и другие функции без компонентов класса. Как мы все знаем, способ написания урока иногда очень громоздкий, например, этот вопрос и так далее. В этой статье в основном представлены функции, включая этиuseState,useEffect,useContext,useRef, эта статья в основном знакомит с ролью этих функций.
useState
Например, есть компонент, который должен поддерживать свое собственное внутреннее состояние, прежде чем мы напишем компоненты класса, затем то, что обычно определяется состоянием, затем вам нужно изменить время, с помощью setState, чтобы изменить свое собственное состояние.useStateЭта функция делает именно это, принимая параметрinitialState, то есть начальное состояние, и возвращает массив при этом, первое - текущее состояние, второе - setState, эквивалентное предыдущему компоненту класса, при каждом вызове этой функции состояние будет обновляться и текущий компонент будет перерендерен снова, взгляните Как написать простой счетчик количества с хуками
function Cunter() {
const [count, setCount] = useState(0);
const [title, setTitle] = useState('hello-react');
console.log('render ===============');
return (
<div className="count-box">
<h1 className="title">点了{count}次</h1>
<button onClick={() => {
setCount(count + 1);
setTitle('hello-hooks');
}}>
Click Me!
</button>
<p>{title}</p>
</div>
)
}
После того, как вышеуказанный компонент нажимает кнопку, он открывает консоль и видит, что два изменения состояния отображаются только один раз, поэтому useState здесь также объединит изменения состояния в одном цикле и обновит их вместе. В то же время в функциональном компоненте useState может вызываться несколько раз, но это не значит, что он должен быть записан именно так, конечно, initialState может быть массивом или объектом, так что вы можете напрямую его модифицировать в функции набора, такой как вызов setState в компоненте класса. Однако, таким образом, я думаю, что семантика более ясна.
useEffect
С помощью этой функции можно уведомить React какое действие нужно выполнить после каждого рендеринга текущего компонента.Я думаю его роль можно понимать как и предыдущую.componentDidMountа такжеcomponentDidUpdateДве функции жизненного цикла аналогичны.
Эта функция поддерживает два параметра: первый параметр — это функция, которая будет выполняться после каждого рендера, в то же время эта функция может также возвращать функцию, которая будет выполняться после выгрузки компонента, аналогично классу component.componnentDidUnmountФункции жизненного цикла.
Например, допустим, мы хотим получить ширину окна в реальном времени, а затем отменить эту функцию, когда компонент будет размонтирован. посмотри на код
function Width() {
const [width,setWidth] = useState(window.innerWidth);
const setWidthFn = () => {
setWidth(window.innerWidth);
};
useEffect(() => {
window.addEventListener('resize',setWidthFn);
return () => {
window.removeEventListener('resize',setWidthFn)
}
});
return(
<div>
<h1>当前窗口宽度{width}px</h1>
</div>
)
}
Но у этого есть и минусы, то есть эта функция выполняется один раз при каждой отрисовке, а иногда мы не хотим выполнять ее всю, например, когда компонент детали отрисовывается в первый раз, он будет подгружен с id переданным props.Value, если написать так, каждый раз при изменении props будет срабатывать компонент, и запрос будет повторяться снова. Впрочем, react уже обработал это за нас. Второй параметр мы можем передать к функции useEffect, ****** вот так, функция, которая запрашивает детали, будет выполняться только при изменении идентификатора, поэтому код здесь можно написать так.
function SomeComponent({id}){
useEffect(() => {
doSomethingWith(id)
/*
当然，第二个参数可以传递进不只一个依赖项，这样就是告诉React多个依赖项有一个发生变化就会重新执行这个函数。
也可以传递进一个空数组，这样是告诉React这个函数只执行一次。
具体为什么要传递进去数组，官网文档上没有看到相关的解释。
*/
},[id])
}
useRef
Эта функция также принимает InitialState в качестве параметра и возвращает объект, где current — это InitialState, которое вы в настоящее время передали. Вы можете использовать возвращенный объект в качестве атрибута ref и передать его дочернему компоненту, чтобы получить объект DOM, и вы можете Также используйте. Он сохраняет предыдущие свойства и используется следующим образом:
function Counter() {
const [count, setCount] = useState(0);
const prevCountRef = useRef();
useEffect(() => {
prevCountRef.current = count;
});
const prevCount = prevCountRef.current;
return (
<div>
<h1>Now: {count}, before: {prevCount}</h1>
<button onClick={setCount(count + 1)}>Click Me!</button>
</div>
)
}
useContext
Использование очень простое, просто передайте результат, возвращаемый React.createContext, в useContext, и компонент будет повторно отображаться при изменении контекста.
useReducer
Эта функция точно такая же, как и редукция, поэтому я не буду подробно о ней рассказывать.
custom hooks
Для изменений и модификаций состояния в исходном компоненте класса нам сложно абстрагировать логику о состоянии и реализовать повторное использование, но на основе функции хуков вы вполне можете это сделать. В то же время официальный сайт React также сообщилuseYourImagination, так как повторное использование должно быть извлечено в сочетании с реальным проектом.
Уведомление
- Функция ловушек позволяет использовать функциональный компонент для завершения функций жизненного цикла многих компонентов класса, но пока не поддерживается.
getSnapshotBeforeUpdateа такжеcomponentDidCatch, но не может использоваться в компонентах функций класса, и не рекомендуется смешивать их в проекте для обеспечения согласованности команды. - Функцию хуков лучше всего писать на верхнем уровне в функциональном компоненте. Конечно, это не обязательно. Основная причина заключается в том, чтобы убедиться, что согласованная функция хуков пишется каждый раз, когда компонент рендерится. Не судите, использовать ли хуки по определенному условию.
напиши в конце
Наконец, цитата Дэна из React ConfПрезентация о крючках, простой перевод.
Когда я начал изучать реакцию, я думал о связи между логотипом React и реакцией.Этот проект не называется Atom (атом) и не является физическим движком.Одно из объяснений основано на реакции (реакции) и химической реакции основан на производительности атомов в нем, поэтому он называется реагировать. Тем не менее, я нашел более разумное объяснение, я думаю, что это так, тип и свойства атомов определяют производительность и форму физической реакции, реагировать дайте мне знать, что вы можете выделить пользовательский интерфейс в отдельную личность, это отдельные вызываемые компоненты, свойства и типы этих компонентов определяют внешний вид и эффекты пользовательского интерфейса. Но самое смешное, что значение самого слова атом неотделимо.Когда ученые впервые открыли атомы, они думали, что это самая маленькая материя, но вскоре они открыли электроны, которые являются самыми маленькими в атомах.Отчасти электроны обеспечивают более глубокое объяснение поведения атомов. Я думаю, что хуки похожи на электроны, он не новая функция, он просто позволяет мне использовать те функции, которые, как известно, реагируют, такие как состояние (состояние), контекст (контекст), функция жизненного цикла жизненного цикла, хуки реагируют Более прямой способ выразить лучшее объяснение того, как компоненты работают внутри, я думаю, что они были скрыты в течение четырех лет, и теперь вы посмотрите на логотип реакции, вы можете увидеть движение этих электронов. Таким образом, крючки, возможно, существовали всегда, точно так же, как электронные орбиты на логотипе.