Конструктор vs componentWillMount; что компонентWillMount может сделать, что конструктор не может?

Насколько я мог видеть, единственное, что может сделать componentWillMount, а constructor не может вызвать setState.

componentWillMount() {
    setState({ isLoaded: false });
}

Так как мы еще не назвали render, a setState in componentWillMount подготовит объект состояния до того, как мы введем первый проход render(). Это, по сути, то же самое, что и constructor:

constructor(props) {
    super(props);
    this.state = { isLoaded: false };
}

Но я вижу другой вариант использования, когда componentWillMount полезен (на стороне сервера).

Давайте рассмотрим что-то асинхронное:

componentWillMount() {
    myAsyncMethod(params, (result) => {
        this.setState({ data: result });
    })
}

Здесь мы не можем использовать constructor, поскольку назначение this.state не вызывает render().

Как насчет setState в componentWillMount? Согласно React docs:

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

Итак, здесь я думаю, что React будет использовать новое значение состояния для первого рендеринга и избегает повторной рендеринга.

Вопрос 1: Означает ли это, внутри componentWillMount, если мы вызываем setState в обратном вызове асинхронного метода (может быть обратным вызовом обетования), React блокирует начальный рендеринг пока не будет выполнен обратный вызов?

Наличие этой настройки на стороне клиента (да, я вижу этот вариант использования в рендеринге на стороне сервера), если я предполагаю, что это верно, я ничего не увижу до тех пор, пока не завершится мой асинхронный метод.

Мне не хватает каких-либо концепций?

Вопрос 2: Являются ли какие-либо другие варианты использования, которые я могу достичь только с помощью componentWillMount, но не используя constructor и componentDidMount?

ОТВЕТЫ

Ответ 1

Это означает, что внутри componentWillMount, если мы вызываем setState в обратный вызов асинхронного метода (может быть обратным вызовом с обещанием), блокировать ответ начального рендеринга до выполнения обратного вызова?

Нет, см. здесь.

Следующий код не блокирует рендеринг (помните, что это был бы анти-шаблон в любом случае для вызова setState)

componentWillMount: function() {
     new Promise((resolve, reject) => {
        setTimeout(()=> {
            resolve();
        }, 2000)
     }).then(() => this.setState({ promiseResult: 'World' }));
  },

Вопрос 2: Являются ли какие-либо другие варианты использования, которые я могу достичь с помощью componentWillMount только, но не используя конструктор и componentDidMount?

Нет, для классов ES6 вы можете отказаться от компонентаWillMount. Это необходимо, только если вы используете React.createClass({... })

EDIT: По-видимому, я ошибаюсь. Спасибо @Swapnil за это. Вот обсуждение .

React выдает предупреждение, если есть побочный эффект в constructor, который изменяет состояние в другом компоненте, потому что он предполагает, что setState в самом constructor и потенциально во время render() вызывается. Поэтому никаких побочных эффектов в constructor не требуется.

Это не так, если вы делаете это в componentWillMount, никаких ошибок не возникает. С другой стороны, ребята из facebook препятствуют побочным эффектам в componentWillMount. Поэтому, если у вас нет побочных эффектов, вы можете использовать constructor вместо componentWillMount. Для побочных эффектов рекомендуется использовать componentDidMount вместо componentWillMount. В любом случае вам не нужно componentWillMount.