React中生命周期和子组件

Posted 2022-08-23 公众号_前端每日技巧

组件生命周期

为了说明组件的创建，存在，销毁的过程，react提供了组件的生命周期，共分三大周期

创建期：说明组件的创建的过程，相当于人的少年

存在期：说明组件的存在的过程，相当于人的中年

销毁期：说明组件的销毁的过程，相当于人的老年

创建创建期

创建期共分五个阶段

ES5开发中，对应五个方法：getDefaultProps,getInitialsate, ​​componentWillMount​​, ​​render​​, ​​componentDidMount​​

ES6开发中，移除了前两个方法：componentWillMount, render, componentDidMount

第一个阶段 组件定义默认属性数据

defaultProps静态属性中定义

组件尚未创建

第二个阶段 组件初始化状态数据

在构造函数中定义constructor

一定要执行super(props)，实现构造函数继承，并且要传递属性数据参数

继承之后，this.props与props就没有区别了

我们为this.state赋值，机可以初始化，

在构造函数中，我们可以访问属性数据，因此可以用属性数据为状态数据赋值

这样就实现了数据有外部流入内部

第三个阶段 组件即将被构建

通过componentWillMount方法定义

此时可以访问到属性数据以及状态数据，并且无法访问虚拟DOM

我们可以提前请求数据，我们也可以为需要在虚拟DOM中使用的插件，初始化。

第四个阶段 渲染组件

我们通过render方法定义

返回值是渲染的虚拟DOM

此时可以访问到属性数据以及状态数据，无法访问虚拟DOM

所以我们在渲染虚拟DOM的时候，可以用属性数据或者状态为虚拟DOM赋值

第五个阶段 组件构建完成

我们通过componentDidMount方法定义

此时可以访问到属性数据以及状态数据，也可以访问虚拟DOM

因此我们可以在这个阶段，发送请求，绑定事件等实现一些交互

该阶段方法执行完毕，标志着组件创建期的结束，存在期的开始，

所以该方法在组件实例化对象的一生中，只执行一次。

我们可以在这个阶段修改状态数据，

一旦​​属性​​​或者​​状态​​数据发生改变，组件将进入存在期。

获取虚拟DOM

在渲染库（react-dom）中,提供了findDOMNode的方法，可以获取虚拟DOM对应的真实DOM元素。

// 定义组件
 class GoTop extends Component 
  // 2 初始化状态数据
  constructor(props) 
      super(props);
      // 状态
      // 用属性数据，为状态数据初始化
      this.state = 
          text: props.text
      
      console.log(222, constructor, this, arguments)
  
  // 3 组件即将构建
  componentWillMount() 
      console.log(333, componentWillMount, this, arguments, findDOMNode(this))
  
  // 4 渲染虚拟DOM
  render() 
      console.log(444, render, this, arguments)
      return <span>this.state.text</span>
  
  // 5 组件构建完成
  componentDidMount() 
      console.log(555, componentDidMount, this, arguments, findDOMNode(this))
  
 
 // 1 默认属性数据
 GoTop.defaultProps = 
  text: 返回顶部
 
 // 渲染组件
render(<GoTop />, app)

子组件

虚拟DOM可以添加子虚拟DOM，组件是对虚拟DOM的封装，因此他们的行为是一致的，组件也可以定义子组件

在​​该组件​​中定义的​​组件​​，我们称之为​​该组件​​的​​子组件​​，​​该组件​​称之为​​父组件​​

<Zss>
    <Demo />
</Zss>

Zss组件就是父组件，Demo组件就是子组件。

组件是完整独立的，因此数据不会共享，想让组件之间共享数据，我们要实现组件间的通信。