React【组件生命周期、组件生命周期_挂载、组件生命周期_更新、组件生命周期_卸载、表单_受控组件、表单_受控组件处理多个输入】(三)

╰半夏微凉° 2023-10-15 13:34 53阅读 0赞

## ![b0b9829c4af645499640da2c924b5b5d.gif][] ##

**文章目录**

组件生命周期

组件生命周期\_挂载

组件生命周期\_更新

组件生命周期\_卸载

表单\_受控组件

表单\_受控组件处理多个输入

--------------------

## 组件生命周期 ##

![87da4a12a5694306984a7e567bbe2160.png][]

每个组件都有自己的生命周期，从“生”到”死“。  
在这个过程当中，它会有不同的状态，针对不同的状态，都有对应的一些钩子函数，我们可以借助这些钩子函数做这样的事情：针对组件的某个生命状态去执行某些代码。

生命周期关键节点

> 挂载时： **constructor 、 static getDerivedStateFromProps 、 render() 、 componentDidMount()**

> 更新时： **static getDerivedStateFromProps 、 shouldComponentUpdate 、 render() 、  
> getSnapshotBeforeUpdate 、 componentDidUpdate**

> 卸载时： **componentWillUnmount**

**组件生命周期图谱**

![d69edfb5a0824bbbb8eb547ef048d9fd.png][]

## 组件生命周期\_挂载 ##

![9bdc4368429e40af9c140b4b548be8f6.png][]

挂载阶段指的是组件被初始化到第一次渲染到页面上这个过程。  
挂载阶段的钩子函数：

> **1**、constructor ：构造函数，组件被初始化时调用，在生命周期中只会被调用一次。  
> 2、static getDerivedStateFromProps ：是组件类的静态函数， 组件 props 或者 state 初始化或者变化时调用，最终可以返回一个新的state对象，使用率低。  
> 3、render ：定义并返回组件的界面（react元素）。  
> 4、componentDidMount ： 生成了真实DOM并被渲染到页面之后调用，在生命周期中只会被调用一次。

import React, { Component } from 'react'
    export default class LifeCycle extends
    Component {
     
      constructor(props) {
        console.log('constructor')
        super(props);
        // 初始化 state状态
        this.state = {
          text: "初始值"
       }
     }
    
     // 使用率低：它应返回一个对象来更新 state，如果返回 null 则state不变
      // getDerivedStateFromProps 在组件的state或者props初始化或者发生变化时调用
      static getDerivedStateFromProps(props,state) {
       console.log('getDerivedStateFromProps')
        return {
          text: props.text
       }
     }
      // 返回UI
      render() {
        console.log('render')
        return (
          <div>
            <h3>组件生命周期</h3>
            <p>{this.state.text}</p>
          </div>
       )
     }
      // 组件已经渲染完成
      // 这个时候组件对应的DOM已经插入到DOM文档当中了
      componentDidMount() {
        console.log("componentDidMount");
     }
    }

## 组件生命周期\_更新 ##

![fb7f221be7a54d7c8ee98bfd3bc5baff.png][]

更新阶段指的是当影响组件的数据状态发生变更时（ props ， state 发生变更）,重新更新渲染组件页面的过程。  
更新阶段的钩子函数：

> 1、static getDerivedStateFromProps ：组件 props 或者 state 变化时调用
> 
> 2、shouldComponentUpdate ： 返回布尔值，true则组件会重新渲染，false则不会重新渲染。
> 
> 3、render ：定义并返回组件的界面（react元素）。
> 
> 4、getSnapshotBeforeUpdate ：在更新DOM之前调用，必须要返回一个值，要与  
> componentDidUpdate() 方法一起使用。
> 
> 5、componentDidUpdate ： 页面更新之后调用

import React, { Component } from 'react'
    export default class LifeCycleComponent extends Component {
     constructor(){
      super();
      this.state = {
       text:"测试文本"
     }
    }
     clickHandle(){
      this.setState({
       text:"修改数据"
     })
    }
     render() {
      return (
       <div>
        <h3>组件生命周期</h3>
        <p>{ this.state.text }</p>
         <button onClick={ this.clickHandle.bind(this) }>点击</button>
       </div>
     )
    }
     
     // shouldComponentUpdate() 方法会返回一个布尔值，指定 React 是否应该继续渲染，默认值是 true， 即state 每次发生变化组件都会重新渲染。
     shouldComponentUpdate(nextProps,nextState){
      // 在这里可以获取最新的props和state
      return true;
    }
     
     // 使用率低
     // getSnapshotBeforeUpdate() 方法在最近一次渲染输出（提交到 DOM 节点）之前调用
     // 在 getSnapshotBeforeUpdate() 方法中，我们可以访问更新前的 props 和 state。
     // getSnapshotBeforeUpdate() 方法需要与componentDidUpdate() 方法一起使用，否则会出现错误
     getSnapshotBeforeUpdate(prevProps,prevState){
      console.log("更新DOM前",prevState);
      return null;
    }
     
     //DOM更新之后执行
     componentDidUpdate(prevProps, prevState){
      console.log("更新DOM后",this.state);
     }
    }

