Hyperlink React-使用React路由器链接标记会导致父级重新渲染

我是新手。我被难住了。我有一个主类，它有一个标题区域和一个主体区域。标题区域有导航链接，可以下载不同类别的JSON。启动时，会在正文中插入一个随机贴子：

var React = require('react');
var Header = require('./header');
var PostRandom = require('./post-random');

module.exports = React.createClass({
    render: function(){
        console.log("MAIN.render");
        return <div>
            <Header />
            {this.content()}

        </div>
    },
    content: function(){
        console.log("MAIN.content");
        if(this.props.children){
            return this.props.children
        }else{
            return <PostRandom />
        }
    }
}); 

在主题的初始呈现之后，Main立即再次调用render！这导致主题被加载两次，对componentWillReceiveProps的两次调用，从而两次访问存储。最后我下载了两次JSON，得到了两个不同的随机帖子数组。我看到一个随机帖子的初始列表，然后它被第二个随机帖子列表所取代。啊

如果我重新加载页面，保持在同一主题中，Main不会再次调用——因此，是单击链接导致重新呈现。以下是重新加载的控制台输出：

MAIN.render
MAIN.content
HEADER.getInitialState
HEADER.RENDER
HEADER: renderTopics
TOPIC: getInitialState
TOPIC: componentWillMount
TOPIC: render
TOPIC:renderPosts
58 STORE: triggerChange
TOPIC:onChange
TOPIC: render
TOPIC:renderPosts

同样有趣的是：如果我将Link标记更改为只返回主页面-也就是说，根本不调用/呈现主题-如下所示：

<Link activeClassName="active" to={"/"}>

---

因此，它与主题中的内容或对存储的调用无关—单击链接标记时，会使其父组件重新呈现！我肯定我一定是做错了什么事——但是什么呢？感谢您提供的任何见解/帮助

渲染不应触发副作用。如果您发现自己试图控制何时调用

render

，那么您走错了路

路径匹配时进行渲染，唯一不会重新渲染的时间是编写一个

shouldComponentUpdate

，在不应重新渲染的情况下返回false，但不要使用它来解决当前的问题

---

与其在

componentWillReceiveProps

中获取数据，不如在

componentWillMount

中获取数据，渲染不应触发副作用。如果您发现自己试图控制何时调用

render

，那么您走错了路

路径匹配时进行渲染，唯一不会重新渲染的时间是编写一个

shouldComponentUpdate

，在不应重新渲染的情况下返回false，但不要使用它来解决当前的问题

---

与其在

componentWillReceiveProps

中获取数据，不如在

componentWillMount

1中获取数据。我并没有试图在调用render时进行“控制”——只是在那里调用它根本没有意义。2.我不得不使用componentWillReceiveProps，因为当用户单击主题链接时，组件会更新为新的JSON。好消息：我（无意中）（大部分）通过解决另一个问题解决了这个问题——消除“垃圾”URL。我向路由器添加了一个历史参数（以消除“垃圾”URL），并且不再获得双重渲染！（加上我的网址看起来不错…）1。我并没有试图在调用render时进行“控制”——只是在那里调用它根本没有意义。2.我不得不使用componentWillReceiveProps，因为当用户单击主题链接时，组件会更新为新的JSON。好消息：我（无意中）（大部分）通过解决另一个问题解决了这个问题——消除“垃圾”URL。我向路由器添加了一个历史参数（以消除“垃圾”URL），并且不再获得双重渲染！（加上我的URL看起来不错…）我遇到了同样的问题，单击内部链接时会反复调用父级的呈现方法我遇到了同样的问题，单击内部链接时会反复调用父级的呈现方法

MAIN.render
MAIN.content
HEADER.RENDER
HEADER: renderTopics
TOPIC: componentWillReceiveProps
TOPIC: render
TOPIC:renderPosts
MAIN.render
MAIN.content
HEADER.RENDER
HEADER: renderTopics
TOPIC: componentWillReceiveProps
TOPIC: render
TOPIC:renderPosts
STORE: triggerChange
TOPIC:onChange
TOPIC: render
TOPIC:renderPosts
STORE: triggerChange
TOPIC:onChange
TOPIC: render
TOPIC:renderPosts

MAIN.render
MAIN.content
HEADER.getInitialState
HEADER.RENDER
HEADER: renderTopics
TOPIC: getInitialState
TOPIC: componentWillMount
TOPIC: render
TOPIC:renderPosts
58 STORE: triggerChange
TOPIC:onChange
TOPIC: render
TOPIC:renderPosts

<Link activeClassName="active" to={"/"}>

MAIN.render
MAIN.content
HEADER.RENDER
HEADER: renderTopics