React笔记

最新推荐文章于 2024-05-15 16:10:38 发布

确实菜，真的爱

最新推荐文章于 2024-05-15 16:10:38 发布

阅读量194

点赞数

本文链接：https://blog.csdn.net/qq_39307266/article/details/117453766

版权

react笔记

受控组件和非受控组件
比如一个表单里有input需要获取值，两种方式，一种是ref；这就是非受控组件；一种是通过onChange事件获取。这相当于Vue的双向绑定，这就是受控组件；推荐使用受控组件，因为他没有用ref；官方说了勿过度使用ref。
渲染组件的方式
const VODM =
render(VDOM)
function APP
class APP extends —
react环境的搭建和脚手架的安装
这里
父子组件传值
父组件向子组件传值----利用props
子组件向父组件传值–其实也是props；子组件通过props获取到父组件传给他的函数，子组件把要传的值作为实参，父组件在函数里就可以获取到这个值了。
子组件之间传值
借助PubSub库
react中函数方法要传值写高阶函数

 handleChange = (id)=>{
      return ()=>{
        console.log(id)
      }
    }

  <li style={{backgroundColor:mouseEnter?"#ddd":"white"}} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}><label>
                    {/* input输入框 */}
                    <input onChange={this.handleChange(id)} type="checkbox" defaultChecked={done} />
                    <span>{name}</span></label>
                <button style={{float:"right",backgroundColor:"red",border:"none",color:"white",display:mouseEnter?"block":"none"}}>删除</button></li>

如果这里不写高阶函数，那么移入移出事件也会触发console
在这里插入图片描述
state not defined
在自己新建的react项目中，使用state会报这个错误，因为他是用的函数方法创建的组件，改成class类创建组件就不会了。
.map()

	const newTodos = todos.map((todoObj)=>{
			if(todoObj.id === id) return {...todoObj,done}
			else return todoObj
		})
		this.setState({todos:newTodos})

.map()方法返回的是一个新数组，新数组中的元素是原数组每个元素调用函数后处理的结果值。不会改变原数组，一般用一个变量来接收新的数组
.filter()
.fliter()方法返回一个新数组，新数组元素是保留经过函数处理后那些符合条件的元素，不会改变原数组
关于render
只要状态修改了，那么render函数一定会被执行
react请求数据配置代理解决跨域
第一种：”react使用axios请求数据，所以第一步是安装axios；情形：当前3000端口下请求一个5000端口的学生信息，axios.get(5000)这样一定会跨域，拿不到数据，做法是在pakage.json文件里。写一个proxy；把5000端口号的改成3000.这样就是用了一个中间代理服务器，他的端口号也是3000.但是他没有Ajax的跨域问题在这里插入图片描述
，所以能拿到数据。

但是这种方法只能配置一个代理 3000访问5000，多个解决不了，所以第二种是
在src下新建一个setUPProxy.js

发送请求
原生xhr axios jQuery 后两种都是对第一种的封装，fetch则是自带的
前端路由的基石
history
NvaLink
NAVLink和Link都是路由链接，区别是，NAVLink看名字就知道是导航路由链接，这种链接的特点是点击谁，谁就高亮，他会在你点击的时候自动追加一个active样式类，active是默认的，如果你想换一个样式，就自己写一个，然后再activeClassName写上这个样式，如果出现闪烁，是因为可能你用了bootstrap，他的权重高，在自己的样式加上！important就可以了
在这里插入图片描述

Switch
匹配到了一个路由便不会继续匹配，如果有两个路径，不用Switch就会显示两个组件。

模糊匹配和严格匹配
默认是模糊匹配，

REdirect
路由重定向，打开页面自动展示的页面，写在最下方
在这里插入图片描述

withrouter
让一般组件也能使用路由组件的api，可以实现编程式路由

组件库antd
项目下载antd，引入粘贴代码引入样式即可

按需引入
看文档 create-react-appa这块。傻瓜式，需要下载引入新的库，需要一个新的文件代码粘贴过来就行，然后就不需要引入样式文件了，删掉那段引入样式的代码即可实现按需引入。
自定义主题
antd主题默认是支付宝那种蓝色的。通过自定义主题可以修改成其他颜色的。
redux
在这里插入图片描述
redux监测
store.subscribe(()=>{
})
只要redux里的状态改变就会执行这个函数。
react-redux
渲染的是容器组件
HOOK

错误边界
由于父组件传过来的数据错误可能导致子组件内容出错从而导致整个项目不能编译，这就要用到错误边界，即忽略到这个错误，让其他正常的内容展示，但是这个东西在生产环境中起作用只是一小会儿，马上又会崩溃，那么就需要在项目build上线后才能稳定起作用
在这里插入图片描述

事件绑定

在这里插入图片描述

武汉伯钧成HR 发来的面试题

https://www.yuque.com/docs/share/0292028c-f570-4e63-a3d9-20db84cea997?# 《2021笔试题2》
react用过哪些hooks，
函数式组件的钩子添加链接描述
讲一下react的生命周期，说一下作用和在哪里使用，为什么要新增那几个生命周期函数，
添加链接描述
constructor()–完成了react数据初始化
componentWillMount()–一般用的比较少，代表数据初始化完成但是还未渲染DOM。
componentDidMount()–组件第一次渲染完成，此时DOM节点已经生成，可在这里调用Ajax请求，setstate后组件会重新渲染。
componentWillUNmount()–将要完成组件的卸载，可以清理定时器。
即将的废除的生命周期函数：
官网文档指出使用这些生命周期的代码会在未来版本的react中更容易产生bug，尤其是对于异步渲染的版本

