03_React 收集表单数据和 组件生命周期

已于 2024-08-24 16:32:51 修改
阅读量290 收藏 13
点赞数 8
分类专栏： React 全家桶 文章标签： react.js 前端 javascript
于 2024-08-24 16:31:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46143850/article/details/141470836
版权

React 收集表单数据和 组件生命周期

一、收集表单数据

1、例子

1.1 需求：定义一个包含表单的组件，输入用户名密码后，点击登录提示输入信息
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>收集表单数据</title>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入 react 核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入 react-dom，用于支持 react 操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel， 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 引入 prop-types，用于对组件标签属性进行限制, 存在 PropTypes -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <!-- 此处一定要写babel -->
    <script type="text/babel">
      // 1、创建组件
      class Login extends React.Component {
        render() {
          return (
            <form action="xxx" onSubmit={this.submit}>
              用户名：
              <input
                type="text"
                ref={(c) => {
                  this.username = c
                }}
                placeholder="用户名"
                name="username"
              />
              <br />
              密码：
              <input
                type="password"
                ref={(c) => {
                  this.password = c
                }}
                placeholder="密码"
                name="password"
              />
              <button>登录</button>
            </form>
          )
        }
        submit = (e) => {
          e.preventDefault()
          let { password, username } = this
          console.log(password.value, username.value)
        }
      }
      // 2、渲染组件到页面
      // ReactDOM.render(组件，容器)
      ReactDOM.render(<Login />, document.getElementById('test'))
    </script>
  </body>
</html>

2、理解：包含表单的组件分类

2.1 受控组件

页面中所有的输入类的节点，随着输入将数据维护到状态中，使用的时候直接从状态中取，就是受控组件
受控组件的优势在于 可以减少 ref 的使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>受控组件</title>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入 react 核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入 react-dom，用于支持 react 操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel， 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 引入 prop-types，用于对组件标签属性进行限制, 存在 PropTypes -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <!-- 此处一定要写babel -->
    <script type="text/babel">
      // 1、创建组件
      class Login extends React.Component {
        // 初始化状态
        state = {
          username: '',
          password: '',
        }
        render() {
          return (
            <form action="xxx" onSubmit={this.submit}>
              用户名：
              <input
                type="text"
                onChange={this.saveUsername}
                placeholder="用户名"
                name="username"
              />
              <br />
              密码：
              <input
                type="password"
                onChange={this.savePassword}
                placeholder="密码"
                name="password"
              />
              <button>登录</button>
            </form>
          )
        }
        // 保存用户名到状态中
        saveUsername = (event) => {
          this.setState({ username: event.target.value })
        }
        // 保存密码到状态中
        savePassword = (event) => {
          this.setState({ password: event.target.value })
        }
        // 表单提交回调
        submit = (e) => {
          e.preventDefault()
          let { password, username } = this.state
          console.log(password, username)
        }
      }
      // 2、渲染组件到页面
      // ReactDOM.render(组件，容器)
      ReactDOM.render(<Login />, document.getElementById('test'))
    </script>
  </body>
</html>
2.2 非受控组件

页面中所有的输入类的节点，现用现取就是 非受控组件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>收集表单数据</title>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入 react 核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入 react-dom，用于支持 react 操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel， 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 引入 prop-types，用于对组件标签属性进行限制, 存在 PropTypes -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <!-- 此处一定要写babel -->
    <script type="text/babel">
      // 1、创建组件
      class Login extends React.Component {
        render() {
          return (
            <form action="xxx" onSubmit={this.submit}>
              用户名：
              <input
                type="text"
                ref={(c) => {
                  this.username = c
                }}
                placeholder="用户名"
                name="username"
              />
              <br />
              密码：
              <input
                type="password"
                ref={(c) => {
                  this.password = c
                }}
                placeholder="密码"
                name="password"
              />
              <button>登录</button>
            </form>
          )
        }
        submit = (e) => {
          e.preventDefault()
          let { password, username } = this
          console.log(password.value, username.value)
        }
      }
      // 2、渲染组件到页面
      // ReactDOM.render(组件，容器)
      ReactDOM.render(<Login />, document.getElementById('test'))
    </script>
  </body>
