React 进阶教程（二）

最新推荐文章于 2024-06-23 09:31:27 发布
最新推荐文章于 2024-06-23 09:31:27 发布
阅读量205 收藏
点赞数
分类专栏： react 文章标签： html5 css es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45571672/article/details/119221828
版权

refs

组件内的标签可以定义ref属性来标识自己，他会返回一个dom节点

  1. 字符串写法（官方不建议使用）
    ！！！注：在脚手架的检查模式中会报错
class Demo extends React.Component{
    showData = ()=>{
        console.log(this.refs.input1)
    }
    render(){
        return(
            <div>
                <input ref="input1" type="text"/>
                <button onClick={this.showData}>按钮</button>
            </div>
        )
    }
}
//渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))
  1. 内联写法
//创建组件
class Demo extends React.Component{
    //展示左侧输入框的数据
    showData = ()=>{
        console.log(this.input1)
    }
    saveInput = (c)=>{
        console.log(c);
    }
    render(){
        return(
            <div>
                <input ref={c => this.input1 = c } type="text" />
                <button onClick={this.showData}>点我提示左侧的数据</button>
                {/* 页面开启默认调用一次 */}
                <input ref={this.saveInput} type="text"/>
            </div>
        )
    }
}
//渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))
  1. React.createRef() 写法(官方推荐使用)
class Demo extends React.Component{
    /*React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的*/
    myRef = React.createRef()
myRef2 = React.createRef()
//展示左侧输入框的数据
showData = ()=>{
    console.log(this.myRef.current);
}
render(){
    return(
        <div>
            <input ref={this.myRef} type="text" />
            <input ref={this.myRef2} type="text" />
            <button onClick={this.showData}>点我提示左侧的数据</button>
        </div>
    )
}
}
//渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))

非受控组件

相当于单项数据流 只是页面改变后台数据不会变
案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1_非受控组件</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<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 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>

受控组件

相当于双向数据绑定 页面上的数据改变时后台数据也会同步改变

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2_受控组件</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<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 onChange={this.saveUsername} type="text" name="username"/>
						密码：<input onChange={this.savePassword} type="password" name="password"/>
						<button>登录</button>
					</form>
				)
			}
		}
		//渲染组件
		ReactDOM.render(<Login/>,document.getElementById('test'))
	</script>
</body>
</html>

高阶函数柯里化

高阶函数的条件

高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
		 1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
		 2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
	常见的高阶函数有：Promise、setTimeout、arr.map()等等
	函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。 
		function sum(a){
			return(b)=>{
				return (c)=>{
					return a+b+c
				}
			}
		}
调用方法 sun(1)(2)(3)	最终返回一个6

案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>高阶函数_函数柯里化</title>
</head>
<body>
	<div id="test"></div>
	<script type="text/javascript" src="../js/react.development.js"></script>
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<script type="text/javascript" src="../js/babel.min.js"></script>
	<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 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'))
	</script>
</body>
</html>

不用函数柯里化的实现

他是利用函数传参的方式用函数调用函数达到既可以传参有可以拿到event事件对象的方法

