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：

对道具或州的更改可能会导致更新。这些方法   在重新渲染组件时调用：

componentWillReceiveProps（）

shouldComponentUpdate（）

componentWillUpdate（）

render（）

componentDidUpdate（）

<强> componentWillUpdate ：

在新的渲染之前立即调用
componentWillUpdate（）正在收到道具或国家。以此为契机在更新发生之前执行准备。不调用此方法用于初始渲染。

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

检查此示例当您单击Click Me text：

时，将调用componentDidUpdate

＆＃13;

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

＆＃13;

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

＆＃13;

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

componentDidUpdate未触发

2 个答案: