再仔细读读react18官方文档吧 20220527

最新推荐文章于 2024-08-11 13:01:36 发布
最新推荐文章于 2024-08-11 13:01:36 发布
阅读量289 收藏
点赞数 1
分类专栏： react 文章标签： javascript 前端 react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tuzi007a/article/details/125003446
版权

章节回顾：

目录

什么是props

当 React 元素是用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）
转换为单个对象传递给组件，这个对象被称之为 “props”。

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="root"></div>
	<!-- 开发模式下用development版本 -->
	<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	<script type="text/babel">
		function Demo(props) {
			console.log('props: ', props)
			const {name, age, obj: {hobby, sex}} = props
			return <div>
				姓名{name}, 性别{sex ? '男' : '女'}, 年龄{age}, 爱好{hobby} ~
			</div>
		}
		const obj = {
			sex: 0,
			hobby: 'sleep'
		}
		const wrap = document.querySelector('#root')
		const root = ReactDOM.createRoot(wrap)
		root.render(<Demo name="dilireba" age={18} obj={obj} />)
	</script>
</body>
</html>

props打印结果：

在这里插入图片描述

根据定义来理解一下：

此时元素Demo是一个自定义的函数组件，

它接收的属性有3个：name age obj

值分别是：'dilireba' 18 { hobby: "sleep", sex: 0 }

这3个属性和对应的值，都会被放到一个对象里：

{
	name: "dilireba",
	age: 18,
	obj: {
		hobby: "sleep",
		sex: 0
	}
}

所组成的这个对象，就是props 。

props以参数的形式，传给自定义组件<Demo />

同时，还可以看到，传递参数的写法，也不是乱写的。

传递字符串可以直接写

name="dilireba"

传递数字、对象、数组、变量等，都要用{ }包起来

age={18}
obj={obj}

因为JSX中是使用js表达式的。

JSX中的true false null undefined不会被渲染

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="root"></div>
	<!-- 开发模式下用development版本 -->
	<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	<script type="text/babel">
		function Demo(props) {
			return <div>
				{undefined}
			</div>
		}
		const obj = {
			sex: 0,
			hobby: 'sleep'
		}
		const wrap = document.querySelector('#root')
		const root = ReactDOM.createRoot(wrap)
		root.render(<Demo />)
	</script>
</body>
</html>

页面渲染结果：是一片空白区域

在这里插入图片描述

props的只读性和纯函数

props是外界传递给组件的参数。

组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。

怎么理解呢？

写这样一个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="root"></div>
	<!-- 开发模式下用development版本 -->
	<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	<script type="text/babel">
		function Demo(props) {
			props = {
				name: props.name + Date.now()
			}
			return <div>
				{props.name}
			</div>
		}
		const wrap = document.querySelector('#root')
		const root = ReactDOM.createRoot(wrap)
		root.render(<Demo name="dilireba" />)
	</script>
</body>
</html>

每刷新一次页面，会发现页面渲染的结果都不一样，

而传给Demo组件的name值并没有变，只是在Demo组件内部，

把props的值给修改了。

这就会导致一个问题：

不管传入的值是什么，页面渲染的结果都无法预知，都是不可控的。

所以，React有一条严格的规范：

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

react内的数据变化，是通过state来完成的。

纯函数

像上面举出的栗子，传入的参数相同，但是输出的值不同，

这种不是纯函数。

而依照react的规则，只要传入的参数相同，输出的值就不变，这种函数，

就叫纯函数

