react 生命周期钩子函数

跳槽了,听说这是一家使用react的公司。这几天上班工作交接之余看了下react,网上找了几篇博客几乎都是长篇大论的,我很不喜欢,感觉就是你抄抄我的,我抄抄你的,没有自己的思想想法在里面。

盗图一份(react生命周期所有钩子函数):

react 核心原理就是通过优化过的diff算法比较两棵树(虚拟dom)的变化,最后改变视图

首先得有两颗树:两次render,当然一棵树也ok(没有数据变化)

其次两次渲染的情况不同,第一次挂载第一棵树前后(componentWillMount和componentDidMount);第二次是数据变化带来的组件变化更新前后(componentWillUpdate和componentDidUpdate)

然后考虑数据变化,数据变化分为两种,第一种是父组件props变化了(componentWillReceiveProps),第二种是自身state数据变化了。数据变化是否需要执行组件更新提供钩子函数(shouldComponentUpdate)

最后创建组件的时候需要初始化state,该过程没有钩子函数,如果使用类的方式创建组件,在constructor中创建this.state的时候就初始化了;另一个钩子函数就是组件销毁前(componentWillUnmount)

原文地址:https://www.cnblogs.com/xingguozhiming/p/10871972.html