</html>

二、高阶函数_函数柯里化

1、复习–对象相关的知识

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script type="text/javascript">
      let a = 'name'
      let obj = {} // {name: 'Tom'}
      obj[a] = 'Tom'
      console.log(obj)
    </script>
  </body>
</html>

2、高阶函数

如果一个函数符合下面 2 个规范中任何一个，那么该函数就是高阶函数
1）若 A 函数，接收的参数是一个函数，那么 A 就可以称为高阶函数
2）若 A 函数，调用的返回值依然是一个函数，那么 A 就可以称之为高阶函数

常见的高阶函数： arr.map()、arr.filter()、Promise、arr.find()、arr.reduce()、setTimout 等等

下面代码中的 saveFormData 函数就是一个高阶函数，符合了条件 2（返回值是一个函数）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>高阶函数_函数柯里化</title>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入 react 核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入 react-dom，用于支持 react 操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel， 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 引入 prop-types，用于对组件标签属性进行限制, 存在 PropTypes -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <!-- 此处一定要写babel -->
    <script type="text/babel">
      // 1、创建组件
      class Login extends React.Component {
        // 初始化状态
        state = {
          username: '',
          password: '',
        }
        render() {
          return (
            <form action="xxx" onSubmit={this.submit}>
              用户名：
              <input
                type="text"
                onChange={this.saveFormData('username')}
                placeholder="用户名"
                name="username"
              />
              <br />
              密码：
              <input
                type="password"
                onChange={this.saveFormData('password')}
                placeholder="密码"
                name="password"
              />
              <button>登录</button>
            </form>
          )
        }
        // 保存表单数据到状态中
        saveFormData = (dataType) => {
          // 把此函数交给 react 处理，react 可以传入一个 event
          return (event) => {
            console.log(dataType, event.target.value, this.state)
            this.setState({ [dataType]: event.target.value })
          }
          // this.setState({ type: event.target.value })
        }
        // 表单提交回调
        submit = (e) => {
          e.preventDefault()
          let { password, username } = this.state
          console.log(password, username)
        }
      }
      // 2、渲染组件到页面
      // ReactDOM.render(组件，容器)
      ReactDOM.render(<Login />, document.getElementById('test'))
    </script>
  </body>
</html>

3、函数柯里化

通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式
上一段代码中的 saveFormData 函数 就是一个函数柯里化

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>演示柯里化</title>
  </head>
  <body>
    <script type="text/javascript">
      function sum(a) {
        return (b) => {
          return (c) => {
            return a + b + c
          }
        }
      }
      console.log(sum(1)(12)(3))
    </script>
  </body>
</html>

4、不用柯里化的写法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>不用函数柯里化的实现</title>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入 react 核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入 react-dom，用于支持 react 操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel， 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 引入 prop-types，用于对组件标签属性进行限制, 存在 PropTypes -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <!-- 此处一定要写babel -->
    <script type="text/babel">
      // 1、创建组件
      class Login extends React.Component {
        // 初始化状态
        state = {
          username: '',
          password: '',
        }
        render() {
          return (
            <form action="xxx" onSubmit={this.submit}>
              用户名：
              <input
                type="text"
                onChange={(event) => {
                  this.saveFormData('username', event)
                }}
                placeholder="用户名"
                name="username"
              />
              <br />
              密码：
              <input
                type="password"
                onChange={(event) => {
                  this.saveFormData('password', event)
                }}
                placeholder="密码"
                name="password"
              />
              <button>登录</button>
            </form>
          )
        }
        // 保存表单数据到状态中
        saveFormData = (dataType, event) => {
          this.setState({ [dataType]: event.target.value })
        }
        // 表单提交回调
        submit = (e) => {
          e.preventDefault()
          let { password, username } = this.state
          console.log(password, username)
        }
      }
      // 2、渲染组件到页面
      // ReactDOM.render(组件，容器)
      ReactDOM.render(<Login />, document.getElementById('test'))
    </script>
  </body>
