componentDidUpdate 没有触发

Question

当我使用 react-router 更改路由时是否会触发 componentDidUpdate？我修改了示例代码，但似乎无法正常工作。

我让 home 组件记录了一些文本，但它似乎没有触发。任何帮助表示赞赏，谢谢！

代码：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom'

const BasicExample = () => (
    <Router>
        <div>
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/topics">Topics</Link></li>
            </ul>

            <hr/>

            <Route exact path="/" component={Home}/>
            <Route path="/about" component={About}/>
            <Route path="/topics" component={Topics}/>
        </div>
    </Router>
)

class Home extends React.Component {
    render() {
        return (<div>
            <h2>Home</h2>
        </div>);
    }

    componentDidUpdate() {
        console.log("Updated!");
    }
}


const About = () => (
    <div>
        <h2>About</h2>
    </div>
)

const Topics = ({ match }) => (
    <div>
        <h2>Topics</h2>
        <ul>
            <li>
                <Link to={`${match.url}/rendering`}>
                    Rendering with React
                </Link>
            </li>
            <li>
                <Link to={`${match.url}/components`}>
                    Components
                </Link>
            </li>
            <li>
                <Link to={`${match.url}/props-v-state`}>
                    Props v. State
                </Link>
            </li>
        </ul>

        <Route path={`${match.url}/:topicId`} component={Topic}/>
        <Route exact path={match.url} render={() => (
            <h3>Please select a topic.</h3>
        )}/>
    </div>
)

const Topic = ({ match }) => (
    <div>
        <h3>{match.params.topicId}</h3>
    </div>
)

ReactDOM.render(
  <BasicExample />,
  document.getElementById('root')
);

Answer 1

根据DOC：

更新可能是由 props 或 state 的更改引起的。这些方法 在重新渲染组件时调用：

componentWillReceiveProps()

shouldComponentUpdate()

componentWillUpdate()

渲染()

componentDidUpdate()

componentWillUpdate：

componentWillUpdate() 在新渲染之前立即调用 正在接收道具或状态。以此为契机 在更新发生之前进行准备。不调用此方法 用于初始渲染。

在 Home 组件中，您没有定义任何 state 并且您也没有使用任何 props，这就是为什么不会调用 function 的原因。

查看此示例 componentDidUpdate 将在您单击 Click Me 文本时被调用：

class Home extends React.Component {
    
    constructor(){
        super();
        this.state = {a: false}
    }

    componentDidUpdate() {
        console.log("Updated!");
    }
    
    render() {
        return (
            <div>
               <h2>Home</h2>
               <p onClick={()=>this.setState({a: !this.state.a})}>Click Me</p>
            </div>
        );
    }
}


ReactDOM.render(<Home/>, document.getElementById('app'))

<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>

<div id='app'/>

Answer 2

建议的小改动：不推荐将对象传递给 setState 方法。使用 prevState 属性并翻转它的值。

class Home extends React.Component {

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

        componentDidUpdate() {
            console.log("Updated!");
        }

        render() {
            return (
                <div>
                   <h2>Home</h2>
                   <p onClick={()=>this.setState((prevState) => ({a: !prevState.a}))}>Click Me</p>
                </div>
            );
        }
    }


    ReactDOM.render(<Home/>, document.getElementById('app'))