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

Question

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

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();

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

Answer 1

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

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

Re-render ReactJS nested child components based on data passed by location.hash

javascript

reactjs