</html>

三、组件的生命周期

1、例子–引出生命周期

需求：自定义组件实现以下功能
1）让指定的文本做显示/隐藏 的渐变动画
2）从完全可见，到彻底消失，耗时 2s
3）点击 按钮 从界面卸载组件

挂载 mount
卸载 unMount

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>引出生命周期</title>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入 react 核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入 react-dom，用于支持 react 操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel， 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 引入 prop-types，用于对组件标签属性进行限制, 存在 PropTypes -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <!-- 此处一定要写babel -->
    <script type="text/babel">
      // 1、创建组件
      // 生命周期回调函数《==》生命周期钩子函数《==》生命周期函数《==》生命周期钩子
      class Life extends React.Component {
        // 初始化状态
        state = {
          opacity: 1,
        }
        // render 调用的时机： 初始化渲染、状态更新之后
        render() {
          console.log('render')
          return (
            <div>
              <h2 style={{ opacity: this.state.opacity }}>
                React 学不会，咋可能啊
              </h2>
              <button onClick={this.deadHandle}>直接噶</button>
            </div>
          )
        }
        // componentDidMount 组件挂载完毕时调用
        componentDidMount() {
          console.log('componentDidMount')
          this.timer = setInterval(() => {
            let { opacity } = this.state
            opacity -= 0.1
            if (opacity <= 0) {
              opacity = 1
            }
            // console.log(opacity)
            this.setState({ opacity })
          }, 200)
        }
        // 组件将要卸载的时候调用
        componentWillUnmount() {
          // 清除定时器
          clearInterval(this.timer)
        }

        deadHandle = () => {
          // // 清除定时器
          // clearInterval(this.timer)
          // 卸载组件
          ReactDOM.unmountComponentAtNode(document.getElementById('test'))
          console.log('按钮点击，将组件直接卸载')
        }
      }
      // 2、渲染组件到页面
      // ReactDOM.render(组件，容器)
      ReactDOM.render(<Life />, document.getElementById('test'))
    </script>
  </body>
</html>

2、理解

1）组件对象从创建到死亡它会经历特定阶段
2）React 组件对象包含一系列钩子函数（生命周期回调函数），在特定的时刻调用
3）我们在定义组件时候，在特定的生命周期回调函数中做特定的工作

3、生命周期（旧）

react v16.8.0
在这里插入图片描述

3.1 挂载时（初始化）的流程

执行顺序：
Count—constructor
Count—componentWillMount
Count—render
Count—componentDidMount

卸载组件按钮点击后执行：
Count—componentWillUnmount

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入 react 核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入 react-dom，用于支持 react 操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel， 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 引入 prop-types，用于对组件标签属性进行限制, 存在 PropTypes -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <!-- 此处一定要写babel -->
    <script type="text/babel">
      class Count extends React.Component {
        constructor(props) {
          console.log('Count---constructor')
          super(props)
          this.state = {
            num: 0,
          }
        }
        addHandle = () => {
          let { num } = this.state
          this.setState({ num: num + 1 })
        }
        death = () => {
          ReactDOM.unmountComponentAtNode(document.getElementById('test'))
        }
        // 组件将要挂载的钩子
        componentWillMount() {
          console.log('Count---componentWillMount')
        }
        // 组件挂载完毕的钩子
        componentDidMount() {
          console.log('Count---componentDidMount')
        }
        // 组件卸载时的钩子
        componentWillUnmount() {
          console.log('Count---componentWillUnmount')
        }
        render() {
          console.log('Count---render')
          let { num } = this.state
          return (
            <div>
              <h1>当前求和为 {num}</h1>
              <button onClick={this.addHandle}>点我+1</button>
              <button onClick={this.death}>卸载组件</button>
            </div>
          )
        }
      }
      ReactDOM.render(<Count />, document.getElementById('test'))
    </script>
  </body>
