javascript 如果子组件的 props 没有改变，React 还会重新渲染它吗？

If the props for a child component are unchanged, does React still re-render it?

提问by AlexZ

Suppose I have the following pairing of parent and child components in React:

假设我在 React 中有以下父子组件配对：

var ChildComponent = React.createClass({
    getDefaultProps: function(){
        return {
            a: 'a',
            b: 'b',
            c: 'c'
        }
    },

    render: function() {
        return (
            /* jshint ignore:start */
            <div className={'child' + (this.props.b ? ' modifierClass' : '')} something={this.props.a}>
                {this.props.c}
            </div>
            /* jshint ignore:end */
        );
    }
});


var ParentComponent = React.createClass({
    componentDidMount: function(){
        //After 10 seconds, change a property that DOES NOT affect the child component, and force an update
        setTimeout(function(){
            this.setState({foo: 'quux'});
            this.forceUpdate();
        }.bind(this), 10000);
    }

    getInitialState: function(){
        return {
            foo: 'bar',
            a: 1,
            b: 2,
            c: 3
        }
    },

    render: function() {
        return (
            /* jshint ignore:start */
            <div className="parent">
                <ChildComponent a={this.props.a} b={this.props.b} c={this.props.c}/>
            </div>
            /* jshint ignore:end */
        );
    }
});


React.render(
    /* jshint ignore:start */
    <ParentComponent />, 
    /* jshint ignore:end */
    document.getElementsByTagName('body')[0]
);

When I do the forceUpdate, since none of the props that were passed to the ChildComponentchanged, will React try to re-render it? What if I have 1000 such children, etc?

当我执行 时forceUpdate，由于没有传递给已ChildComponent更改的道具，React 会尝试重新渲染它吗？如果我有 1000 个这样的孩子，等等怎么办？

What I'm worried about is a situation where I have a very deep ChildComponentcontaining a whole massive tree of descendant components, but I only want to enact some relatively cosmetic changes on the ParentComponent. Is there any way to get React to update only the parent, without trying to re-render the children as well?

我担心的是一种情况，我有一个非常深的ChildComponent包含子孙组件的庞大树，但我只想对ParentComponent. 有没有办法让 React 只更新父级，而不尝试重新渲染子级？

回答by nilgun

When React re-renders ParentComponentit will automatically re-render ChildComponent. The only way to get around is to implement shouldComponentUpdatein the ChildComponent. You should compare this.props.a, this.props.band this.props.cand ChildComponentsown state to decide to re-render or not. If you are using immutable data than you can just compare previous and next state and props using strict equality ===.

当 React 重新渲染时，ParentComponent它会自动重新渲染ChildComponent。绕过的唯一方法是shouldComponentUpdate在ChildComponent. 你应该比较this.props.a，this.props.b并this.props.c和ChildComponents自己的状态来决定重新渲染与否。如果您使用的是不可变数据，那么您可以使用严格相等比较前一个和下一个状态和道具===。

There are a few thing to note with your code

您的代码有几点需要注意

1. You dont need to forceUpdatewhen you setState. React automatically does it for you.

2. You probably meant:

   <ChildComponent a={this.props.a} b={this.props.b} c={this.props.c}/>

1. 你不需要forceUpdate当你setState。React 会自动为你做这件事。

2. 你可能的意思是：

   <ChildComponent a={this.props.a} b={this.props.b} c={this.props.c}/>