图解React组件生命周期

React版本更新得太快,向下兼容做得不太好,所以放慢了学习。直到最近面试才知道很多公司都开始尝试使用React了,尤其是使用React Native开发移动混合App。

不管是哪个版本的React,它的设计思想是没有变的,核心之一就是组件生命周期。React中状态发生转换时会触发不同的钩子函数,从而让开发者有机会做出响应。每个组件都会经历初始化、运行中和销毁三个阶段,每个阶段都有开发者可以自定义的函数,执行不同的行为。

React组件生命周期

上图解析了React组件生命周期。getDefaultProps()和getInitialState()只对createReactClass或React.createClass声明的React组件有效,ES6类声明的React组件请用constructor()。React 16还引入了componentDidCatch()方法。这里只简述一下几个更常用的方法。

一、render()

render()方法是必需的。当被调用时,它会检查 this.props 和 this.state 并返回其中一个类型:

  • React元素 通常是由 JSX 创建。该元素可能是一个原生DOM组件的表示,例如 <div />,或者是一个用户定义的合成组件()。
  • 字符串和数字 这些将被渲染为 DOM 中的 text 节点。
  • Portals 由 ReactDOM.createPortal 创建。
  • null 不渲染任何东西。

render()函数应该是纯函数,这意味着它不会修改组件状态,每次调用它时返回相同的结果,它不会直接与浏览器交互。 如果您需要与浏览器交互,请改用componentDidMount()或其他生命周期方法执行你的工作。保持render()为纯函数使得组件更容易理解。

二、componentDidMount()

componentDidMount()方法在组件装载(mounting) 后被立即调用。初始化所需要的DOM节点的应该放在这里。 如果你需要从远程加载数据,这是一个实例化网络请求的好地方。

这种方法是设置任何订阅(subscriptions) 的好地方。如果你这样做,不要忘了在componentWillUnmount()中取消订阅(unsubscribe) 。

在这个方法中调用setState()会触发一个额外的渲染, 但会在浏览器更新屏幕之前发生。在这种情况下,即使 render() 会被调用两次,也可以保证用户不会看到中间状态。请谨慎使用此模式,因为这通常会导致性能问题。 但是,当你需要测量一个DOM节点,并在渲染一些依赖于它的大小或位置的东西之前,这种情况下,这种模式可能会非常有用,比如模态框和工具提示ooltip之类的组件。

三、componentWillReceiveProps()

componentWillReceiveProps(nextProps) 在已装载组件接收新props之前被调用。 如果您需要更新 state 以响应 props 的更改(例如重置它),则可以在此方法中比较this.props和nextProps并使用this.setState()执行状态转换。

注意,即使prop没有改变,React也可能调用这个方法,因此如果你只想处理变化,请确保比较当前值和下一个值。当父组件导致你的组件重新渲染时,可能会发生这种情况。

在装载期间,React 不会用初始的 props 调用 componentWillReceiveProps 。如果某些组件的 props 可能更新,它只会调用此方法。调用 this.setState 一般不会触发 componentWillReceiveProps 。

四、componentDidUpdate()

componentDidUpdate(prevProps, prevState) 在更新发生后立即被调用。这个方法在第一次渲染时不会被调用。

当组件已更新时,使用此方法作为操作DOM的一个机会。这也是做网络请求的一个好地方,只需你比较当前props与以前的prop(例如,如果props没有改变,可能不需要网络请求)

参考链接:React.Component

发表评论

电子邮件地址不会被公开。 必填项已用*标注