如果 child 组件的 props 没有改变，React 是否仍然 re-render 它？

Question

假设我在 React 中有以下一对 parent 和 child 组件：

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

当我执行 forceUpdate 时，由于传递给 ChildComponent 的道具 none 发生了变化，React 会尝试 re-render 吗？如果我有1000个这样的children等等怎么办？

我担心的是这样一种情况，我有一个非常深的 ChildComponent 包含一整棵巨大的后代组件树，但我只想对 ParentComponent.有什么方法可以让 React 仅更新 parent，而不尝试 re-render children 吗？

Answer 1

当 React 重新渲染 ParentComponent 时，它会自动重新渲染 ChildComponent。唯一的解决方法是在 ChildComponent 中实现 shouldComponentUpdate。您应该比较 this.props.a、this.props.b 和 this.props.c 以及 ChildComponents 自己的状态来决定是否重新渲染。如果您使用的是不可变数据，那么您可以使用严格相等 ===.

比较前后状态和道具

您的代码有几点需要注意

当你 setState 时，你不需要 forceUpdate。 React 会自动为您完成。
你的意思可能是：

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

如果 child 组件的 props 没有改变，React 是否仍然 re-render 它？

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

javascript

reactjs

react-jsx