zoukankan      html  css  js  c++  java
  • (三)表单数据的搜集和react组件的生命周期

    四:表单数据的搜集

    (1)         问题: 在react应用中, 如何收集表单输入数据

    (2)         包含表单的组件分类

    1. 受控组件: 表单项输入数据能自动收集成状态
    2. 非受控组件: 需要时才手动读取表单输入框中的数据
    /*
    需求: 自定义包含表单的组件
      1. 界面如下所示
      2. 输入用户名密码后, 点击登陆提示输入信息
      3. 不提交表单
    */
    
    class LoginForm extends React.Component{
         //搜集表单数据
       constructor(props){
          super(props)
           this.state = {
              pwd : ""
           }
           this.HandleChange = this.HandleChange.bind(this)
           this.handleSubmit = this.handleSubmit.bind(this)
       }
    
        handleSubmit(event){
           //表单提交
            event.preventDefault();
           alert(`用户名是:${this.input.value}    密码是;${this.state.pwd}`)
        }
    
        HandleChange(event){
           //更新状态
              const pwd = event.target.value
            //不做验证只是检查效果
             this.setState({pwd})
        }
    
        render(){
            return (
                <form onSubmit={this.handleSubmit}>
                  用户名:<input type="text" ref={input => this.input = input}/>
                    密码:<input type="password" value={this.state.pwd} onChange={this.HandleChange}/>
                    <input type="submit" value="提交"/>
                </form>
            )
        }
    
    }
    
    ReactDOM.render(<LoginForm/>,document.getElementById('example'))
    

      

    五:组件的生命周期

    1:生命周期理解

    (1)    组件对象从创建到死亡它会经历特定的生命周期阶段

    (2)    React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调

    (3)    我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作

    2:生命周期的图

    (1)    组件的三个生命周期状态:

        * Mount:插入真实 DOM

        * Update:被重新渲染

        * Unmount:被移出真实 DOM

    (2)    React 为每个状态都提供了勾子(hook)函数

        * componentWillMount()

        * componentDidMount()

        * componentWillUpdate()

        * componentDidUpdate()

        * componentWillUnmount()

    (3)    生命周期流程:

    a.     第一次初始化渲染显示: ReactDOM.render()

          * constructor(): 创建对象初始化state

          * componentWillMount() : 将要插入回调

          * render() : 用于插入虚拟DOM回调

          * componentDidMount() : 已经插入回调

    b.     每次更新state: this.setSate()

          * componentWillUpdate() : 将要更新回调

          * render() : 更新(重新渲染)

          * componentDidUpdate() : 已经更新回调

    c.      移除组件: ReactDOM.unmountComponentAtNode(containerDom)

          * componentWillUnmount() : 组件将要被移除回调

    重要的勾子

    1)     render(): 初始化渲染或更新渲染调用

    2)     componentDidMount(): 开启监听, 发送ajax请求

    3)     componentWillUnmount(): 做一些收尾工作, 如: 清理定时器

    4)     componentWillReceiveProps():

    补充:虚拟DOM实现更新的原理

  • 相关阅读:
    android 权限及原理
    通讯协议的相关知识(备忘)
    MongoDB安装以及java开发入门<二>
    Struts2架构图
    Lucene查询对象笔记_TermQuery(笔记)
    mongodb指南(翻译)(二十) developer zone 索引(四)地理信息索引(转载)
    项目结尾公共模块WebService封装
    Redhat 5.5下安装MongoDB
    wsimport生成客户端出现的异常
    Hibernate关于空间表查询时的的一个异常
  • 原文地址:https://www.cnblogs.com/love-life-insist/p/10211164.html
Copyright © 2011-2022 走看看