React Hooks и методы жизненного цикла React

Я новичок в reactjs и реагирую на родной язык. когда начал изучать основы, я нашел различную информацию о хуках реакции и методах жизненного цикла реакции. Я знаю, что до React 16.3 было 7 методов жизненного цикла, но теперь их всего 6. Может ли кто-нибудь разработать методы этого жизненного цикла и реагировать на крючки с некоторыми примерами. это может помочь мне учиться быстрее. Спасибо


react-native reactjs react-redux react-hooks react-lifecycle
person Ajay Antonyraj    schedule 12.02.2021    source источник
comment
Добро пожаловать в Stack Overflow! Пройдите тур (вы получите значок!), осмотритесь и прочитайте справочный центр, в частности Как задать хороший вопрос? , Какие вопросы следует избегать? и < i>О каких темах я могу здесь спросить? Боюсь, этот вопрос намного слишком широк и открыт для формата вопросов и ответов SO. Лучше всего вам подойдет веб-сайт React, учебные пособия, книги и т. д.   -  person T.J. Crowder    schedule 12.02.2021
comment
Я думаю, что это не очень хороший способ задать вопрос, подробно излагая все крючки здесь, это будет так запутанно. Лучше сначала изучить, а потом спрашивать, нужно ли вам какое-то конкретное объяснение. Или вы можете попросить какое-либо конкретное объяснение крючка.   -  person moshfiqrony    schedule 12.02.2021
comment
Хуки должны заменить функции жизненного цикла, потому что хуки не работают в компонентах класса, а функции жизненного цикла не существуют в функциональных компонентах. Вот документация по хукам, и если вы используете компоненты класса и не поняли, почему вам не следует снова читать документацию по хукам, особенно эту часть   -  person HMR    schedule 12.02.2021

Ответы (1)


arrow_upward
1
arrow_downward

В классах React у вас были функции жизненного цикла и состояния для выполнения действий, но их не было в функциональных компонентах. Разработчики React создали хуки, с помощью которых вы можете упростить свой код и повторно использовать его. лучше, объединив определенные функции в пользовательский хук. Ранее это было невозможно с компонентами класса. Даже с примесями, которые используются во Vue, теперь у них есть составной API, который работает аналогично хукам.

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

В классе вам нужно поддерживать this.state.counter, который вы изменяете с помощью this.up и this.down, чтобы вы могли реализовать это в классе Counter, который расширяет React.Component или React.PureComponent, и иметь компонент, который использует счетчик, расширяет Counter, но тогда этот компонент может иметь только один счетчик. В хуках вы можете реализовать счетчик с помощью настраиваемого хука и иметь несколько счетчиков в одном компоненте.

const {
  useState,
  useEffect,
  useCallback,
  useRef,
  memo,
} = React;

//hooks, also custom hooks always start with "use"
const useCounter = (name, initialValue = 1) => {
  //local counter value and function to change it
  const [counter, setCounter] = useState(initialValue);
  //ref created on mount with previous counter value
  const countRef = useRef(initialValue);
  //up and down functions created with useCallback so they
  //  will be created on mount and never change
  const up = useCallback(
    () => setCounter((c) => c + 1),
    []
  );
  const down = useCallback(
    () => setCounter((c) => c - 1),
    []
  );
  //effect that will log when counter changes
  useEffect(() => {
    if (countRef.current !== counter) {
      console.log(`counter ${name} changed to`, counter);
      countRef.current = counter;
    }
  }, [counter, name]);
  //return up, down and counter
  return { up, down, counter };
};
//using memo makes UP2 a pure component so it'll not re
//  render since up is created with useCallback and is
//  not re created therefore the props passed to UP2 
//  don't change
const UP2 = memo(function UP2({ up, name }) {
  console.log(`UP2 for ${name} will only render once`);
  return (
    <button
      onClick={() => {
        //state updates are batched in synchronous
        //  event handlers so "chaged to" will log
        //  only once
        up();
        up();
      }}
    >
      +2
    </button>
  );
});

const App = () => {
  //first counter
  const {
    up: up1,
    down: down1,
    counter: counter1,
  } = useCounter('counter one');
  //second counter
  const {
    up: up2,
    down: down2,
    counter: counter2,
  } = useCounter('counter two', 2);
  return (
    <div>
      <div>
        <button onClick={up1}>UP</button>
        <button onClick={down1}>Down</button>
        <UP2 up={up1} name={'counter one'} />
        {counter1}
      </div>
      <div>
        <button onClick={up2}>UP</button>
        <button onClick={down2}>Down</button>
        <UP2 up={up2} name={'counter two'} />
        {counter2}
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

person HMR    schedule 12.02.2021