React 初学 - 类式组件 - 个人笔记8

最新推荐文章于 2022-07-04 09:45:14 发布
最新推荐文章于 2022-07-04 09:45:14 发布
阅读量104 收藏
点赞数 1
分类专栏： react.js 文章标签： reactjs 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Amnesiac666/article/details/118643781
版权

函数式组件：
注意：因为babel会开始严格模式，所以函数中的this不再指向window了
在这里插入图片描述

类式组件：
将MyComponent类式组件渲染到真实Dom上
在这里插入图片描述

公孙元二
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React-first-app:Github搜索者和笔记记录者
05-17
标题中的“React-first-app: Github搜索者和笔记记录者”表明这是一个使用React技术构建的应用程序，主要用于在Github上进行搜索并记录笔记。React是Facebook开发的一个用于构建用户界面的JavaScript库，尤其适合...
react-native-practical-guide:Udemy课程的练习文件，作业和笔记
04-14
《React Native实战指南：课程练习、作业与笔记详解》 React Native是一款由Facebook开发的开源框架，它允许开发者使用JavaScript和React来构建原生的移动应用程序。本篇将深入探讨在"react-native-practical-guide...
React 初学 - 函数式组件 - 个人笔记6
树上骑个猴的博客
07-06 106
组件首字母要大写，标签要闭合。
React 初学 - 类式组件中的构造器和props - 个人笔记21
树上骑个猴的博客
07-16 382
render是类式中必要的 构造器的作用： 注意： 为什么写构造器，必调super()？ 打印实例自身props 如果构造器不写props 就获取不到实例的props 总结： 类中构造器可以省略 如果希望获得实例的props就要写构造器，如果写构造器，就要传props，不然获取不到this.props 如果接了props但又没传给pros，会导致接了没啥用，主要是要给super传过去： 总结： ...
React 初学 - 函数式组件使用props - 个人笔记22
树上骑个猴的博客
07-17 1487
类式组件的this指向实例对象，所以可以使用this获取state和props 函数式组件的this没有指向实例对象，所以无法使用state和refs。但是函数能够使用props属性，因为函数能接收参数 函数式组件传统写法： 如果打印this会发现是undefined 可以直接接收到props 打印 函数式组件的参数校验写法： 总结：函数式组件可以使用props ...
React 初学 - 高阶组件 - 个人笔记30
树上骑个猴的博客
07-22 116
onchange调用的等号右边的回调。也就是return xxx 。所以会自动传event参数进去 有个记忆法：只要能给onChange绑定函数继续 函数柯里化： 所以这种也是函数柯里化：
React 初学 - 非受控组件 - 个人笔记28
树上骑个猴的博客
07-21 110
理由ref获得表单里面的值 记得加上preventDefault不然表单会跳转 现用现取的就是非受控组件
React 初学 - 静态组件 - 个人笔记56
树上骑个猴的博客
08-12 165
需求：
React 初学 - 受控组件 - 个人笔记29
树上骑个猴的博客
07-22 110
总结：受控组件类似vue里的双向数据绑定。随着输入，直接控制状态。叫受控组件。 推荐平时多写受控组件，因为官方也是说尽量少用ref：
React 初学 - 组件化编码流程 - 个人笔记57
树上骑个猴的博客
08-12 75
vscode中运行react程序，如何停?
React 初学 - 组件与模块 - 个人笔记5
树上骑个猴的博客
07-06 85
React Native 基础学习笔记.rar
01-28
总的来说，“React Native基础学习笔记”可能涵盖以上所有内容，帮助初学者逐步掌握React Native的各个方面，从基础知识到高级特性，再到实际项目开发的实践经验。通过深入学习和实践，开发者可以充分利用React ...
frontend-note:前置学习笔记
03-20
React以其虚拟DOM和函数式组件理念引领潮流，配合Redux或MobX进行状态管理。 3. **Weex笔记**：Weex是由阿里巴巴开源的一个跨平台UI框架，它允许开发者使用一套代码库同时开发iOS、Android和Web应用。Weex基于Vue....
lagou-Learn:拉钩大前端学习笔记
04-17
总之，《拉钩大前端学习笔记》是一份全面的JavaScript学习资料，无论你是初学者还是有一定经验的开发者，都能从中获得宝贵的知识和实践经验，进一步提升自己的前端开发能力。通过系统学习和实践，你将能够熟练运用...
Module not found: Error: Can‘t resolve ‘react-dom/client‘
树上骑个猴的博客
07-04 3869
解决方案 当你的react版本低于18时,可以采用如下方案
Functions are not valid as a React child. This may happen if you return a Component instead of
树上骑个猴的博客
06-26 3150
报错信息：Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.使用一个{} 去渲染一个组件 就会报这样一个错误例如 是一个组件使用时不小心写成了 所以报上面的错误应该将 改为...
React 初学 - 使用 Array.map() 以及Array.Filter() 动态渲染元素 - 个人笔记53
树上骑个猴的博客
08-11 2914
条件渲染很有用，但是你可能需要组件来渲染未知数量的元素。通常在响应式编程中，程序员在应用程序运行时之前无法知道其 state，因为这在很大程度上取决于用户与该程序的交互。程序员需要提前编写代码来正确处理未知状态。在 React 中使用Array.map()阐明了这个概念。 在constructor中，创建一个this.state对象并定义两个 state：userInput应该初始化为空字符串，toDoList应该初始化为空数组。接下来，删除items变量旁边render()方法中的注释。取而代之的是，将存
React 初学 - 使用三元表达式进行条件渲染 - 个人笔记51
树上骑个猴的博客
08-11 2437
在继续使用动态渲染技术之前，还有最后一种方法可以渲染你想要的东西，它使用内置的 JavaScript 条件：三元运算符。三元运算符经常被用作 JavaScript 中if/else语句的缩写。它们不像传统的if/else语句那样健壮，但是在 React 开发人员中非常流行，原因之一就是 JSX 的编译原理，if/else语句不能直接插入到 JSX 代码中。你可能在前几个挑战就注意到了这一点–当需要if/else语句时，它总是在return语句外面。如果你想在 JSX 中实现条件逻辑，三元表达式是一个很好的选
react-draggable-tags组件如何使用
最新发布
04-27
react-draggable-tags 是一个 React 组件，用于实现可拖拽的标签列表。使用 react-draggable-tags 组件，你需要先安装该组件，可以使用 npm 安装，命令如下： ``` npm install react-draggable-tags ``` 接着，在项目中导入 react-draggable-tags 组件，代码如下： ```jsx import React, { useState } from 'react'; import DraggableTags from 'react-draggable-tags'; function App() { const [tags, setTags] = useState([ { id: 1, text: 'React' }, { id: 2, text: 'Vue' }, { id: 3, text: 'Angular' }, ]); const handleTagsChange = (tags) => { setTags(tags); }; return ( <DraggableTags tags={tags} handleTagsChange={handleTagsChange} /> ); } export default App; ``` 在上面的代码中，我们首先使用 useState 定义了一个 tags 状态，用于存储标签列表。接着，我们通过 DraggableTags 组件渲染了一个可拖拽的标签列表，并通过 handleTagsChange 回调函数来处理标签列表的变化。 最后，需要注意的是，react-draggable-tags 组件的样式需要自己定义或者引用外部样式库。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值