В синтаксисе ES6 легко понять, что компонент, расширяющий компонент из React, является компонентом React. Например:

import { Component } from 'react';
class ExampleComponent extends Component {
     render(){
          return(
              //render component content here
          )
     }
}

Но если переписать это, используя подход без компонента:

const ExampleComponent = (props) => {
    return
        //render component content here
}

... что происходит за кулисами, так что этот компонент наследует поведение жизненного цикла от компонента?

3
Kevin Hooke 23 Мар 2017 в 20:14

2 ответа

Лучший ответ

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

Функция класса компонента render () === Компонент без сохранения состояния

3
Rob Brander 23 Мар 2017 в 17:18

Что происходит за кулисами, так что этот компонент наследует поведение жизненного цикла от компонента?

Компонент без состояния не имеет резервного копирования и поэтому нет методов жизненного цикла .

Это просто функция, которая возвращает элемент React (строки и null являются допустимыми элементами React).

React обрабатывает компоненты и компоненты без сохранения состояния по-разному. Если это функция, которая возвращает что-то в состоянии визуализации, то она обрабатывается напрямую. Если это класс с методом рендеринга, то создается экземпляр класса (если это еще не сделано) и используется метод render.

3
Tom Fenech 23 Мар 2017 в 17:43