</html>
3.2 更新时的流程

在这里插入图片描述

3.2.1 流程线路 2(setState 流程)

正常更新：修改状态中的数据 组件能够更新

执行顺序
Count—shouldComponentUpdate
Count—componentWillUpdate
Count—render
Count—componentDidUpdate

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入 react 核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入 react-dom，用于支持 react 操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel， 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 引入 prop-types，用于对组件标签属性进行限制, 存在 PropTypes -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <!-- 此处一定要写babel -->
    <script type="text/babel">
      class Count extends React.Component {
        constructor(props) {
          console.log('Count---constructor')
          super(props)
          this.state = {
            num: 0,
          }
        }
        addHandle = () => {
          let { num } = this.state
          this.setState({ num: num + 1 })
        }
        death = () => {
          ReactDOM.unmountComponentAtNode(document.getElementById('test'))
        }
        // 组件将要挂载的钩子
        componentWillMount() {
          console.log('Count---componentWillMount')
        }
        // 组件挂载完毕的钩子
        componentDidMount() {
          console.log('Count---componentDidMount')
        }
        // 组件卸载时的钩子
        componentWillUnmount() {
          console.log('Count---componentWillUnmount')
        }
        // 控制组件更新的“阀门”, 需要写一个返回值（类型为 boolean），返回false就不再更新
        shouldComponentUpdate() {
          console.log('Count---shouldComponentUpdate')
          return true
        }
        // 组件将要更新的钩子
        componentWillUpdate() {
          console.log('Count---componentWillUpdate')
        }
        // 组件更新完毕的钩子
        componentDidUpdate() {
          console.log('Count---componentDidUpdate')
        }
        render() {
          console.log('Count---render')
          let { num } = this.state
          return (
            <div>
              <h1>当前求和为 {num}</h1>
              <button onClick={this.addHandle}>点我+1</button>
              <button onClick={this.death}>卸载组件</button>
            </div>
          )
        }
      }
      ReactDOM.render(<Count />, document.getElementById('test'))
    </script>
  </body>
</html>
3.2.2 流程线路 3 (forceUpdate 流程)

强制更新： 不修改状态中的数据但是想要更新页面就会用到。 阀门关闭也不会影响
执行顺序:
Count—componentWillUpdate
Count—render
Count—componentDidUpdate

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入 react 核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入 react-dom，用于支持 react 操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel， 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 引入 prop-types，用于对组件标签属性进行限制, 存在 PropTypes -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <!-- 此处一定要写babel -->
    <script type="text/babel">
      class Count extends React.Component {
        constructor(props) {
          console.log('Count---constructor')
          super(props)
          this.state = {
            num: 0,
          }
        }
        addHandle = () => {
          let { num } = this.state
          this.setState({ num: num + 1 })
        }
        // 卸载组件按钮的回调
        death = () => {
          ReactDOM.unmountComponentAtNode(document.getElementById('test'))
        }
        // 强制更新按钮的回调
        force = () => {
          this.forceUpdate()
        }
        // 组件将要挂载的钩子
        componentWillMount() {
          console.log('Count---componentWillMount')
        }
        // 组件挂载完毕的钩子
        componentDidMount() {
          console.log('Count---componentDidMount')
        }
        // 组件卸载时的钩子
        componentWillUnmount() {
          console.log('Count---componentWillUnmount')
        }
        // 控制组件更新的“阀门”, 需要写一个返回值（类型为 boolean），返回false就不再更新
        shouldComponentUpdate() {
          console.log('Count---shouldComponentUpdate')
          return true
        }
        // 组件将要更新的钩子
        componentWillUpdate() {
          console.log('Count---componentWillUpdate')
        }
        // 组件更新完毕的钩子
        componentDidUpdate() {
          console.log('Count---componentDidUpdate')
        }
        render() {
          console.log('Count---render')
          let { num } = this.state
          return (
            <div>
              <h1>当前求和为 {num}</h1>
              <button onClick={this.addHandle}>点我+1</button>
              <button onClick={this.death}>卸载组件</button>
              <button onClick={this.force}>
                不更改任何状态的数据，强制更新一下
              </button>
            </div>
          )
        }
      }
      ReactDOM.render(<Count />, document.getElementById('test'))
    </script>
  </body>
