图解 react、 angular、 vue、Flutter 生命周期

react

重点：

• componentDidMount 组件挂载后调用
• shouldComponentUpdate 更新组件。返回true渲染，返回false阻止渲染
• render： shouldComponentUpdate 之后调用
• componentWillUnmount 清除，解除挂载

angular

重点：

• ngOnChanges() 变化检测到，调用。这里执行的操作会很影响性能
• ngOnInit() 初始化指令/组件
• ngDoCheck() 检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应。 在这里可以捕获变更，检测和处理Angular没有捕捉到的变化。（Angular不愿意检测的变化指：渲染不相关的数据触发，例如只是移动光标）
• ngAfterContentInit() 内容投影进组件视图或指令所在的视图之后调用
• ngAfterContentChecked() 内容更新后调用
• ngAfterViewInit() 初始化视图
• ngAfterViewChecked() 视图变更后调用
• ngOnDestroy() 销毁。 如果有订阅和事件监听等， 在这里取消掉，防止内存泄漏

vue

重点：

• beforeCreate 初始化操作
• created 创建 完成数据绑定，属性，函数挂载
• beforeMount 页面解析完成，渲染之前
• mounted 渲染DOM
• beforeUpdate vue实例中数据更新后，页面中的数据更新前
• updated 数据更新后渲染完成后
• beforeDestroy 销毁前
• destroyed 销毁后

即字面意思

Flutter Widget

重点：

• createState ，该函数为 StatefulWidget 中创建 State 的方法，当 StatefulWidget 被调用时会立即执行 createState 。

• initState ，该函数为 State 初始化调用，因此可以在此期间执行 State 各变量的初始赋值，同时也可以在此期间与服务端交互，获取服务端数据后调用 setState 来设置 State。

• didChangeDependencies ，当State对象的依赖发生变化时会被调用；例如：在之前build() 中包含了一个InheritedWidget，然后在之后的build() 中InheritedWidget发生了变化，那么此时InheritedWidget的子widget的didChangeDependencies()回调都会被调用。典型的场景是当系统语言Locale或应用主题改变时，Flutter framework会通知widget调用此回调。

• build ，主要是返回需要渲染的 Widget ，由于 build 会被调用多次，因此在该函数中只能做返回 Widget 相关逻辑，避免因为执行多次导致状态异常。

• reassemble， 在 debug 模式下，每次热重载都会调用该函数，因此在 debug 阶段可以在此期间增加一些 debug 代码，来检查代码问题。

• didUpdateWidget ，在widget重新构建时，Flutter framework会调用Widget.canUpdate来检测Widget树中同一位置的新旧节点，然后决定是否需要更新，如果Widget.canUpdate返回true则会调用此回调。正如之前所述，Widget.canUpdate会在新旧widget的key和runtimeType同时相等时会返回true，也就是说在在新旧widget的key和runtimeType同时相等时didUpdateWidget()就会被调用。父组件发生 build 的情况下，子组件该方法才会被调用，其次该方法调用之后一定会再调用本组件中的 build 方法。

• deactivate ，在组件被移除节点后会被调用，如果该组件被移除节点，然后未被插入到其他节点时，则会继续调用 dispose 永久移除。

• dispose ，永久移除组件，并释放组件资源。

四个阶段：

• 初始化阶段：createState 和 initState
• 组件创建阶段：didChangeDependencies 和 build
• 触发组件 build：didChangeDependencies、setState 或者didUpdateWidget 都会引发的组件重新 build
• 组件销毁阶段：deactivate 和 dispose

总结： 无法评论优缺点， 理解即可