React学习-- React源码(3)生命周期的管理艺术

前端之家收集整理的这篇文章主要介绍了React学习-- React源码(3)生命周期的管理艺术前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

React的主要思想是通过构建可复用组件来构建用户界面。

组件:其实就是有限状态机,通过状态渲染对应的界面,且每个组件都有自己的生命周期,它规定了组件的状态和方法需要在那个阶段改变和执行。

例如:某个组件有显示和隐藏两个状态,在React中,只需要设置状态setState({ showed: true/false })就可以实现显示和隐藏的切换。

React生命周期基础

1、当首次挂载组件时,顺序执行:getDefaultProps,getInitialState,componentWillMount,render,componentDidMount 。
2、当卸载组件时,执行componentWillUnmount。
3、当重新挂在组件的时,按顺序执行:getInitialState,componentWillMount,render,componentDidMount。但是不执行getDefaultProps
4、当再次渲染组件时,组件接收到更新状态,此时按顺序执行:componentWillReceiveProps,shouldComponentUpdate,componentWillUpdate,render,componentDidUpdate。

如果开发者使用ES6 classes的方法构建React组件,那么defaultProps={}其实就是调用内部的getDefaultProps方法,this.state = {}其实就是调用getInitialState方法

React生命周期进阶

自定义组件的生命周期主要通过三个阶段进行管理:MOUNTING、RECEIVE_PROPS、UNMOUNTING,它们负责通知组件当前所处的阶段,应该执行生命周期中的哪个步骤。这三个阶段对应三种方法:mountComponent、updateComponent、unmountComponent。在每个方法中,都提供了集中处理方法,其中前置will的在进入状态前调用,前缀did的在进入状态之后调用

1、创建自定义组件

createClass时创建自定义组件的入口方法。该方法在整个生命周期中只会执行一次。这个方法负责管理生命周期中的getDefaultProps,因此这个方法也将只执行一次。

2、阶段一:MOUNTING

mountComponent负责管理生命周期中的方法:getInitialState、componentWillMount、render、componentDidMount。

通过mountComponent挂载组件,初始化序号、标记等参数,判断是否为无状态组件,并进行初始化工作,比如初始化props、context等参数。利用getInitialState获取初始化state、初始化更新队列和更新状态。

如果组件中存在componentWillMount,则执行。如果在componentWillMount中调用了setState方法,则会进行state合并,而不是re-render。并且,inst.state = this._processPendingState (inst.props,inst.context) 方法是在componentWillMount之后执行的,因此componentWillMount方法中的state并不是最新的。

渲染完成后,若存在componentDidMount则调用

如果组件存在子组件,那么父组件的componentWillMount在子组件的componentWillMount之前调用;父组件的componentDidMount在子组件的componentDidMount之后调用(因为mountComponent是通过递归渲染内容的)。

3、阶段二:RECEIVE_PROPS

updateComponent负责管理生命周期中的:componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate。

若存在componentWillReceiveProps,则执行。如果此时在componentWillReceiveProps中调用setState,是不会触发re-render的,而是会进行state合并。并且,在componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate中也还是无法获取到更新后的 this.state,只有在render、componentDidUpdate中才能获取到更新后的this.state。

注意,禁止在shouldComponentUpdate和componentWillUpdate中调用setstate,这会造成循环调用,直至耗光浏览器内存后崩溃。

4、阶段三:UNMOUNTING

unmountComponent负责管理生命周期中的unmountComponent。

如果存在unmountComponent,则执行并重置所有相关参数,更新队列和状态,如果此时在unmountComponent中调用setState,是不会触发re-render的。

生命周期和状态让React组件非常灵活和强大,但是同时可能也会导致组件变的复杂而难以维护。

在实际的项目中,我们经常需要编写一些自身没有状态,只是从父组件接收props,并根据这些props进行渲染的简单组件。

在React中,一个很重要的原则就是让组件尽可能的都是无状态的。

无状态组件

无状态组件只是一个render方法,没有状态,没有生命周期,只是简单的接收props渲染生成DOM结构,是一个纯粹为了渲染而生的组件。相比于有状态组件,它们简单快捷高效,所以如果有可能的话,请尽量使用无状态组件。

例子:

const HelloWorld = (props) => <div>{props.name}</div>; ReactDOM.render(<HelloWorld name="Hello World!" />,App);
原文链接:https://www.f2er.com/react/303764.html

猜你在找的React相关文章