React由于他的机能而有名。由于他有一个假造DOM层而且只要在须要时才更新实在DOM。纵然是同样地信息这也比一向直接更新DOM要快许多。然则，React的智能仅此而已（目前为止），我们的使命是晓得React的预期行动以及限定，如许我们才不会不测丧失机能。

我们须要关注的一方面是React怎样决议什么时刻从新衬着组件。不是从新衬着DOM节点，只是挪用render要领来转变假造DOM。我们能够经由过程通知React什么时刻须要衬着什么时刻不须要衬着来协助React。让我们顺次来看看这些。

1. 组件的状况发作转变

只要在组件的state变化时才会动身组件的从新衬着。状况的转变能够由于props的转变，或许直接经由过程setState要领转变。组件取得新的状况然后React决议是不是应当从新衬着组件。不幸的是，React难以置信简朴地将默许行动设想为每次都从新衬着。

组件转变？从新衬着。父组件转变？从新衬着。一部分没有致使视图转变的props转变?从新衬着。

class Todo extends React.Component {

    componentDidMount() {
        setInterval(() => {
            this.setState(() => {
                console.log('setting state');
                return { unseen: "does not display" }
            });
        }, 1000);
    }

    render() {
        console.log('render called');
        return (<div>...</div>);
    }
}

在这个（异常锐意的）例子中，Todo将会每秒从新衬着顺次，纵然render要领基础没有运用unseen。事实上，unseen值以至都不转变。你能够在CodePen里检察这个例子的现实版本。

好吧，然则每次都从新衬着没有什么协助。

我的意义是，我异常感谢React的仔细郑重。假如状况转变然则组件没有准确衬着的话更糟。衡量之下，每次都从新衬着相对是一个平安的挑选。

然则从新衬着的时刻本钱看起来异常高贵（例子里异常夸大地表现了出来）。

是的，在不必要的时刻从新衬着会糟蹋轮回而且不是一个好的想好。然则，React不能晓得什么时刻能够平安的跳过从新衬着，所以React不管是不是主要每次都从新衬着。

我们怎样通知React跳过从新衬着？

那就是第二点要说的内容。

2. shouldComponentUpdate要领

shouldComponentUpdate要领默许返回true，这就是致使每次更新都从新衬着的缘由。然则你能够在须要优化机能时重写这个要领来让React更智能。比起让React每次都从新衬着，你能够通知React你什么时刻不像触发从新衬着。

当React将要衬着组件时他会实行shouldComponentUpdate要领来看它是不是返回true（组件应当更新，也就是从新衬着）。所以你须要重写shouldComponentUpdate要领让它依据状况返回true或许false来通知React什么时刻从新衬着什么时刻跳过从新衬着。

当你运用shouldComponentUpdate要领你须要斟酌哪些数据对与从新衬着主要。让我们回到这个例子。

正如你所看到的，我们只想在title和done属性转变的时刻从新衬着Todo。我们不关心unseen是不是转变，所以我没有把它包含在shouldComponentUpdate要领中。

当React衬着Todo组件（经由过程setState触发）他会起首搜检状况是不是转变（经由过程props和state）。假定状况转变了（由于我们显式地挪用了setState所以这会发作）React会搜检Todo的shouldComponentUpdate要领。React会依据shouldComponentUpdate要领返回值为true或许false来决议从那里衬着。

更新后的代码仍然会每秒挪用一次setState然则render只要在第一次加载时（或许title或done属性转变后）才会挪用。你能够在这里看到。

看起来有许多事情去做。

是的，这个例子异常冗杂由于有两个属性（title和done）须要关注而且只要一个能够疏忽（unseen）。依据你的数据能够仅搜检一个或两个属性而且疏忽其他会更有意义。

主要提醒

当子组件的的state变化时, 返回false并不能阻挠它们重衬着。

– Facebook的React文档

这作用于子组件的状况而不是他们的props。所以假如一个子组件内部管理了一些他本身的状况（运用他本身的setState），这仍然会更新。然则假如父组件的shouldComponentUpdate要领返回了false就不会通报更新后的props给他的子组件，所以子组件不会重衬着，纵然他们的props变化了。

分外内容：简朴机能测试

编写而且在shouldComponentUpdate要领中运转盘算的时刻本钱能够会很高贵，所以你须要确保值得做。在写shouldComponentUpdate要领前你能够测试React一个周期默许会斲丧若干时刻。有了这个信息做参考，在做机能优化时你能够做一个不自觉的决议。

运用React的机能东西去发明糟蹋的周期：

Perf.start()
// Do the render
Perf.stop()
Perf.printWasted()

哪个组件糟蹋了许多衬着周期？你怎样经由过程shouldComponentUpdate要领让他们更智能？试着运用机能测试东西来比较他们的机能。