</html>
3.2.3 流程线路 1 （父组件 render 流程）

执行顺序：
Child—render
Child—componentWillReceiveProps {carName: ‘奥迪’}
Child—shouldComponentUpdate
Child—componentWillUpdate
Child—render
Child—componentDidUpdate

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入 react 核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入 react-dom，用于支持 react 操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel， 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 引入 prop-types，用于对组件标签属性进行限制, 存在 PropTypes -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <!-- 此处一定要写babel -->
    <script type="text/babel">
      class Parent extends React.Component {
        // 初始化状态
        state = {
          carName: '奔驰',
        }
        changeCar = () => {
          this.setState({ carName: '奥迪' })
        }

        render() {
          let { carName } = this.state
          return (
            <div>
              Parent， 我是父组件
              <button onClick={this.changeCar}>换车</button>
              <Child carName={carName} />
            </div>
          )
        }
      }
      class Child extends React.Component {
        // 组件将要接收新的prps 的钩子第一次传的不算， 之后的就能够执行，还能够接收到props参数
        componentWillReceiveProps(props) {
          console.log('Child---componentWillReceiveProps', props)
        }
        // 控制组件更新的“阀门”, 需要写一个返回值（类型为 boolean），返回false就不再更新
        shouldComponentUpdate() {
          console.log('Child---shouldComponentUpdate')
          return true
        }
        // 组件将要更新的钩子
        componentWillUpdate() {
          console.log('Child---componentWillUpdate')
        }
        // 组件更新完毕的钩子
        componentDidUpdate() {
          console.log('Child---componentDidUpdate')
        }
        render() {
          console.log('Child---render')
          return <div>Child, 我是子组件，接收到的车是{this.props.carName}</div>
        }
      }

      ReactDOM.render(<Parent />, document.getElementById('test'))
    </script>
  </body>
</html>
3.3 总结生命周期（旧）

生命周期的三个阶段
**1、初始化阶段：**由 ReactDom.render() 触发—初次渲染
constructor()
componentWillMount()
render()
componentDidMount() ====》常用，一般再这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
**2、更新阶段：**由组件内部 this.setState() 或父组件重新 render 触发
shouldComponentUpdate()
componentWillUpdate()
render() =======>必须
componentDidUpdate()
**3、卸载组件：**由 ReactDOM.unmountComponentAtNode() 触发
componentWillUnmount() ====》常用，一般再这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

4、对比新旧生命周期

新的生命周期即将不再维护componentWillMount、componentWillUpdate、
新增 getDerivedStateFromProps、getSnapshotBeforeUpdate，但是不是替代之前前面丢弃的钩子，这两个新的钩子基本不用

React v18.3.0
在这里插入图片描述

4.1 重要的钩子

render:初始化渲染或更新渲染调用
ComponentDidMount：开启监听，发送 ajax请求
componentWillUnmount：做一些收尾工作，如：清理定时器

4.2 即将废弃的钩子

omponentWillMount
componentWillUpdate
componentWillUnmount

4.3 getSnapshotBeforeUpdate的使用场景
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>生命周期（新）</title>
    <style>
    .list {
      width: 200px;
      height: 150px;
      background-color: skyblue;
      overflow-y: auto;
  }
  .news {
      height: 30px;
  }
