简单易懂的React魔法(11):使用setState改变组件状

和props不同，一个组件的state可以随时被改变，这些状态将保存到组件被销毁。话虽如此，你应该小心地改变组件的状态不然你会遇到问题。
为什么要小心？好吧，你要知道改变一个组件的state或者props会自动调用重新渲染页面，所以新的值会反映在界面中。意味着频繁的更改将使你的代码运行缓慢，这会大大降低用户体验。
React有特殊的更新state方法被称为setState()它将新值合并到现有值中然后触发重新渲染。所以修改我们的buttonClicked()方法使它在修改名字的同时保持国家不变：
src/pages/Detail.js

buttonClicked() {
    const newState = {
        name: chance.first()
    };

    this.setState(newState);
}

注意我已经去掉了对 this.forceUpdate()的调用 – 现在不需要了. 实际上，调用 forceUpdate()只在React没有察觉到一个深度state变化时调用,所以我们现在不需要它了。

新的代码完全实现了我们的想法: 它创建一个新的状态 newState它含有新的姓名, 然后通过调用 this.setState()用来改变组件的state. 因为state的改变自动出发重新渲染， 你会在每次点击按钮时看到一个新的名称，但国家不变。

在极端情况下你设置了太多的state或props变化，不停地调用render()会使页面反应缓慢，react有个解决办法：如果你创建了一个方法shouldUpdateComponent()然后返回false，你的组件就不会被重新渲染。

为了使用这个方法，你要么可以放一些业务逻辑在shouldUpdateComponent()按照你的需要返回true或者false。或者总是返回false然后调用this.forceUpdate()来重新渲染页面。这个方法会强制调用render即使shouldUpdateComponent()返回false。