Каталог статей
1. Вопросы, на которые следует обратить внимание?
(1) Не вызывайте Hook в циклах, условиях или вложенных функциях, вы всегда должны использовать Hook на верхнем уровне функций React.
Это связано с тем, что React должен использовать последовательность вызовов для правильного обновления соответствующего состояния и вызова соответствующей функции ловушки. Как только хук вызывается в цикле или операторе условного перехода, легко вызвать несогласованность в вызывающей последовательности, что приведет к непредсказуемым последствиям.
(2) При использовании useState используйте push, pop, splice и т. д., чтобы напрямую изменить яму объекта массива.
Новое значение нельзя получить прямым изменением массива с помощью push, и следует использовать метод деструктора, но в классе такой проблемы не будет.
(3) Когда useState устанавливает состояние, оно вступает в силу только в первый раз, и позже состояние необходимо обновить, а useEffect необходимо передать
TableDeail является общедоступным компонентом.В родительском компоненте, который его вызывает, мы изменяем значение столбцов через set, думая, что столбцы, переданные в TableDeail, являются последним значением, поэтому tabColumn также является последним значением каждый раз, но фактически tabColumn исходное значение не будет обновляться по мере обновления столбцов:
(4) Эффективно используйте useCallback
Когда родительский компонент передает обработчик события дочернему компоненту, если у нас нет изменений параметров, можно выбрать useMemo. Но каждый раз, когда родительский компонент отображает дочерний компонент, он будет отображаться один раз, даже если изменений не будет.
(5) Не злоупотребляйте useContext
Можно использовать инструменты управления состоянием на основе пакета useContext.
2. Связь между крючком и жизненным циклом?
Суть функционального компонента — это функция, без понятия состояния, поэтому нет жизненного цикла, это просто функция рендеринга.
Но после введения хуков все становится иначе.Они позволяют компонентам иметь состояние без использования класса, поэтому существует концепция жизненного цикла.Так называемый жизненный цикл на самом деле представляет собой useState, useEffect() и useLayoutEffect().
То есть: компоненты-хуки (функциональные компоненты, использующие хуки) имеют жизненный цикл, в то время как функциональные компоненты (функциональные компоненты, которые не используют хуки) не имеют жизненного цикла.
Ниже приведены соответствующие отношения между конкретным классом и жизненным циклом хуков:
конструктор: функциональному компоненту не нужен конструктор, а состояние можно инициализировать, вызвав useState . если
计算的代价比较昂贵，也可以传一个函数给 useState。
const [num, UpdateNum] = useState(0)
getDerivedStateFromProps: В общем, нам не нужно его использовать, мы можем обновить состояние во время процесса рендеринга, чтобы достичь цели getDerivedStateFromProps.
function ScrollView({
row}) {
let [isScrollingDown, setIsScrollingDown] = useState(false);
let [prevRow, setPrevRow] = useState(null);
if (row !== prevRow) {
// Row 自上次渲染以来发生过改变。更新 isScrollingDown。
setIsScrollingDown(prevRow !== null && row > prevRow);
setPrevRow(row);
}
return `Scrolling down: ${
isScrollingDown}`;
}
React немедленно завершает первый рендеринг и повторно запускает компонент с обновленным состоянием, чтобы не тратить слишком много производительности.
shouldComponentUpdate: вы можете обернуть компонент с помощью React.memo , чтобы уменьшить его свойства.
比较
const Button = React.memo((props) => {
// 具体的组件});
Примечание: **React.memo эквивалентен **`` PureComponent , который только поверхностно сравнивает свойства. Здесь вы также можете использовать useMemo для оптимизации каждого узла.
render: это само тело функционального компонента.
componentDidMount, componentDidUpdate: useLayoutEffect — это та же фаза вызова, что и у них обоих. Тем не менее, мы рекомендуем сначала использовать useEffect, а useLayoutEffect — только в случае сбоя. useEffect может выражать комбинации всего этого.
// componentDidMount
useEffect(()=>{
// 需要在 componentDidMount 执行的内容
}, [])
useEffect(() => {
// 在 componentDidMount，以及 count 更改时 componentDidUpdate 执行的内容
document.title = `You clicked ${
count} times`;
return () => {
// 需要在 count 更改时 componentDidUpdate（先于 document.title = ... 执行，遵守先清理后更新）
// 以及 componentWillUnmount 执行的内容
} // 当函数中 Cleanup 函数会按照在代码中定义的顺序先后执行，与函数本身的特性无关
}, [count]); // 仅在 count 更改时更新
Помните, что React ждет, пока браузер завершит рендеринг, прежде чем отложить вызов, что делает дополнительную работу удобной.
componentWillUnmount：相当于 useEffect 里面返回的 cleanup 函数
// componentDidMount/componentWillUnmount
useEffect(()=>{
// 需要在 componentDidMount 执行的内容
return function cleanup() {
// 需要在 componentWillUnmount 执行的内容
}
}, [])
componentDidCatch и getDerivedStateFromError: для этих методов пока нет эквивалентов Hook, но они будут добавлены в ближайшее время.
| компонент класса | Крючки |
|---|---|
| constructor | использование состояния |
| жетдериведстатефромпропс | функция обновления в useState |
| долженкомпонентобновить | использовать памятку |
| оказывать | сама функция |
| компонентдидмаунт | использованиеЭффект |
| компонентдидобдате | использованиеЭффект |
| компонентWillUnmount | Функция, возвращаемая в useEffect |
| компонентДидКатч | никто |
| получитьдериведстатефромеррор | никто |