</style>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入 react 核心库 -->
    <script type="text/javascript" src="../js/v18.3.0/react.development.js"></script>
    <!-- 引入 react-dom，用于支持 react 操作DOM -->
    <script
      type="text/javascript"
      src="../js/v18.3.0/react-dom.development.js"
    ></script>
    <!-- 引入babel， 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../js/v18.3.0/babel.min.js"></script>

    <!-- 引入 prop-types，用于对组件标签属性进行限制, 存在 PropTypes -->
    <script type="text/javascript" src="../js/v18.3.0/prop-types.js"></script>

    <!-- 此处一定要写babel -->
    <script type="text/babel">
      class NewsList extends React.Component {
        state = {
          newArr:[]
        }
        componentDidMount(){
          this.timer = setInterval(()=>{
            const {newArr} = this.state
            let news = '新闻'+(newArr.length+1)
            this.setState({
              newArr: [news, ...newArr]
            })
          },1000)
        }
        // 在更新之前获取快照
        getSnapshotBeforeUpdate(){
          console.log("getSnapshotBeforeUpdate", this.refs.list.scrollHeight)
          return this.refs.list.scrollHeigh
        }
        componentDidUpdate(prePops, preState, height){
          this.refs.list.scrollTop += this.refs.list.scrollHeight-height
        }
        render() {
          console.log('Count---render')
          return (
            <div className="list" ref='list'>
              {this.state.newArr.map((el,inx)=>{
                return <div className="news" key={inx}>{el}</div>
              })}
              
          </div>
          )
        }
      }
      ReactDOM.render(<NewsList />, document.getElementById('test'))
    </script>
  </body>
</html>
4.3 总结新的生命周期（常用的 render、ComponentDidMount、componentWillUnmount 是没有更改的）

**1、初始化阶段：**由 ReactDom.render() 触发—初次渲染
constructor()
getDerivedStateFromProps()
render()
componentDidMount() ====》常用，一般再这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
**2、更新阶段：**由组件内部 this.setState() 或父组件重新 render 触发
getDerivedStateFromProps
shouldComponentUpdate()
render() =======>必须
getSnapshotBeforeUpdate()
componentDidUpdate()
**3、卸载组件：**由 ReactDOM.unmountComponentAtNode() 触发
componentWillUnmount() ====》常用，一般再这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

