作为一个轻量级前端组件框架，react流行起来也不无道理，它可以不同程度的适配到你的应用中。你既可以只是轻量的引入react，在遗留系统中使用它来构建可复用的组件，你也可以使用一整套生态，从0开始使用react来构建你的前端应用。刚开始使用react，被她的轻量，快速和灵活深深吸引；跟Angular比较起来，她没有那么多的约束和概念，用起来那么束手束脚。同时，她的基于虚拟Dom的单向数据绑定机制将数据和视图的更新更多交由开发者来完成，因此，如何精准简洁的控制数据和视图的更新，构建高效的应用，是使用react会一直伴随我们的问题。在采取合理的实践之前，我们必须详细的了解React的生命周期机制，它将帮助我们在合适的时间更新组件状态，并得到正确的视图。
组件创建过程
从上图我们可以看到，组件在创建的过程中，需要获取默认的属性，初始状态，然后准备加载组件，再开始渲染，然后再执行加载之后的后续操作。
在这个过程中，推荐在渲染UI组件之前，只加载默认的属性和状态。任何状态数据的变更，比如异步请求数据，应该放在组件渲染完成之后，ComponentDidMount方法中。
属性更新
在属性更新过程中，先执行componentWillReceiveProps来接受组件新的属性，然后调用shouldComponentUpdate判断组件的state是否发生变化。如果为false，则componentWillUpdate, render和componentDidUpdate都不会执行。
状态更新
当调用setState方法更新组件状态时，调用shouldComponentUpdate判断组件的state和props是否发生变化, 进而决定是否调用后续方法来更新组件的状态和试图。
卸载组件
在卸载组件的过程中，一般使用componentWillUnmount来清理相关资源，例如定时器等。
现在，大家是否对组件各种场景下的状态更新过程有了更清晰的了解，对操作react组件更有信心了呢？
网友评论