步入React正殿 - 生命周期

目录

资料

三个阶段的生命周期函数

创建阶段

初始化阶段constructor

挂载阶段componentWillMount

挂载阶段render

挂载阶段componentDidMount

更新阶段【props或state改变】

更新阶段componentWillReceiveProps

更新阶段shouldComponentUpdate【可不使用，PureComponent自动实现】

更新阶段componentDidUpdate

卸载阶段

卸载阶段componentWillUnmount

图解生命周期

生命周期调用顺序（旧版）

 生命周期调用图例（新版）

练习

使用 TODOMVC 素材实现一个应用，

---

资料

资料名称	链接
React新生命周期	详解React生命周期(包括react16最新版) - 简书 React v16.3之后的组件生命周期函数 - 知乎

普遍生命周期

三个阶段的生命周期函数

创建阶段【初始化】

初始化：

• Constructor
  • props
  • state

挂载：

• componentWillMount【组件加载前】
• render【渲染中】
• componentDidMount【组件加载后】

更新阶段【运行中】

• componentWillRecieveProps【组件将接收props数据】
• shouldComponentUpdate【组件更新前，判断是否更新】
• render【更新渲染】
• componentDidUpdate【更新后】

卸载阶段【销毁】

• componentWillUnmount【组件销毁前】

创建阶段

初始化阶段constructor

• 初始化内部状态，显性设置和隐性设置【Constructor】
• 需要使用super()调用基类的构造方法
• 可以直接修改state

挂载阶段componentWillMount

• UI渲染完成前调用
• 只执行一次
• 这里调用setState不会触发render

挂载阶段render

• 一个组件必须有的方法【class类组件】
• 返回一个顶级的react元素
• 渲染的是Dom Tree的一个React对象【不是element dom】
• 不能在render里执行this.setState

挂载阶段componentDidMount

• UI渲染完成后调用【包括所有子组件渲染完毕后执行】
• 只执行一次
• 获取一些外部数据资源

console.log

1. App - constructor
2. App.js:113 App - rendering
3. navbar.jsx:4 Nav - rendering
4. listPage.jsx:21 ListPage - rendering
5. 3listItem.jsx:64 Item - rendering
6. App.js:40 App - mounted

更新阶段【props或state改变】

更新阶段componentWillReceiveProps

• 组件接收到新props的时候触发
• 在此对比新props和原来的props
• 不推荐使用【之后在进阶课程中有新的生命周期取代它】

更新阶段shouldComponentUpdate【可不使用，PureComponent自动实现】

• 是否要继续执行render方法
• 可以由PureComponent自动实现

更新阶段componentDidUpdate

• 每次UI更新时调用【可以在这里与原来数据做对比，进行一些业务逻辑处理】
• 更新一些外部数据资源

卸载阶段

卸载阶段componentWillUnmount

• 组件移除时候调用
• 可以用来做资源的释放

图解生命周期

生命周期调用顺序（旧版）

 生命周期调用图例（新版）

练习

使用 TODOMVC 素材实现一个应用，

http://todomvc.com/examples/react/#/  

可以使用上面的素材，可以使用MVC设计，也可以不使用，自己发挥实现一个Todo应用