React 学习笔记 day 3

最新推荐文章于 2024-10-31 13:56:14 发布

Cancri e

最新推荐文章于 2024-10-31 13:56:14 发布

阅读量437

点赞数

分类专栏：框架文章标签： react.js 学习 javascript

本文链接：https://blog.csdn.net/C__herry/article/details/127402443

版权

框架专栏收录该内容

11 篇文章 0 订阅

订阅专栏

非受控组件

<div id="test"></div>

<script type="text/babel">
    class Login extends React.Component{
        handleSubmit = (event)=>{
            event.preventDefault() //阻止表单提交
            const {username,password} = this
            alert(`用户名：${username.value}，密码：${password.value}`)
        }
        render(){
            return(
                <form onSubmit={this.handleSubmit}>
                    用户名：<input type="text" ref={c => this.username = c} name="username"/>
                    密码：<input type="password" ref={c => this.password = c} name="password"/>
                    <button>登录</button>
                </form>
            )
        }
    }
    ReactDOM.render(<Login/>,document.getElementById('test'))
</script>

受控组件

<div id="test"></div>

<script type="text/babel">
    class Login extends React.Component{
        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 name="username" type="text" onChange={this.saveUsername}/>
                    密码：<input name="password" type="password" onChange={this.savePassword}/>
                    <button>登录</button>
                </form>
            )
        }
    }
    ReactDOM.render(<Login/>,document.getElementById('test'))
</script>

函数柯里化

<div id="test"></div>

<script type="text/babel">
    class Login extends React.Component{
        state = {
            username:"",
            password:""
        }
        saveFormData = (dataType)=>{
            return (event)=>{
                this.setState({[dataType]:event.target.value})
            }
        }
        //表单提交的回调
        handleSubmit = (event)=>{
            event.preventDefault()
            const {username,password} = this.state
            alert(`用户名：${username}，密码：${password}`)
        }
        render(){
            return(
                <form onSubmit={this.handleSubmit}>
                    用户名：<input name="username" type="text" onChange={this.saveFormData('username')}/>
                    密码：<input name="password" type="password" onChange={this.saveFormData('password')}/>
                    <button>登录</button>
                </form>
            )
        }
    }
    ReactDOM.render(<Login/>,document.getElementById('test'))
</script>

高阶函数

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

若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数
若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数

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

函数的柯里化

理解：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。

生命周期

理解

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

生命周期流程图（旧）

初始化阶段

调用流程：constructor(构造器)→componentWillMount(组件将要挂载)→render(挂载)→componentDidMount(组件挂载完毕)→componentWillUnmount(组件将被卸载)

更新阶段

setState()(修改状态)→shouldComponentUpdate(控制组件更新的“阀门”，不写时默认值为true，若写了该函数，必须返回 true/false)→componentWillUpdate(组件将要更新)→render(重新渲染)→componentDidUpdate(组件更新完毕)→componentWillUnmount(组件将被卸载)
forceUpdate(强制更新)→componentWillUpdate(组件将要更新)→render(重新渲染)→componentDidUpdate(组件更新完毕)→componentWillUnmount(组件将被卸载)
父组件render(父组件更新)→componentWillReceiveProps(组件将要接收标签属性)→shouldComponentUpdate(控制组件更新的“阀门”)→componentWillUpdate(组件将要更新)→render(重新渲染)→componentDidUpdate(组件更新完毕)→componentWillUnmount(组件将被卸载)

注：componentWillReceiveProps函数在第一次接收标签属性时不会被调用，当父组件更新时才会被调用。