react-router - react router 用hashHistory做路由 link组件跳转的时候 render会执行两次 怎么避免这个问题？

问题描述

问 题

react 生命周期的几个方法没问题 就在render里有问题

render () {
    console.log(1) //页面刷新执行一次， 路由link to 到当前组件会执行两次
    return (
        <div>
            <div className="header">
                <IndexLink to="/" activeClassName="active">HOME</IndexLink>
                <Link to="/details" activeClassName="active">DETAILS</Link>
                <Link to="/test" activeClassName="active">TEXT</Link>
            </div>
            <div className="content">
                hello,details
            </div>
            <div className="footer"></div>
        </div>
    )
}

解决方案

render方法会执行不止一次，这要看他的组件数量和状态变化。

一个组件的装载只会执行一次componentDidMount，但是会执行多次render，因为他会执行多次componentDidUpdate，你可以在这个钩子函数里面console一下，有状态要更新或者组件装载他就会执行，render也会执行

这篇关于react-router - react router 用hashHistory做路由 link组件跳转的时候 render会执行两次 怎么避免这个问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！