极智开发 | 讲解 React 组件三大属性之二：props
极智视界
08-03 238
大家好，我是极智视界，本文讲解一下 React 组件三大属性之二：props。
React-Hook最佳实践
xiaofeng123aazz的博客
11-16 1737
HookuseState可以实现类似state和setState的效果useEffect可以实现这几个生命周期的功能，并且写法更加简单，在每次渲染后都会触发，触发的条件是依赖项有改变useRef返回一个引用，每次渲染都返回同一个对象，和类组件this属性一致返回一个记忆化的回调函数，在依赖项改变的时候，回调函数会修改，否则返回之前的回调函数，对于一些需要传给子组件的函数，可以使用这个，避免子组件因为回调函数改变而改变useMemo返回一个记忆化的值，依赖项改变，返回的值才会变，可用来记忆化值，和Vue。
Fragments(精读React官方文档—18)
Always-Learning
07-04 309
Fragments存在的意义是什么？ Fragments旨在解决一个组件包含多个元素，但是无需向DOM添加额外节点。 render() { return ( <React.Fragment> <ChildA /> <ChildB /> <ChildC /> </React.Fragment> ); } 动机 以下面的代码为例，如果Columns组件返回多个td元素才能实现效果，但是
再仔细读读react18官方文档吧 20220608
tuzi007a的博客
06-08 451
react
01. React18基础
最新发布
weixin_44715186的博客
08-11 1049
react学习记录
再仔细读读react18官方文档吧 20220526
tuzi007a的博客
05-26 789
再仔细读读react18官方文档吧 20220526首页什么是react开始体验react在html中如何使用react和jsx？核心概念Hello Worldreact18不支持ReactDOM.render方法了JSX简介JSX是什么？为什么使用 JSX？元素渲染根节点 首页 官方中文文档首页：https://react.docschina.org/ 当前安装的react版本，以及react官方文档，都默认是react18版本了。 什么是react react是用于构建用户界面的 JavaScrip
再仔细读读react18官方文档吧 20220530
tuzi007a的博客
05-30 286
章节回顾： 再仔细读读react18官方文档吧 20220527 目录表单受控组件非受控组件value or defaultValue ?状态提升子传父组合 vs 继承组合props.childrenslot插槽继承 表单 受控组件 什么是"受控组件？" 官方文档解释： 简单概括为： 表单值的获取和更新操作，交由react中的state来管理 比如： <input type="text" /> <textarea></textarea> <selec
再仔细读读react18官方文档吧 20220531
tuzi007a的博客
05-31 515
章节回顾： 再仔细读读react18官方文档吧 20220530 目录代码分割懒加载React.lazy & Suspenseloadable-componentsContext错误边界（Error Boundaries）什么是错误边界？错误边界解决了什么问题？使用错误边界有哪些注意事项？Fragment 代码分割 作用 / 优点 对你的应用进行代码分割能够帮助你“懒加载”当前用户所需要的内容，能够显著地提高你的应用性能。 尽管并没有减少应用整体的代码体积，但你可以避免加载用户永远不需要的
从零手写react-router
helloworld1024fd的博客
10-19 238
至于帮助我们实现了什么东西我就不过多阐述了, 这个直接移步官方文档, 我们下面直接聊实现另外: 源码有依赖两个库和, 所以我这里也就直接引入这两个库了,虽然下面我都会讲到基本使用, 但是同学有时间的话还是可以阅读以下官方文档还有一个需要注意的点是: 下面我书写的原理都是使用 + 函数组件来书写的, 而官方是使用类组件书写的, 所以如果你对还不是很明白的话, 得去补一下这方面的知识, 为什么要选择, 因为现在绝大多数大厂在上基本都在大力推荐使用, 所以我们得跟上时代不是, 而且我着重和大家聊的也是原理, 而不
深入React源码揭开渲染更新流程的面纱
It_kc的博客
10-04 558
render会调用方法中，如果是第一次渲染，会先初始化FiberRoot，其为应用的起点。同时生成根节点的Fiber实例。这里=Fiber;=FiberRoot。调用会计算出此次更新的过期时间。并生成任务对象update，将其插入Fiber中的更新队列，然后调用触发任务调度会更新以该Fiber节点为根节点的整棵Fiber树的过期时间。然后调用进行调度中会绑定任务与具体执行函数。然后交由Scheduler处理。
React文档（十八）最佳性能
weixin_33895657的博客
02-28 122
在内部，React使用好几种聪明的技巧去最小化更新UI所需要的DOM操作。对于很多应用来说，使用React会使得构建用户界面非常之快而且不需要做太多专门的性能优化。虽然如此，还是有一些方法可以让你为React应用加速。 使用生产构建 如果你正在性能测试或者在你的应用里遇到性能测试问题，确保你测试时使用了压缩了的生产构建： 对于创建React应用，你需要运行npm run build然后遵...
React中文文档.docx
09-08
许多人使用React作为MVC架构的V层。 尽管React并没有假设过你的其余技术栈， 但它仍可以作为一个小特征轻易地在已有项目中使用 React为了更高超的性能而使用虚拟DOM作为其不同的实现。 它同时也可以由服务端Node.js渲染 － 而不需要过重的浏览器DOM支持
React18
一+一加1的博客
05-16 1513
/ 封装自定义Hook// 问题: 布尔切换的逻辑 当前组件耦合在一起的 不方便复用// 解决思路: 自定义hook// 可复用的逻辑代码value)// 哪些状态和回调函数需要在其他组件中使用 returnreturn {value,toggle// 封装自定义hook通用思路// 1. 声明一个以use打头的函数// 2. 在函数体内封装可复用的逻辑（只要是可复用的逻辑）// 3. 把组件中用到的状态或者回调return出去（以对象或者数组）
React18学习(第一版---初级)保姆级教程
m0_53673930的博客
03-24 1356
本文主要介绍React18,在这个过程中,我会给各位北鼻介绍一下Ant-Design,Data-V等组件库,(到时候有什么就说什么吧!)希望大家能在这篇博文中学到东西,一点点也是好的,然后在介绍的过程中有些东西我不会做详细介绍,一笔带过,需要了解的北鼻可以自行查询资料,有些我会附一些博主的文章,北鼻们可以直接冲!(别止步于我给的链接!要多查资料!),然后我介绍的我也不是只是直接介绍,我会根据文档,所有东西,都会基于文档来.好啦~~~开启我们的react18之旅吧!
react18 学习（一）
weixin_44812511的博客
09-27 1841
记录自己学习react过程，会一直更新。
React官方文档--Conditional Rendering
cithegod的博客
11-01 1045
Conditional Rendering在React中，你可以创建不同的组件，并且渲染其中的一部分，这取决于你应用的状态。 状态渲染和JavaScript中的分支运算符有一样的效果，使用JavaScript中的类似if运算符来创建元素来代表当前状态，然后让React更新UI去匹配。 我们创建了一个Greeting组件去显示，显示的结果取决于用户是否登录。//two components fun
精读《React 18》
ass_ace
07-30 359
React 18 带来了几个非常实用的新特性，同时也没有额外的升级成本，值得仔细看一看。 下面是几个关键信息： React 18 工作小组。利用社区讨论 React 18 发布节奏与新特性。 发布计划。目前还没有正式发布，不过@alpha版已经可用了，安装 alpha 版。 React 18 新特性介绍。虽然还未正式发布，但特性介绍可以先行，本周精读主要就是解读这篇文档。 精读 总的来说，React 18 带来了 3 大新特性： Automatic batch...
React18 正式版放出
GoldenaArcher的博客
03-30 799
React18 正式版放出 前几天还在看源码，想说试试看 React18 的特性，没想到今天正式版就出来了： 现在就根据 React 团队放出的博文：React v18.0 了解一下 React18 的新特性。 Concurrent（并发） 其实之前在跑源码的时候就在视觉上意识到 React18 是真的进入并发时代，一下是 v17 版本的渲染： 对比一下 Reactv18 的渲染： 可以看到比起 v18，在 React 代码运行的部分（即粉色代码段），v18 运行调动了 2 个 tasks，而 v17
React 18 快速入门
jyn15159的博客
05-31 1061
React 18 快速入门。创建和嵌套组件；使用 JSX 编写标签；添加样式；显示数据；条件渲染；渲染列表；响应事件；更新界面 ；使用 Hook。
React框架学习资源指南：官方文档与在线教程
React官方文档是学习React框架的首选资源。最新的官方文档已经迁移到***。新文档包含了大量的教程、指南、API参考和社区论坛，为开发者提供了从入门到精通的全面支持。官方文档中的教程和指南提供了从零开始学习...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值