由于未来采用异步渲染机制，所以即将在17版本中去掉的生命周期钩子函数

componentWillMount

componentWillRecieveProps

componentWIllUpdate

为什么要使用mobx
自我介绍,说一下工作经历,项目经验
React生命周期说一下
Reactv16后新增的生命周期有哪些
getDerivedStateFromProps(nextProps, prevState)
这个生命周期的意思就是根据从props中获取state,实际上就是将传入的props映射到state上面
　返回值是一个对象，这个对象的作用和setState一样用于更新state，返回值为null时，不更新state状态。提供给我们一个在渲染之前操作state的机会(慎用！)
　该方法在每次render（渲染）被调用之前调用，意味着即使你的props没有任何变化，但因为state发生了变化，导致组件重新的render，这个生命周期函数依然会被调用。(父组件渲染导致了组件的重新渲染，即使子组件接收的属性没有更新，这一方法也会被调用)。
　因为该方法为静态方法，所以内部不能使用this关键字。也就是这个函数不能通过this访问到class的属性，也并不推荐直接访问属性。而是应该通过参数提供的nextProps以及prevState来进行判断，根据新传入的props来映射到state。
————————————————

getSnapshotBeforeUpdate(prevProps, prevState)
触发时间: update发生的时候，在render之后可以读取但无法使用DOM的时候。它使您的组件可以在可能更改之前从DOM捕获一些信息（在虚拟DOM转化为真实DOM的前一刻自动调用。这个时间点getSnapshotBeforeUpdate可以用于读取即将被改变的数据）；
这一生命周期返回的任何值将会作为componentDidUpdate的第三个参数。配合componentDidUpdate, 可以覆盖componentWillUpdate的所有用法

————————————————
getDerivedStateFromError(error)
在后代组件抛出错误后调用getDerivedStateFromError生命周期。它接收作为错误信息作为参数，并应该返回一个值去更新状态。
被调用是在 “渲染” 阶段，所以不允许副作用。
componentDidCatch(error, info)
任何一处的javascript报错会触发类似于JS原生的try/catch。可以捕获错误，并处理
废弃的生命周期有?为什么废弃
React Hook了解过?用过哪些第三方Hooks
用过哪些网络请求库
了解过TS?
工程化/工具链了解过哪些
你的优势是什么
项目某个功能的具体实现

a标签href和target属性
href 是URL 跳转的新页面也可以是锚链接。。
target 常用的两个值 _self 和_blank 前者是默认值表示在当前页面跳转（新打开的页面覆盖当前页面），后者是新打开一个页面之前页面仍然保留。还有两个parent和top
h5语义化标签
header section article footer aside nav 这种语义化标准主要针对搜索引擎,

动画
flex和grid
rem和px
盒子模型

http协议
http缓存
添加链接描述

字符串截取
js中截取字符串的三个方法 substring()、substr()、slice()
substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符 string.substr(start,length)
substring() 方法用于提取字符串中介于两个指定下标之间的字符。string.substring(start,stop)
slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。string.slice(start,end) 1.slice() 方法返回的子串包括 start 处的字符，但不包括 end 处的字符。

//chrome控制台
> var a = '0123456789'
< undefined
> a.slice(1,5)
< "1234"

区别 substring（start，stop）如果 start比stop大则交换位置，若有负数则变为0 再进行上述规则
slice（start，end），如果有负数就会从末尾开始，
数组和字符串互相转换
1、数组转字符串需要将数组元素用某个字符连接成字符串，示例代码如下

var a, b;
a = [0,1,2,3,4];
b = a.join("-");      //"0-1-2-3-4"

2、字符串转数组实现方法为将字符串按某个字符切割成若干个字符串，并以数组形式返回，示例代码如下：

var str = "aaa,bbb,ccc";
strArr = str.split(",");// 在每个逗号(,)处进行分解  ["aaa", "bbb", "ccc"]
var hello = "helloworld";
helloArr = hello.split('');  //["h", "e", "l", "l", "o", "w", "o", "r", "l", "d"]

数组map
定义和用法
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。
foreach没有返回值。
排序，你自己实现的思路
ES6的说几个

本地储存
原生JS操作DOM
JQ选择器
事件冒泡
事件取消默认行为
Promise
节流
防抖

useEffect用法
受控组件和非受控组件
实现一个组件
redux
diff算法
面试问题：主要还是会结合你自己的项目来，就问了下项目相关的，遇到什么问题怎么解决的。。。然后还是会问一些基础的：闭包啊，css啊，兼容问题遇到过吗，url输入到页面渲染发生了什么，重绘回流怎么避免，前端缓存，函数组件，class组件，hook，useeffect，还有就是react原理相关的了，diff什么的，
url输入到页面渲染发生了什么

确实菜，真的爱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React笔记

react笔记受控组件和非受控组件比如一个表单里有input需要获取值，两种方式，一种是ref；这就是非受控组件；一种是通过onChange事件获取。这相当于Vue的双向绑定，这就是受控组件；推荐使用受控组件，因为他没有用ref；官方说了勿过度使用ref。...
复制链接

扫一扫