关于javascript:React生命周期函数

37次阅读

共计 685 个字符,预计需要花费 2 分钟才能阅读完成。

一、三个阶段

初始化阶段

  • constructor: 构造函数,初始化组件实例
  • getDefaultProps: 获取实例的默认属性(React.createClass())
  • getInitialState: 获取每个实例的初始化状态(React.createClass())
  • componentWillMount: 组件行将被挂载、渲染到页面上
  • render: 组件在这里生成虚构的 DOM 节点
  • coponentDidMount: 组件真正在被挂载之后

运行中状态

  • componentWillReceiveProps: 组件将要接管到属性的时候调用
  • shouldComponentUpdate: 组件接管到新属性或者新状态的时候(能够返回 false, 接收数据后不更新,阻止 render 调用,前面的函数不会继续执行了)
  • componentWillUpdate: 组件行将更新,不能批改属性和状态
  • render: 组件从新描述
  • getSnapshotBeforeUpdate: 使得组件能在产生更改之前从 DOM 中捕捉一些信息(例如,滚动地位)
  • componentDidUpdate: 组件曾经更新, 在这个生命周期外面不能应用 setState()

销毁阶段

  • componentWillUnmount: 组件行将销毁

二、具体钩子详解

1.shouldComponentUpdate 是做什么的?

shouldComponentUpdate 这个办法用来 判断是否须要调用 render 办法从新描述 DOM。因为 DOM 的描述十分耗费性能,如果咱们能在 shouldComponentUpdate 办法中可能写出更优化的 dom diff 算法,能够极大的进步性能。

正文完
 0