案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2_不用函数柯里化的实现</title>
</head>
<body>

	<div id="test"></div>
	<script type="text/javascript" src="../js/react.development.js"></script>
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<script type="text/javascript" src="../js/babel.min.js"></script>
	<script type="text/babel">
		class Login extends React.Component{
			state = {
				username:'', //用户名
				password:'' //密码
			}
			//保存表单数据到状态中
			saveFormData = (dataType,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 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>
</body>
</html>

组件传参

父传子用props传递

class Person extends React.Component{
    render(){
        return (
           <div>
                父组件
                <Zi name="张三" />
            </div>
        )
    }
}
class Zi extends React.Component{
    showData=()=>{
        console.log(this.props.name)
    }
    render(){
        return (
           <div>
                子组件
                <button onClick={this.showData}>按钮</button>
            </div>
        )
    }
    
}
ReactDOM.render(<Person/>,document.getElementById('app'))

子传父同样使用props不过传递的东西变为了函数

```js
class Person extends React.Component{
	fun=(data)=>{
		console.log(data)
	}
    render(){
        return (
           <div>
                父组件
                <Zi sj={this.fun} />
            </div>
        )
    }
}
class Zi extends React.Component{
	state={
		name:"张三"
	}
    showData=()=>{
        console.log(this.props.sj(this.state.name))
    }
    render(){
        return (
           <div>
                子组件
                <button onClick={this.showData}>按钮</button>
            </div>
        )
    }
    
}
ReactDOM.render(<Person/>,document.getElementById('app'))

总结

知识点

  1. refs 的三种使用方法（推荐使用第三种 React.createRef() 写法 ）
  2. 受控组件和非受控组件的区别
  3. 高阶函数柯里化的概念和不用函数柯里化的实现
  4. 组件中父传子和子传父的使用方法
星梦之羽
关注
专栏目录
react进阶用法完全指南
xiaofeng123aazz的博客
09-26 452
自定义Hook的本质是一种函数代码逻辑的抽取。自定义组件必须以use开头，否则会报错。下面的这个自定义Hook就是对组件的挂载和卸载中重复的逻辑进行复用。return(< div > < h1 > 这是测试自定义Hook < / h1 > < / div >) } function useInfo(name) {console . log(` ${ name } 组件被挂载了~ `);console . log(` ${ name } 组件被卸载了~ `);};} , [ ]);}${
前端学习-React组件进阶
qq_48772498的博客
03-23 1128
一.组件通讯介绍 组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯。 二.组件的 props 组件是封闭的，要接收外部数据应该通过 props 来实现 props 的作用：接收传递组件的数据 传递数据：给组件标签添加属性 接收数据：函数组件通过参数 props 接收数据，
React进阶教程
weixin_45571672的博客
07-28 494
什么是 JSX 语法 JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 为什么要使用 JSX ！！！注：如果使用的时 JSX 语法一定要引入 babel.js 文件，还要在 script 标签上声名 style=“text/babel” 这样浏览器才能把 JSX 的语法编译成功 。 添加 style=“text/babel” 的作用是为了让浏览器使用 babel 转移后在编译 他可以让我们在 js 中直接写标签来定义模板 JSX 语法规范 jsx语法规则： 定义虚拟DOM时
探索React的深度与广度：《React进阶实践指南》项目推荐
gitblog_00020的博客
06-23 335
探索React的深度与广度：《React进阶实践指南》项目推荐 项目地址:https://gitcode.com/GoodLuckAlien/React-Advanced-Guide-Pro 项目介绍 欢迎走进《React进阶实践指南》的世界，这是一个专为React开发者量身打造的知识宝库与实践乐园。项目以其详尽的文档和实用的代码示例，照亮了React进阶之路的每一个角落。通过一系列精心设计的D...
React进阶学习
一念流转
01-14 1200
仅作为作者本人学习记录，读者需要一定的基础知识才能入手。
react进阶
wangrong111222的博客
07-08 405
1，react的 虚拟domreact在修改前后的虚拟dom树的比较运算，都是同级之间进行比较，这样的算法 就很高效，是O(1)常数的，还有就是递归的算法，就比较的低效，是O(n2) ；ReactElement.createElement = function (type, config, children) { var propName; // 初始化参数 var props = ...
React进阶
旅行的风筝
07-09 460
1、React的生命周期钩子生命周期钩子函数会在组件的生命周期的关键地方自动执行，React提供了以下声明周期钩子： componentWillMount(): 组件加载前调用 componentDidMount(): 组件加载后调用 componentWillUpdate(): 组件更新前调用 componentDidUpdate(): 组件更新后调用 componentWillUnmo
React 进阶之路_徐超.zip
06-21
本资源"React 进阶之路_徐超.zip"提供了全面的React进阶教程，帮助开发者深入理解并掌握React的核心概念和技术。 React进阶之旅主要涵盖以下几个关键知识点： 1. **React基本概念**：React是一个JavaScript库，...
React+组件+生命周期和状态+进阶教程+管理系统
02-28
React+组件+生命周期和状态+进阶 - 本资源是一个React的理解，解释了组件的作用和分类，以及如何用React管理组件的生命周期和状态，包括使用钩子，上下文，Redux等。 - Python+Flask+博客+项目
【Threejs进阶教程-优化篇】4.Vue/React与threejs如何解决冲突和卡顿(续)
最新发布
07-07
【Threejs进阶教程-优化篇】4.Vue/React与threejs如何解决冲突和卡顿(续)中的全部源码
03web前端进阶教程-移动端
07-04
"03web前端进阶教程-移动端"是一个专门针对移动设备优化的前端学习资源，旨在帮助开发者掌握移动端的前端开发技能。 【移动端前端开发的重要性】 移动设备的普及使得移动端前端开发成为不可或缺的技能。移动设备的...
React 进阶之路
05-09
React 进阶之路
React进阶小册
weixin_33964094的博客
11-21 305
在工作中我们一直使用react及react相关框架（antd/antd-mobile） 但是对于react的深层的了解不够：JSX语法与虚拟DOM的关系？高阶组件是如何实现的？dom diff的原理？ 通过写一篇react小册来查缺补漏。 JSX和虚拟DOM import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM...
React---React组件进阶
前端与计算机相关知识的分享，博主的qq523235674
03-24 915
1.组件通讯 组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯。 2.组件的props 组件是封闭的，要接收外部数据应该通过props来实现 props的作用:接收传递给组件的数据 传递数据︰给组件标签添加属性 接收数据∶函数组件通过参数props接收数据，类组件通过t.
React-进阶
m0_60698858的博客
09-10 275
一、组件通讯 1、父传子
使用Redux实现的React todoList进阶教程
"react+redux的升级版todoList的实现" 在本文中，我们将探讨如何使用React和Redux构建一个更高级的todoList应用。React是一个流行的JavaScript库，用于构建用户界面，尤其是单页应用程序。Redux则是一种状态管理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

星梦之羽

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

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

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

打赏作者

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

抵扣说明：

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

余额充值