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实现更新的原理

  • 相关阅读:
    2019左其盛好书榜,没见过更好的榜单(截至4月30日)
    3星|菲利普·科特勒《我的营销人生》:大师一生经历、成就、著作回顾
    3星|樊登《低风险创业》:创业相关的书+樊登个人创业经验
    OKR能解决996吗?德鲁克怎么看?
    《中国合伙人》背后的故事:4星|俞敏洪《我曾走在崩溃的边缘》
    3星|路江涌《共演战略画布》:PPT技巧级别的创新,缺实际分析案例
    C# 通用数据库配置界面,微软原生DLL重整合
    SoapUI、Jmeter、Postman三种接口测试工具的比较分析
    用VS制作的windows服务安装包 安装完后如何让服务自动启动
    POI使用详解
  • 原文地址:https://www.cnblogs.com/love-life-insist/p/10211164.html
Copyright © 2011-2022 走看看