Question

我有以下代码可以正常工作，但我的生命周期方法 componentWillLoad（）似乎不会触发。

（请在第二个代码段的中间找到componentWillLoad）

我的代码：

1）index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Home, BookCourse} from './app/components/App'
import { CityChoice } from './app/components/CityChoice'
import { Form } from './app/components/Form'
import { Kurse } from './app/components/Kurse'
import { createStore } from 'redux';
import { BrowserRouter, Route, Switch } from 'react-router-dom'

function reducer(){
  return 'State';
}

const store = createStore(reducer);

ReactDOM.render(
  <BrowserRouter>
      <Switch>
          <Route path="/" exact component = { () => <Home/>} />
          <Route path="/cityChoice" component = {CityChoice} />
          <Route path="/kurse" exact component = {Kurse}/>
          <Route path='/lehrer-spezialisten' component={ () => window.location = 'http://lehrer-spezialisten.de'}/>
          <Route path='/bookCourse' exact component = {Form} />
      </Switch>
  </BrowserRouter>,
  document.getElementById('root')
)

2）CityChoice.js

import React from 'react';
import ReactDom from 'react-dom';
import styled from 'styled-components';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
import Request from 'superagent';
import _ from 'lodash';

export class CityChoice extends React.Component{
  constructor(props) {
    super(props);
    this.state={}
  }

  componentWillLoad(){
    console.log('Marc');
  }

  render(){
    const courses = _.map(this.state.courses, (course) => {
      return <li>{course.venue}</li>
    })
  return (
    <div>
      <h2>Wähle Deine Stadt</h2>
        <p><Link to={{pathname: "/kurse", stadt: 'Freiburg'}}>.      <Button>Freiburg</Button></Link></p>
        <p><Link to={{pathname: "/kurse", stadt: 'Karlsruhe'}}><Button>Karlsruhe</Button></Link></p>
        <ul>{courses}</ul>
      </div>
    );
  }
}

预期行为

“Marc”的控制台输出

实际行为

没有控制台输出“Marc”

Answer 1

没有名为componentWillLoad的生命周期方法。

而是componentWillMount / componentDidMount。

在安装发生之前调用
componentWillMount()。它是在render()之前调用，因此同步调用setState() 此方法不会触发额外渲染。一般来说，我们建议使用constructor()代替初始化状态。

由于React 16.3 componentWillMount 已弃用，您可以改为使用componentDidMount。

在组件出现后立即调用
componentDidMount() 安装。需要DOM节点的初始化应该放在这里。如果你需要从远程端点加载数据，这是一个好地方实例化网络请求。

Answer 2

除非听说过componentWillLoad()，否则这是React生命周期方法的新增内容。

再试一次，除了这次像这样使用componentDidMount()和componentDidUpdate()：

import React from 'react';
import ReactDom from 'react-dom';
import styled from 'styled-components';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
import Request from 'superagent';
import _ from 'lodash';

export class CityChoice extends React.Component{
  constructor(props) {
    super(props);
    this.state={}
  }

  componentDidMount() {
    console.log('My component was rendered to the screen');
  }

  componentDidUpdate() {
    console.log('My component was just updated...it re-rendered!!');
  }

  render(){
    const courses = _.map(this.state.courses, (course) => {
      return <li>{course.venue}</li>
    })
  return (
    <div>
      <h2>Wähle Deine Stadt</h2>
        <p><Link to={{pathname: "/kurse", stadt: 'Freiburg'}}>.      <Button>Freiburg</Button></Link></p>
        <p><Link to={{pathname: "/kurse", stadt: 'Karlsruhe'}}><Button>Karlsruhe</Button></Link></p>
        <ul>{courses}</ul>
      </div>
    );
  }
}

保存它并转到浏览器并打开控制台，您应该看到同时输出了两个控制台日志。第一个控制台日志将来自componentDidMount()生命周期方法，并且只要您的组件出现在屏幕上，就会被调用。根据您的应用程序是否正在运行诸如调用当前地理坐标的调用之类的过程，您是否可以看到控制台已记录的第二种生命周期方法，然后您将看到componentDidUpdate()的结果以及第一。否则，直到您与执行setState()的应用程序进行交互，例如选择城市或您的应用程序执行任何操作。

从技术上讲，在执行componentDidUpdate()之前，将调用render()方法。因此，只要您的组件更新，就会调用您的render()方法来呈现jsx，然后立即调用componentDidUpdate()。

React Lifecycle Method未触发

2 个答案: