Могу ли я поместить ajax в конструктор компонента React?

Question

class AjaxInConstructor extends React.Component{ 
 
    constructor() { 
 
     super(); 
 
     this.state = {name: '', age: ''} 
 
     this.loadData().then(data => { 
 
      this.setState(data); 
 
     }); 
 
    } 
 
    loadData() { 
 
     return new Promise((resolve, reject) => { 
 
      setTimeout(() => { 
 
       resolve({ 
 
        name: '我去去去去nimabi', 
 
        age: 123 
 
       }); 
 
      }, 2000); 
 
     }); 
 
    } 
 
    render() { 
 
     const {name, age} = this.state; 
 
     return <div> 
 
      <p>Can I init component state async?</p> 
 
      <p>name: {name}</p> 
 
      <p>age: {age}</p> 
 
     </div> 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <AjaxInConstructor/>, 
 
    document.body 
 
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Выше мой демонстрационный код. Я знаю, что люди всегда ставят ajax в componentDidMount или componentWillMount жизненном цикле.

Но этот случай также работает.

In chrome console, React не допускать ошибок и деформирования. Итак, мой вопрос - использование, как это совершенно правильно? Есть ли какая-то ошибка?

Answer 1

Вы можете позвонить в AJAX везде, где захотите. Нет ничего «неправильного» в создании вызова AJAX в конструкторе, но есть улов. Вы хотите сделать вызов AJAX только после того, как компонент был смонтирован или как раз перед тем, как он будет установлен.

Поэтому, прежде чем компонент будет визуализирован, необходимо позвонить AJAX в componentDidMount() или componentWillMount(). Просто потому, что React позволяет делать «вещи», это не значит, что вы должны! :)

UPDATE

Я также понимаю, что первоначально мой ответ не был строгим. Я всегда следил за тем, что следил за программистом.

После поиска немного я нашел это быть один шаг ближе к полному ответа- Why ajax request should be done in componentDidMount in React components?

Сущность этих ответ говорит, что, когда вы звоните setState() в componentWillMount(), компонент не будет повторно вынести. Поэтому необходимо использовать componentDidMount(). После дальнейшего чтения я узнал, что он был исправлен в последующем выпуске командой React. Теперь вы можете позвонить setState() в componentWillMount(). Я думаю, что это причина, по которой все рекомендуют делать звонки AJAX в didMount.

Один из комментариев также выдвигает свои мысли очень articulately-

хорошо, вы не вызывая SetState от componentWillMount ни componentDidMount непосредственно, а от нового стека асинхронным. Я не знаю, как точно реагировать, чтобы поддерживать ссылку на это с живыми прослушивателями событий из различных методов. при использовании недокументированных возможностей не страшно достаточно для вас, и вы хотите немного волнения, что это может работы и, возможно, даже в будущих версиях, то не стесняйтесь, я не знаю будет ли он сломаться или не