表单

通过三种当时获取表单的数据

包含表单的组件分类
- 受控组件：表单项输入数据能够自动收集成状态，案例中的age字段
- 非受控组件：需要时才手动读取表单输入框中的数据，案例中的username和password字段

大部分推荐使用受控组件，因为其更符合react的思想，不需要进行DOM的操作，而且react也不推荐过多的使用refs

class Login extends React.Component {    constructor(props){        super(props)        this.state = {            age:18        }        this.handleSubmit = this.handleSubmit.bind(this)        this.handleChange = this.handleChange.bind(this)    }    handleSubmit(event){        event.preventDefault();        // 通过旧的refs获取username        const username = this.refs.username.value        // 通过新的refs获取username        const pwd = this.pwd.value        // 通过状态获取age        const {age} = this.state        console.log(username,pwd,age);    }    handleChange(event){        // 由于原生的onchange事件并不是真的在change时触发事件，而是在失去焦点的时候才会触发change事件        // react在onChange事件做了优化，会在change的时候就触发事件        const age = event.target.value        this.setState({            age        })    }    render(){        return (            
                
                 username:             
            
                 password:  this.pwd = input} />            
            
                 age:             
            
                             
            
    
        )    }}ReactDOM.render(
    ,document.getElementById('app'))

组件生命周期

生命周期理解
- 就是一个组件对象从创建到结束的一个过程，在这个过程组件对象会经历特定的阶段，每个特定的阶段都会对应一个相应的勾子函数
- 勾子函数本质就是生命周期的回调函数，在组件的生命周期特定时刻进行回调
- React.Component已经定义好了一系列的勾子函数，若是需要在特定的时间节点做一些事情，可以重写特定的勾子函数，在勾子中实现自己的逻辑功能

生命周期
- 组件有三个生命周期状态
  - Mount：插入真实DOM，其对应的勾子函数为：componentWillMount()和componentDidMount()
  - Update：重新渲染，其对应的勾子函数为：componentWillUpdate()和componentDidMount()
  - Unmount：销毁真实DOM，其对应的勾子函数为：componentWillUnmount()

生命周期流程
- 首次初始化渲染显示：ReactDOM.render()
  - constructor()：创建对象初始化state
  - componentWillMount()：将要插入回调
  - render()：插入虚拟DOM回调
  - componentDidMount()：插入完成回调
- 每次更新state：this.setState()
  - componentWillUpdate()：将要更新回调
  - render()：更新、重新渲染
  - componentDidUpdate()：更新完成回调
- 移除组件:ReactDOM.unmountComponentAtNode()
  - componentWillUnmount()：组件将要销毁时的回调
- 常用勾子
  - render()：初始化渲染和更新都会调用
  - componentDidMount()：开启监听、ajax请求等
  - componentWillUnmount()：做一些收尾的工作，清除定时器等

案例

实现一个组件
- 让文本实现显示/隐藏动画
- 切换时间2s
- 点击按钮从界面中移除

// 定义组件 class Life extends React.Component{    constructor(props){        super(props)        this.state = {            opacity:1,            color:`#f0f`        }        this.cancelTime = this.cancelTime.bind(this)    }    componentDidMount(){        // 定时器作用域问题        // 1. 通过bind解决        // 2. 箭头函数        this.timer = setInterval( function() {            let {opacity} = this.state            opacity -= 0.1            //不能使用opacity === 0            // 因为js的计算存在误差            if(opacity <= 0){                opacity = 1            }            this.setState({                opacity            })        }.bind(this),200)    }    cancelTime(){        // 移除组件        ReactDOM.unmountComponentAtNode(document.getElementById('app'))    }    componentWillUnmount(){        // 销毁组件之前的勾子        // 定时器必须清除，不然会造成内存泄露的问题        clearInterval(this.timer)    }    render(){        const {msg} = this.props        const {...style} = this.state        return (            
                
     {msg}
            
                 
    
        )    }}// 渲染组件ReactDOM.render(
    ,document.getElementById('app'))

问题

样式绑定，首先将样式存在state中，在render中将样式帮上

//方式2：绑定样式// 因为绑定样式是在js中使用，所以样式是使用对象的方式传入const {opacity,color} = this.state//这里需要使用双花括号，因为是在js中绑定样式，样式在一个对象中以键值对的形式存在{msg}
//方式2：绑定样式// 使用...将样式以对象的方式取出，可以直接绑定至样式上 const {...style} = this.state{msg}