React（三）- React收集表单数据、函数柯里化及生命周期

最新推荐文章于 2023-08-16 09:15:10 发布
最新推荐文章于 2023-08-16 09:15:10 发布
阅读量329 收藏
点赞数
分类专栏： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zong_0915/article/details/115657264
版权

React（三）- React收集表单数据、函数柯里化及生命周期

React系列文章导航

一. 收集表单数据

React中，包含表单的组件有两大类：

  • 受控组件
  • 非受控组件

1.1 非受控组件：

页面中所有输入类的DOM，只要现用现取，就是一个非受控组件。非受控组件即不受状态的控制，获取数据就是相当于操作DOM。一般没有value。 案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>非受控组件</title>
</head>

<body>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <div id="test"></div>
    <script type="text/babel">
        // 创建登录组件
        class Login extends React.Component {
            handleSubmit = (event) => {
                // 阻止表单提交
                event.preventDefault()
                const { username, password } = this
                alert(`你输入的用户名是${username.value}`)
            }

            render() {
                return (
                    // onSubmit是React里面的表单提交标签
                    <form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
                        {/*意思是将当前组件的引用赋值给this对象的username属性*/}
                        {/*页面中所有输入类的DOM，只要现用现取，就是一个非受控组件*/}
                        用户名：<input ref={c => this.username = c} type="text" name="userName" />
                        密码：<input ref={c => this.password = c} type="password" name="password" />
                        <button>登录</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Login />, document.getElementById('test'))
    </script>
</body>

</html>

结果如下：同时点击弹框后，页面并不会跳转到百度搜索页。
在这里插入图片描述

1.2 受控组件：

受控组件是必须要有value的，value用来传入一个参数，结合onchang来控制这个参数输出。（即随着输入的内容去维护状态值）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>受控组件</title>
</head>

<body>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <div id="test"></div>
    <script type="text/babel">
        // 创建登录组件
        class Login extends React.Component {
        	// 保存用户名到状态中
            saveUserName= (event) => {
                // 这里d event.target.value也就是input框中的内容值
                // console.log(event.target.value)
                this.setState({ username: event.target.value })
            }
            render() {
                return (
                    <form onSubmit={this.handleSubmit}>
                        用户名：<input onChange={this.saveUserName} type="text" name="userName" />
                        密码：<input type="password" name="password" />
                        <button>登录</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Login />, document.getElementById('test'))
    </script>
</body>

</html>

效果如下：
在这里插入图片描述
实时修改输入框的内容后，可发现其状态中的username属性也会随之改变：
在这里插入图片描述

二. 函数柯里化

2.1 案例优化

上面的受控组件案例中，我们用onChange去绑定对应的一个函数来实现状态的实时变化，那么如果再加一个属性，就是这样的：

saveUserName = (event) => {
    this.setState({ username: event.target.value })
}
savePassword = (event) => {
    this.setState({ password: event.target.value })
}
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个规范中的任何一个，那么该函数就是高级函数：

  • 若A函数，接收的参数是一个函数，那么A是高阶函数。
  • 若A函数，调用的返回值是一个函数，那么A也是高阶函数。

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

上述案例改为：

// 创建登录组件
class Login extends React.Component {
    state = {
        username: '',
        password: ''
    }

    saveFormData = (dataType) => {
        console.log(dataType)
        return (event) => {
            this.setState({ [dataType]: event.target.value })
        }
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                用户名：<input onChange={this.saveFormData('username')} type="text" name="userName" />
                密码：<input onChange={this.saveFormData('password')} type="password" name="password" />
                <button>登录</button>
            </form>
        )
    }
}
ReactDOM.render(<Login />, document.getElementById('test'))

可以看下控制台，每次改变任意一个输入框，其输出的dataType为两个节点。
在这里插入图片描述
同时，还能实时的将结果更新到组件中：
在这里插入图片描述
可以知道，即使有十几个属性，我们只需要定义一个函数即可实现所有属性状态的维护。

其实上述案例的优化，也用到了函数柯里化，那么接下来来看下什么是函数柯里化：

2.2 函数柯里化案例

Demo1：

<script type="text/javascript">
    function sum(a, b, c) {
        return a + b + c
    }
    const res = sum(1, 2, 3)
    console.log(res)
</script>
// 若函数柯里化，则变成：
<script type="text/javascript">
    function sum(a) {
        return (b) => {
            return (c) => {
                return a + b + c
            }
        }
    }
    const res = sum(1)(2)(3)
    console.log(res)
</script>

紧接着再来看下上述案例的部分代码：

saveFormData = (dataType) => {
    console.log(dataType)
    return (event) => {
        this.setState({ [dataType]: event.target.value })
    }
}

从上面案例结果输出中可以发现，dataType中包含了多个属性，最后统一进行处理，这也就是用到了函数柯里化的思想，那么这个代码如果不使用函数柯里化那会变成什么样子？来看下：

 <script type="text/babel">
    // 创建登录组件
    class Login extends React.Component {
        state = {
            username: '',
            password: ''
        }
        saveFormData = (dataTyp, event) => {
            this.setState({ [dataType]: event.target.value })
        }
        render() {
            return (
                <form onSubmit={this.handleSubmit}>
                    {/*注意函数不能加括号，因为我们希望其作为回调，而不是调用一个方法，若加了括号，传入的是一个返回值*/}
                    用户名：<input onChange={event => this.saveFormData('username', event)} type="text" name="userName" />
                    密码：<input onChange={event => this.saveFormData('password', event)} type="password" name="password" />
                    <button>登录</button>
                </form>
            )
        }
    }
    ReactDOM.render(<Login />, document.getElementById('test'))
</script>

三. 组件生命周期

3.1 从案例出发引入生命周期的概念

Demo需求：

  1. 定义一个组件，让指定的文本做一个渐变效果，直到消失，耗时2s。
  2. 点击按钮，则对应组件卸载，从页面中消失。

这里先说两个概念：

  • 挂载mount：可以理解为我们将一个组件进行了渲染。
  • 卸载安unmount：卸载对应组件。

Demo如下：

class MyLife extends React.Component {
        state = { opacity: 0.5 }

        death = () => {
            // 卸载组件
            ReactDOM.unmountComponentAtNode(document.getElementById('test'))
        }
        // 名字固定，在组件挂载页面完毕后会调用这个方法，只会调用一次
        componentDidMount() {
            setInterval(() => {
                let { opacity } = this.state
                opacity -= 0.1

                if (opacity <= 0) {
                    opacity = 1
                }
                this.setState({ opacity })
            }, 200)
        }
        // 在初始化渲染和状态更新之后调用
        render() {
            return (
                <div>
                    <h2 style={{ opacity: this.state.opacity }}>Hello World</h2>
                    <button onClick={this.death}>卸载组件</button>
                </div>
            )
        }
    }
    ReactDOM.render(<MyLife />, document.getElementById('test'))
</script>

这样的代码确实能够做到字体渐进的一个效果，但是在点击卸载组件按钮之后，控制台会有所报错：
在这里插入图片描述
意思是：不可以在已经卸载的组件中进行状态的更新，因为在上述代码中，组件挂载完毕后，就打开了一个定时器，那么在组件卸载的时候，定时器依旧没有关闭！因此在卸载组件的同时，我们还需要清除对应的定时器。

方式1：通过clearInterval()方法，删除对应的定时器。

// 知识点复习：对于这种箭头函数，其内部的this是丢失的，那么自动沿用上一级的this，而这里的外层this指的是组件的实例对象，因此通用，可以拿来使用
death = () => {
    ReactDOM.unmountComponentAtNode(document.getElementById('test'))
    clearInterval(this.timer)
}

componentDidMount() {
    this.timer = setInterval(() => {
        let { opacity } = this.state
        opacity -= 0.1

        if (opacity <= 0) {
            opacity = 1
        }
        this.setState({ opacity })
    }, 200)
}

方式2：通过自带方法componentWillUnmount()

// 组件将要卸载的时候会调用这个方法
componentWillUnmount() {
    clearInterval(this.timer)
}

从这个案例中可以发现什么：

  1. React在渲染组件的时候会调用render()
  2. 在组件挂载完毕后，会调用componentDidMount()
  3. 在组件即将卸载前，会调用componentWillUnmount()

而这些方法都涉及到了一个组件的生命周期，这些函数可以称呼为生命周期回调函数或者生命周期钩子函数（或者把函数去掉）。

3.2 生命周期(旧)

从上面的例子当中我们可以做以下理解：

  1. 组件从创建到死亡它会经历一些特定的阶段。
  2. React组建中包含了一系列的钩子函数，会在特定阶段调用。
  3. 我们定义组件时，往往会在钩子函数中做一些特定的工作。

其生命周期图如下：
在这里插入图片描述

3.2.1 挂载时的生命周期

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3</title>
</head>
<body>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <div id="test"></div>
    <script type="text/babel">
        class Count extends React.Component {
            constructor(props) {
                console.log('Count---constructor')
                super(props)
            }

            state = { count: 0 }
            // 组件将要挂载的时候调用
            componentWillMount() {
                console.log("Count---componentWillMount");
            }
            // 组件挂在完毕的时候调用
            componentDidMount() {
                console.log("Count---componentDidMount");
            }       
            // 渲染或者发生更改的时候调用
            render() {
                console.log("Count---render");
                const { count } = this.state
                return (
                    <div>
                        <h2>当前求和为：{count}</h2>
                        <button onClick={this.add}>点击</button>
                    </div>
                )
            }

            // 点击按钮的时候回调
            add = () => {
                const { count } = this.state
                this.setState({ count: count + 1 })
            }
        }
        ReactDOM.render(<Count />, document.getElementById('test'))
    </script>
</body>
</html>

最后的输出结果：
在这里插入图片描述

3.2.2 更新时的生命周期

Demo1案例如下：

class Count extends React.Component {
    // 渲染或者发生更改的时候调用
    state = { count: 0 }
    render() {
        console.log("Count---render");
        const { count } = this.state
        return (
            <div>
                <h2>当前求和为：{count}</h2>
                <button onClick={this.add}>点击</button>
                <button onClick={this.death}>卸载</button>
            </div>
        )
    }
    componentWillReceiveProps() {
        console.log("Count---componentWillReceiveProps");
    }
    // 控制组件更新的阀门
    shouldComponentUpdate() {
        console.log("Count---shouldComponentUpdate");
        // 记得返回true，若返回false，则修改state状态的时候，会进行阻塞，默认返回true
        return true;
    }
    // 组件将要卸载时调用
    componentWillUpdate() {
        console.log("Count---componentWillUpdate");
    }
    // 组件完成卸载时调用
    componentDidUpdate() {
        console.log("Count---componentDidUpdate");
    }

    death = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
    }
    add = () => {
        const { count } = this.state
        this.setState({ count: count + 1 })
    }
}
ReactDOM.render(<Count />, document.getElementById('test'))

若阀门打开（即返回true），那么控制台的输出结果如下：
在这里插入图片描述
若阀门关闭（即返回false），那么控制台的输出结果如下：

shouldComponentUpdate() {
   console.log("Count---shouldComponentUpdate");
   return false;
}

在这里插入图片描述

Demo2案例：componentWillReceiveProps()的调用：

class A extends React.Component {
    state = { msg: '你好' }
    render() {
        return (
            <div>
                <div>A组件</div>
                <button onClick={this.change}>替换</button>
                <B msg={this.state.msg} />
            </div>
        )
    }
    change = () => {
        this.setState({ msg: 'HelloWorld' })
    }
}

class B extends React.Component {
    componentWillReceiveProps(props) {
        console.log("B---componentWillReceiveProps", props);
    }
    shouldComponentUpdate() {
        console.log("B---shouldComponentUpdate");
        return true;
    }
    // 组件将要卸载时调用
    componentWillUpdate() {
        console.log("B---componentWillUpdate");
    }
    // 组件完成卸载时调用
    componentDidUpdate() {
        console.log("B---componentDidUpdate");
    }
    render() {
        return (
            <div>组件B接收到的消息：{this.props.msg}</div>
        )
    }
}
ReactDOM.render(<A />, document.getElementById('test'))

结果如下：在这里插入图片描述
点击替换之后：
在这里插入图片描述

总结

初始化阶段：由ReactDOM.render()触发初次渲染，调用顺序：

  1. constructor()
  2. componentWillMount()
  3. render()
  4. componentDidMount()，一般常用来做一些初始化的动作，比如打开一个定时器、发送网络请求、订阅消息等。

更新阶段：由组件内部this.setState()或者父类组件重新render()触发，调用顺序：

  1. shouldComponentUpdate()
  2. componentWillUpdate()
  3. render()
  4. componentDidUpdate()

卸载组件：由ReactDOM.unmountComponentAtNode()触发，调用顺序：

  1. componentWillUnmount()，一般常用来做一些收尾工作，例如关闭定时器等。
Zong_0915
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
React---高阶函数和函数柯里化的理解
lelara的博客
04-19 253
一、高阶函数 　　如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。 1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。 2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。 常见的高阶函数有：Promise、setTimeout、arr.map(...
react-react面试题之生命周期的不同阶段.zip
最新发布
03-20
面试中可能会询问如何使用这些生命周期方法来优化性能、处理异步操作、以及如何适配React的新特性，例如函数组件和Hooks。对于 Hooks，例如`useState`、`useEffect`、`useRef`等，它们提供了在函数组件中管理状态和...
React-函数柯里化
TO_Web的博客
02-28 417
React函数柯里化 ps: 用于记录学习,持续更新 先来看段代码 class People extends React.Component { changeData = () => { // 下面这个renturn函数 是解决函数返回值是undefined的问题 return () => { } } render() { return ( <form> <input onChange={this.changeData}" />
React：三、函数柯里化
a232884c的博客
06-10 382
1.高阶函数和函数的柯里化 且input通过onChage实时更新数据到state中，为受控组件（类似vue的双向绑定）；即取即用，数据不做存储二次利用为非受控组件。 2.不使用函数柯里化的方法 简化写法：...
React-16：函数柯里化
Always-Learning
03-24 430
对象中调用变量要加[] 函数柯里化的概念 通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。 函数柯里化的案例 不使用函数柯里化实现form表单的state更新
React事件处理 受控非受控组件 高阶函数 函数柯里化
m0_45136861的博客
03-15 124
事件处理 // 1创建组件 class Demo extends React.Component{ /* 1. 通过onXxx属性指定事件处理函数(注意大小写) React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 为了更好的兼容 React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) 为了高效 2. 通过event.target得到发生事件的DOM元素对象
react-virtualized-tree:使用react的虚拟化树视图组件
04-29
作为React式库，它使用子函数来实现最大的可扩展性。 其背后的核心思想是，只要使用自己的组件或由树导出的组件，任何使用它的人都可以按照自己的意图创建树。 演示和文档可以找到。 安装 您可以通过npm或yarn进行...
React+Antd-可视化拖拽表单
12-03
基于react结合antd-form，实现可视化表单拖拽，左侧为自定义所有的组件，中间为工作区，拖拽左侧到工作区，目前可以进行删除等操作，可以自己再优化添加其他功能，右侧为组件名称，描述等，可以自己优化添加其他。...
React中组件的生命周期 - 详解.png
08-05
React中组件的生命周期 - 详解
React-redialReact的通用数据获取和路由生命周期管理
08-14
React-redial是一个专门为React应用程序设计的库，它旨在解决数据获取和路由生命周期管理的问题。在React的世界里，数据获取通常涉及到API调用或其他形式的异步操作，而路由生命周期管理则与组件在路由变化时的行为...
React学习笔记——在受控组件中使用函数柯里化
weixin_45664402的博客
04-09 137
先来了解两个定义高阶函数和函数的柯里化 高阶函数： 如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。 若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。 若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。 常见的高阶函数有：Promise、setTimeout、arr.map()等等 函数的柯里化： 通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。 代码： <div id="test"></div
React高阶函数和函数柯里化
weixin_51235620的博客
01-15 469
概念 高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。 1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。 2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。 常见的高阶函数有：Promise、setTimeout、arr.map()等等 函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。 通过以下案例引出高价函数以及函数柯里化 用户点击登录之后弹窗中提示用户名和密码: class C1
4、React 之 收集表单数据 与 组件生命周期（1）
所学所思
05-29 367
一、收集表单数据 1、效果 需求：定义一个包含表单的组件 输入用户名密码后，点击登录 提示输入信息 代码示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="test"></div> </body&g
react（21）——不使用函数柯里化功能实现表单验证
木子 旭的博客
01-31 111
1.代码 <body> <div id="test"></div> <script type="text/babel"> "use strict"; class Login extends React.Component { state = { username: "", password: "", }; saveFormData = (dataType,value)
react中收集表单数据
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
04-26 272
非受控组件 <div id="test"></div> <!-- 引入react核心库 --> <script src="../js/react.development.js"></script> <!-- 引入react-dom，用于支持react操作dom --> <script src="../js/react-dom.development.js"></script> <!--
6 种在 React 中获取数据的方法
LuckyWinty的博客
08-16 378
前端Q我是winty，专注分享前端知识和各类前端资源，乐于分享各种有趣的事，关注我，一起做个有趣的人～公众号点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群原文 | https://medium.com/@Choco23/6-ways-to-get-data-in-react-528dd11f267数据获取是任何react应用程序的核心方面。对于 React 开发人员来说，了解不同的...
5-react-受控组件非受控组件
做一个优秀的小前端
05-13 182
非受控组件 现取现用，不会存储到state中 //创建组件 class Login extends React.Component{ handleSubmit = (event)=>{ event.preventDefault() //阻止表单提交 const {username,password} = this alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`) } render(){ return(
React-Form表单数据获取
热门推荐
zsspj12的专栏
09-29 2万+
1、  const { getFieldProps } = this.props.form; 2、  //类似给input一个stringName 3、  this.props.form.getFieldsValue();//获取所有stringName的值 4、  this.props.form.getFieldValue(‘userName’);//获取单个控件的值 const For
React 实现表单数据收集
weixin_40916825的博客
07-30 2066
老规矩，大佬请绕道，本Demo适合新手小白，练习效果如下 老规矩直接上代码 class LoginTest extends React.Component{ constructor(props){ super(props) this.state={ pwd: '' } } handleSubmit=(event)=>{ const name = this.nameInput.val
react生命周期函数初始化阶段
07-09
在 React 中，组件的生命周期函数可以分为三个阶段：初始化阶段、更新阶段和卸载阶段。在初始化阶段，以下是常用的生命周期函数： 1. constructor(props): 构造函数，在组件被创建时调用，用于初始化状态和绑定方法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Zong_0915

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值