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

时间:2015-02-17 13:50:43

标签: javascript reactjs

这是基于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();

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

1 个答案:

答案 0 :(得分:1)

是;事实上,许多(大多数?)特定于React的路由器都是这样工作的。请记住,React中的“重新渲染”并不意味着要吹掉整个DOM,它只是意味着计算一个新的虚拟 DOM并确定在真实DOM中要改变什么。