## 组件生命周期\_卸载 ##

![b5653d615adc415ea2778002b9927ca3.png][]

卸载阶段指的是组件从DOM移除的过程。  
组件卸载时会调用的钩子函数：

1、componentWillUnmount ：组件卸载之前调用。我们可以在这个钩子函数里面执行必要的清理操作。例如，清除定时器，关闭持续的网络连接，移除监听器等。

//子组件
    componentWillUnmount(){
        console.log('子组件马上要被移除卸载了！！！')
     }

//父组件
    onChange = () => {
      this.setState({
        showChild:false
      })
    }
    render() {
       return (
         <div>
           <h3>父组件</h3>
           <p>{this.state.text}</p>
           <button onClick= {this.onChange}>点击</button>
          {this.state.showChild&&<LifeCycleChild />}
         </div>
      )
    }

## **表单\_受控组件** ##

![7209a2fbcde5485e9bcccaa0ee9025c9.png][]

使 React 的 state 成为表单显示的“唯一数据源”，并且使用React控制用户输入过程中表单发生的操作。  
这种由state驱动的表单元素就叫做“受控组件”。

**html**

**react**

import React, { Component } from 'react' 
    
    export default class FormTest extends
    Component {
      constructor(){
        super();
        this.state = {
          username:""
       }
     }
      onNameChange=(e)=>{
        this.setState({
          username:e.target.value
       })
     }
      onSubmit=(e)=>{
        e.preventDefault();
        console.log(this.state.username);
     }
      render() {
        return (
          <div>
            <form onSubmit={ this.onSubmit}>
             名字：<input type="text" value={ this.state.username } onChange={ this.onNameChange }/>
              <input type="submit" value="登录"/>
            </form>
          </div>
       )
     }
    }

## 表单\_受控组件处理多个输入 ##

当页面有多个输入框的时候，为每个输入框都添加一个独立的事件处理函数太过麻烦。  
我们可以给每个元素添加 name 属性，并让处理函数根据 **event.target.name** 的值选择要执行的操作。

import React, { Component } from 'react'
    
    export default class FormTest extends
    Component {
      constructor() {
        super();
        this.state = {
          username: "",
          password: ""
       }
     }
      onChange = (e) => {
        this.setState({
         [e.target.name]: e.target.value
       })
     }
      onSubmit = (e) => {
        e.preventDefault();
        console.log(this.state.username,this.state.password);
     }
      render() {
        return (
          <div>
            <form onSubmit={this.onSubmit}>
             名字：<input name="username" type="text"
                value= {this.state.username}
                // onChange= {this.onNameChange}
                onChange= {this.onChange}
                /> <br />
             密码：<input name="password" type="password"
                value= {this.state.password}
                // onChange= {this.onPwdChange}
                onChange= {this.onChange}
              /> <br />
              <input type="submit" value="登录" />
            </form>
          </div>
       )
     }
    }

[b0b9829c4af645499640da2c924b5b5d.gif]: https://img-blog.csdnimg.cn/b0b9829c4af645499640da2c924b5b5d.gif
[87da4a12a5694306984a7e567bbe2160.png]: https://img-blog.csdnimg.cn/87da4a12a5694306984a7e567bbe2160.png
[d69edfb5a0824bbbb8eb547ef048d9fd.png]: https://img-blog.csdnimg.cn/d69edfb5a0824bbbb8eb547ef048d9fd.png
[9bdc4368429e40af9c140b4b548be8f6.png]: https://img-blog.csdnimg.cn/9bdc4368429e40af9c140b4b548be8f6.png
[fb7f221be7a54d7c8ee98bfd3bc5baff.png]: https://img-blog.csdnimg.cn/fb7f221be7a54d7c8ee98bfd3bc5baff.png
[b5653d615adc415ea2778002b9927ca3.png]: https://img-blog.csdnimg.cn/b5653d615adc415ea2778002b9927ca3.png
[7209a2fbcde5485e9bcccaa0ee9025c9.png]: https://img-blog.csdnimg.cn/7209a2fbcde5485e9bcccaa0ee9025c9.png