ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

react-react学习笔记

2022-09-15 21:33:39  阅读:345  来源: 互联网

标签:学习 函数 标签 笔记 js react hook 组件


react

创建react项目

img


react项目的入口文件

img

  1. 红色框index.js

  2. src文件夹除了这个index.js其余的文件都是可以删除


ReactDom.render()函数

img

  1. 两个参数

  2. 第一个就是要挂载的标签

  3. 第二个就是要挂载到哪里


jsx结尾表示是组件

img

  1. 首字母大写的jsx结尾的文件是react中的一个组件

  2. 如果是js结尾的文字,那么就是一个纯js的文件


组件的导入和导出

img


react中的mustache语法

img

  1. 注意是一个大括号

jsx

vscode中jsx的配置

img


react中label标签的for

img

  1. 因为label中的for和js语法中的for冲突了

  2. 所以这里换成了htmlFor


jsx中的class

img

  1. 因为标签的类名class和js语法中的class冲突

  2. 所以这里换成了className


jsx中样式的写法

img

  1. 为什么是两个大括号

  2. 其实里面括号是一个对象

  3. 然后看起来就像是用了双大括号的形式


为什么是双大括号的理解

img

  1. 相当于一个JavaScript对象填入到这个大括号里面

react中的根标签

img

  1. 在vue2中必须要有一个根标签

  2. 在react中这个根标签可以是空标签


大括号中写js代码

img

  1. 这个有点像以前jsp的语法

react中的for循环指令

img

  1. 为什么要用map循环,而不用for循环

  2. 因为map循环可以返回值

  3. 而for循环没有,所以一般都是使用for循环

  4. img


react插件的快捷语法指令rcc和rfc

img

  1. rcc是类组件

  2. rfc是函数式组件


++和+1的区别

img

  1. ++的相当于修改了num之后,然后赋值给num,

  2. 相当于修改了两次

  3. 而+1,就是只有一次赋值给num


state的等价写法

img

  1. 红色框和橙色框是等价写法

  2. 保留其中一个即可

  3. 橙色框是简写


函数式组件的写法及特点

img


hook

hook的返回值

img

  1. 红色框,hook的返回值,是个有两个值的数组,

  2. 第一个就是穿进去的参数

  3. 第二个就是一个函数

  4. hook的位置只能在函数组件的最顶层


hook的使用思路

img

  1. 点击button按钮,调用fn函数

  2. fn函数去调用hook返回的函数来修改msg

  3. 这样触发视图的更新

  4. 前面有个例子就是直接修改也是可以的,但是不能触发视图更新,

  5. 所以hook返回的函数的作用,就是可以起到修改变量和更新视图的作用


hook更直接的使用方法

img


生命周期

函数式组件模拟mounted() 生命周期

img


指定数据更新的检测

img

  1. 数组中的变量更新,就回被检测到,相当于updated的生命周期

  2. 如果没有第二个参数,那么所有的变量都会被检测

  3. 如果是空数组,那么不会检测任何变量


第二个参数的三种情况

img

  1. 看注释

模拟beforeDestory 生命周期

img

  1. 里面又返回一个函数

组件传值

组件传值-父子组件

img

  1. App3组件通过属性传递到Father组件

组件传值-三级传递

img


父组件传递方法给子组件

img

  1. 子组件中调用父组件的方法修改父组件中的数据

传参的问题

img


使用上下文空间-跨组件传值

img

  1. 类似vue中的provide和inject

续上,子组件中需要使用标签包裹接受

img

  1. 上个标题的图有错误,整个是正确的写法

传递多个值是封装成一个对象

img


也可以先解构在使用

img


受控组件和不受控组件

img

img


标签:学习,函数,标签,笔记,js,react,hook,组件
来源: https://www.cnblogs.com/zhuoss/p/16698001.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有