qiao若huan喜
关注
  • 8
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React【组件生命周期 、组件生命周期_挂载、 组件生命周期_更新 、组件生命周期_卸载、表单_受控组件、表单_受控组件处理多个输入】(三)
09-07 713
React【组件生命周期、组件生命周期_挂载、组件生命周期_更新、组件生命周期_卸载、表单_受控组件、表单_受控组件处理多个输入】(三)
antd 的form 表单怎么回显数据_封装react antd的form表单组件
weixin_35565522的博客
12-30 2759
form表单在我们日常的开发过程中被使用到的概率还是很大的，比如包含了登录、注册、修改个人信息、新增修改业务数据等的公司内部管理系统。而在使用时这些表单的样式如高度、上下边距、边框、圆角、阴影、高亮等等都大同小异、大差不差且表单的功能基本相似，所以很有必要对这些表单来一个简单的封装。其实，封装组件的意义我们在上一篇封装react antd的表格table组件中已经介绍过了，这里不再做过多的描述了，...
React前端开发：React组件与生命周期
kkchenjj的博客
07-20 824
/ 定义一个简单的 React 函数组件// 使用组件在这个例子中，Button组件是一个函数组件，它接受props作为参数，props包含了组件的属性，如label和onClick。组件根据这些属性来渲染和响应事件。React组件的生命周期方法提供了对组件状态和生命周期的精细控制。通过合理使用这些方法，可以优化应用性能，确保组件在正确的时间点执行必要的操作。理解每个方法的调用时机和用途，是React开发中的重要技能。注意：React 16.3版本后，和已被弃用，建议使用和。
React生命周期详解
热门推荐
小陈的博客
01-11 1万+
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析
关于React组件中的生命周期
weixin_44490109的博客
08-16 395
目录关于React组件中的生命周期1、理解2、生命周期流程图（旧）2.1 组件生命周期2.2 父子组件生命周期执行顺序3、生命周期流程图（新）4、常用的重要钩子5、即将废弃的生命钩子 关于React组件中的生命周期 1、理解 组件从创建到死亡它会经历一些特定的阶段，生命周期就像一个人的生命一样，它是人从出生到老去的一个过程，在这个过程，我们会在合适的年龄做合适的事情，比如上学，工作等等 React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。 我们在定义组件时，会在特定的生命周期回调
react 数据监听 hook 生命周期 watch
偏执
04-26 403
【代码】react 数据监听 hook 生命周期 watch。
React-组件生命周期
匪鉴
06-25 774
每个生物都有它自己的生命周期，从出生到少年，成年再到死亡，同理，组件也是有它特定的生命周期，React用不同的方法来描述它的整个生命周期。现在，要稍微修改一下组件的代码，当组件加载完毕1秒后，使liked的值自动加1....... componentDidMount(){ setTimeout(()=<{ this.likedCallback(); },1000);
React学习#02 React组件生命周期以及useEffect
qq_19819557的博客
04-15 159
React生命周期+useEffect
React组件生命周期
z1617433467的博客
12-16 176
完整生命周期 每个React组件都包含 “生命周期方法”，你可以重写这些方法，以便于在运行过程中特定的阶段执行这些方法。React的生命周期主要包括3大部分，挂载、更新和卸载。在整个生命周期中，包括了组件异常处理。 1.挂载 当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下： constructor()：给 this.state 赋值对象来初始化内部 state，为事件处理函数绑定实例 static getDerivedStateFromProps()：它应返回一个对象来更新 state，如果
react生命周期函数, 改变子组件props
LiuPangZi6的博客
09-17 662
dsada
03-React 收集表单数据和 组件生命周期
最新发布
08-24
03-React 收集表单数据和 组件生命周期
基于React实现表单数据的添加和删除详解
12-08
首先，我们要理解React的基础概念，如组件、状态管理和生命周期。 React组件是构建用户界面的基本单元，可以视为独立的自包含代码块。在本示例中，我们创建了一个名为`ReactDemo`的类组件。初始的`render`方法返回...
react-解释ReactHooks组件的新生命周期的流程图
08-14
React Hooks 是React 16.8版本引入的一个重大特性，它允许我们在不编写类组件的情况下使用状态和其他React生命周期方法。这个“react-解释ReactHooks组件的新生命周期的流程图”很可能是为了帮助开发者理解如何在...
js中自定义react数据验证组件实例详解
10-17
在React项目中，虽然没有现成的Knockout-Validation这样的插件，但我们同样可以利用组件化思想和React的生命周期、状态管理来实现相似的功能，从而保证用户提交的数据既符合业务需求，又符合前端的输入规范。...
React 使用Hooks简化受控组件的状态绑定
12-11
Hooks是React引入的一种新功能，它允许在函数组件中使用状态和其他类组件特有的特性，如生命周期方法。React提供的核心Hooks包括`useState`和`useReducer`。`useState`用于创建和更新状态，而`useReducer`则适用于更...
React 学习——React.memo（简单、引用类型的prop）
qq_40269801的博客
08-20 492
React React.memo（简单、引用类型的prop） 1、传递一个简单类型的prop，prop变化时组件重新渲染 2、传递一个引用类型的prop，比较的是新值和旧值的引用是否相等;当父组件的函数重新执行时，实际上形成的是新的数组引用； 3、保持引用稳定->useMemo 组件渲染的过程中缓存一个值
react 路由创建与使用
weixin_45561719的博客
08-23 258
2，路由组件 createBrowserRouter。
React 封装自定义 hooks方法
m0_53574149的博客
08-19 313
React 封装自定义 hooks方法 在 React 中，自定义 Hooks 是一种非常强大的工具，它允许你将组件逻辑提取到可重用的函数中。这使得代码更加模块化、清晰，并且能够在多个组件之间共享状态或副作用。
React 学习——useMemo
qq_40269801的博客
08-19 447
React useMemo
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值