Моделируйте жизненный цикл с помощью React Hooks

React.js

предисловие

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

constructor

компонент класса

class Example extends Component {
    constructor() {
        super();
        this.state = {
            count: 0
        }
    }
    render() {
      return null;
  }
}

Функциональные компоненты не нуждаются в конструкторе и могут инициализировать состояние, вызывая useState.

function Example() {
  const [count, setCount] = useState(0);
  return null;
}

componentDidMount

доступ к компоненту класса

class Example extends React.Component {
  componentDidMount() {
    console.log('I am mounted!');
  }
  render() {
    return null;
  }
}

Макет компонентаDidMount с хуками

function Example() {
  useEffect(() => console.log('mounted'), []);
  return null;
}

useEffect имеет два параметра, первый параметр — это функция обратного вызова, которая будет вызываться после завершения макета браузера и рендеринга, поэтому он не будет блокировать процесс рендеринга браузера.
Второй параметр - это массив

  • Когда массив существует и имеет значения, обратный вызов запускается после каждого рендеринга, если какое-либо значение в массиве изменяется.
  • Когда его нет, обратный вызов запускается после каждого рендеринга.
  • Когда это пустой список, обратный вызов будет запущен только один раз, как и в случае с componentDidMount.

shouldComponentUpdate

доступ к компонентам класса shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState){
  console.log('shouldComponentUpdate')
  // return true 更新组件
  // return false 则不更新组件
}

хуки имитируют shouldComponentUpdate

const MyComponent = React.memo(
    _MyComponent, 
    (prevProps, nextProps) => nextProps.count !== prevProps.count
)

React.memo оборачивает компонент для поверхностного сравнения его реквизитов, но это не хук, потому что он написан иначе, чем хуки.По сути, React.memo эквивалентен PureComponent, но сравнивает только реквизиты.

componentDidUpdate

доступ к компоненту класса

componentDidMount() {
  console.log('mounted or updated');
}

componentDidUpdate() {
  console.log('mounted or updated');
}

Макет компонентаDidUpdate с хуками

useEffect(() => console.log('mounted or updated'));

Стоит отметить, что функция обратного вызова здесь будет вызываться после каждого рендеринга, поэтому вы можете получить доступ не только к componentDidUpdate, но и к componentDidMount, если вы хотите только смоделировать componentDidUpdate, мы можем сделать это так.

const mounted = useRef();
useEffect(() => {
  if (!mounted.current) {
    mounted.current = true;
  } else {
   console.log('I am didUpdate')
  }
});

useRef создает «переменную экземпляра» в компоненте. Он служит флагом, указывающим, находится ли компонент в фазе монтирования или обновления. Когда обновление компонента будет завершено, содержимое else будет выполнено для отдельной имитации componentDidUpdate.

componentWillUnmount

Компонент доступа к классу componentWillUnmount

componentWillUnmount() {
  console.log('will unmount');
}

хуки имитируют компонентWillUnmount

useEffect(() => {
  return () => {
    console.log('will unmount');
  }
}, []);

При возврате функции в функции обратного вызова useEffect эта функция будет вызываться до того, как компонент будет размонтирован. Здесь мы можем очистить таймеры или прослушиватели событий.

Суммировать

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

  • Концепция чистой функции, одни и те же реквизиты получат одинаковый результат рендеринга.
  • Вы можете использовать композицию функций, вложенность, чтобы получить более мощные компоненты.
  • Компоненты не создаются, а общая производительность рендеринга повышается.

Однако жизненный цикл, моделируемый хуками, не совпадает с жизненным циклом в классе, и когда мы его используем, нам все равно нужно думать о наиболее подходящем для бизнес-сценария пути.

Ссылка на ссылку

Наконец

Оригинал здесь:gitHubЕсли есть какие-то упущения, пожалуйста, поправьте меня! ! Если вы найдете это полезным! Пожалуйста, не забудьте поставить лайк или подписаться! Ваше внимание будет для меня движущей силой двигаться вперед! ! Утка! ! !

Категории