根据 location.hash 传递的数据重新渲染 ReactJS 嵌套的子组件答案

【问题标题】：Re-render ReactJS nested child components based on data passed by location.hash根据 location.hash 传递的数据重新渲染 ReactJS 嵌套的子组件
【发布时间】：2015-02-17 13:50:43
【问题描述】：

这是基于 location.hash 重新渲染嵌套组件的好方法吗？我想知道重新渲染整个主要组件是否是一个好方法，只是为了更新一个非常嵌套的子组件。

http://jsfiddle.net/fL99kh4x/1/

var router = (function () {

    ...

}());


var Hello = React.createClass({
    render: function () {
        return <a href = "#d/test" > Hello {
            this.props.name
        } < /a>;
    }
});

var Main = React.createClass({
    render: function() {
        return <Hello name={this.props.name} / > ;
    }
});

router.addRoute('', function () {
    React.render( < Main name = "World" / > , document.body);
});

router.addRoute('d/:id', function (id) {
    React.render( < Main name = "Earth" / > , document.body);
});

router.start();

我不想只处理点击事件，这样即使页面被直接调用，视图也是正确的。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

是的；事实上，许多（大多数？）特定于 React 的路由器都是这样工作的。请记住，React 中的“重新渲染”并不意味着吹走整个 DOM，它只是意味着计算一个新的 virtual DOM 并确定在真实 DOM 中要更改的内容。

【讨论】：