React基础（二）

redspider
102 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第21天，点击查看活动详情。

事件处理与收集表单数据

Ⅰ-事件处理

  1. 通过onXxx属性指定事件处理函数(注意大小写)

a)React使用的是自定义(合成事件,而不是使用的原生DOM事件) ----为了更好的兼容性

b)React中的事件是通过事件委托的方式处理的(委托给组件最外层的元素)----为了更高效

  1. 通过event.target得到发生事件的DOM元素对象 -----不要过度使用ref

Ⅱ-表单组件的分类

就形式上来说，受控组件就是为某个form表单组件添加value属性；非受控组件就是没有添加value属性的组件

1、受控组件
state = {//初始化状态
    username:'', //用户名
    password:'' //密码
}
​
//保存用户名到状态中
saveUsername = (event)=>{
    this.setState({username:event.target.value})
}
​
//保存密码到状态中
savePassword = (event)=>{
    this.setState({password:event.target.value})
}
​
//表单提交的回调
handleSubmit = (event)=>{
    event.preventDefault() //阻止表单提交
    const {username,password} = this.state
    alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
}
​
render(){
    return(
        <form onSubmit={this.handleSubmit}>
            用户名：<input onChange={this.saveUsername} type="text" name="username"/>
            密码：<input onChange={this.savePassword} type="password" name="password"/>
            <button>登录</button>
        </form>
    )
}
}
2、非受控组件
handleSubmit = (event)=>{
        event.preventDefault() //阻止表单提交
        const {username,password} = this
        alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)
    }
    render(){
        return(
            <form onSubmit={this.handleSubmit}>
                用户名：<input ref={c => this.username = c} type="text" name="username"/>
                密码：<input ref={c => this.password = c} type="password" name="password"/>
                <button>登录</button>
            </form>
        )
    }
}

高阶函数与函数柯里化

① 高阶函数:

如果一个函数符合下面两个规范中的任何一个,那该函数就是高阶函数

  1. 若A函数,接受的参数是一个函数,那么A就可以称之为高阶函数
  2. 若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数

常见的高阶函数有:Promise、setTimeout、arr.map()等等

② 函数的柯里化

通过函数调用继续返回函数的方式,实现对此接受参数最后统一处理的函数编码形式

function sum(a){ return (b)=>{return c=>{ return a+b+c} }}
③ 不用函数柯里化实现事件的绑定

直接使用回调函数,因为他本身就是以一个函数为返回值

<input onChange={event => this.saveFormData('username',event) } type="text" name="username"/>

生命周期

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

1、React生命周期(旧)

各个生命周期钩子调用顺序

  1. 初始化阶段:由ReactDOM.render()触发 --初次渲染

    • constructor()
    • compinentWillMount()
    • render()
    • componentDidMount() ==>常用 组件将要渲染

    一般在这个钩子中做一些初始化的事情,如:开启定时器,发送网络请求,订阅消息等

  2. 更新阶段:由组件内部的this.setState()或者父组件的render触发

    • shouldComponentUpdate() 组件应该更新
    • componentWillUpdate() 组件将要更新
    • render() ===>必须使用的一个
    • componentDidUpdate() 组件将要更新

  3. 卸载组件:由ReactDOM.unmountComponentAtNode(卸载节点上的组件)触发

    • componentWillUnmount() ===>常用 组件将要卸载

    一般在这个钩子中做一些首位的事情,如:关闭定时器,取消订阅等

2、React生命周期(新)

  1. 初始化阶段:由ReactDOM.render()触发 ---初次渲染

    • constructor()
    • getDerivedStateFromProps() 从Props获得派生状态
    • render()
    • componentDidMount() ====>常用

  2. 更新阶段:由组件内部的this.setState()或者父组件的render触发

    • getDerivedStateFromProps() 从Props获得派生状态
    • shouldComponentUpdate() 组件应该更新
    • render()
    • getSnapshotBeforeUpdate() 在更新前获得快照
    • componentDidUpdate()

  3. 卸载组件:由ReactDOM.unmountComponentAtNode()触发

    • componentWillUnmount() ===>常用

    一般在这个钩子中做一些收尾的事情,如:关闭定时器、取消订阅消息

3、重要的钩子

  1. render:初始化渲染或者更新渲染调用
  2. componentDidMount() :开启监听,发送ajax请求
  3. componentWillUnmount(): 做一些收尾工作,如:清理定时器

4、即将废弃的钩子

  1. componentWillMount
  2. componentWillReceiveProps
  3. componentWillUpdate

ps:现在使用会出现警告,之后版本可能需要加上UNSAFE_前缀才能使用,以后可能会被彻底废弃,不建议使用

推测React团队认为提高使用成本将会间接影响我们,让我们去适应新的钩子,所以加上这个

avatar
文章
阅读
粉丝