react-生命周期

表单

  • 通过三种当时获取表单的数据
  • 包含表单的组件分类
    • 受控组件:表单项输入数据能够自动收集成状态,案例中的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 (
            <form action="" method="get" onSubmit={this.handleSubmit}>
            <p>
            username: <input type="text" ref="username" />
            </p>
            <p>
            password: <input type="password" ref={input => this.pwd = input} />
            </p>
            <p>
            age: <input type="number" value={this.state.age} onChange={this.handleChange} />
            </p>
            <p>
            <input type="submit" value="login" />
            </p>
            </form>
        )
    }
}


ReactDOM.render(<Login/>,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 (
            <div>
            <h1 style={style} >{msg}</h1>
            <button onClick={this.cancelTime}>取消定时器</button>
            </div>
        )
    }
}

// 渲染组件
ReactDOM.render(<Life msg="生命周期演示"/>,document.getElementById('app'))
  • 问题

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

      //方式2:绑定样式
      // 因为绑定样式是在js中使用,所以样式是使用对象的方式传入
      const {opacity,color} = this.state
      //这里需要使用双花括号,因为是在js中绑定样式,样式在一个对象中以键值对的形式存在
      <h1 style={{opacity,color}} >{msg}</h1>
      
      //方式2:绑定样式
      // 使用...将样式以对象的方式取出,可以直接绑定至样式上 
      const {...style} = this.state
      <h1 style={style} >{msg}</h1>
      
    • 定时器必须清除,不然会造成内存泄露的问题

posted @ 2018-05-19 00:15  NordonWang  阅读(398)  评论(0编辑  收藏  举报