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