![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
react相关内容存放位置
合法的咸鱼
我太懒了
展开
-
react-Effect Hook
细节。原创 2022-08-08 10:17:36 · 255 阅读 · 0 评论 -
react-state hook
state hook是一个在使用的函数(useState),用于在函数组件中使用状态。原创 2022-08-05 16:43:05 · 275 阅读 · 0 评论 -
react-严格模式
在React18中,React将不会抑制任何日志,如果你安装了devtools,第二次输入将会被淡化,在devtools工具中可以屏蔽第二次输出。还要注意一下,由于componentDidMount等函数会被放入执行队列,所以就算关闭了第二次输出,函数里面的打印在严格模式下还是会输出两次。),本质是一个组件,该组件不会进行UI渲染,它的作用是在渲染内部组件时,发现不合适的代码。在严格模式下(开发阶段),组件的生命周期会被调用两次,以此来明显化副作用代码。方法,在第二次调用生命周期函数时,将会静默输出。...原创 2022-08-05 15:01:42 · 2012 阅读 · 0 评论 -
react-节点更新与销毁
相同的节点类型: 节点本身类型相同(不管属性,虚拟DOM树更新前后节点都为div则相同,前为div后为p则不相同),如果是react元素则要求type值必须一致。key值的作用: 用于通过旧节点,寻找对应的新节点,如果某个旧节点由key值,则其更新时,会在相同层级中找相同的key值进行对比。将心产生的节点,对比之前虚拟DOM树中的节点,发现差异,完成更新。: 直接放弃该节点,如果节点有子节点,递归卸载节点。4. 运行render,得到新的节点对象,进行。: 重新调用函数,得到一个新的节点对象,进行。...原创 2022-08-05 10:52:50 · 1783 阅读 · 0 评论 -
react-渲染过程--新节点挂载
渲染: 生成用于显示的对象, 以及将这些对象转化为真实的dom对象。原创 2022-08-04 13:35:14 · 522 阅读 · 2 评论 -
react-错误边界
react组件发生错误时,会层层向上传递直至根组件,设置一个错误边界组件可以防止错误继续向上传递,避免组件树被销毁。原创 2022-08-03 16:16:39 · 281 阅读 · 0 评论 -
react-PureComponent
PureComponent是一个组件,如果某个组件继承自它,则该组件的shouldComponentUpdate会进行优化,对属性和状态进行。优化: 如果一个组件的状态和属性都没有发生变化,那么就没有必要重新渲染。用于避免不必要的渲染(运行render函数),如果相等则不会重新渲染。...原创 2022-08-03 14:39:45 · 435 阅读 · 0 评论 -
react-context新版api
如果上下文提供者(Provider)的value属性发生变化(Object.is判断为否),会导致该上下文的所有后代全部重新渲染,就算使用了shouldComponentUpdate优化也不行,原因是强制渲染,不运行shouldComponentUpdate。上下文是一个独立于组件的对象,该对象通过React.createContext(默认值)创建,返回的是一个包含两个属性的对象,这俩对象是俩React组件。注意: 同一个Provider不要用到多个组件当中。...原创 2022-08-03 11:18:02 · 181 阅读 · 0 评论 -
react-context旧版API
我觉得我在放屁但是我还得说下,上下文只能是先代创建后代使用,非先后代关系不可使用。原创 2022-08-02 15:44:41 · 243 阅读 · 0 评论 -
react-ref与ref转发
场景希望直接使用dom元素中的某个方法(如focus),或者希望直接使用自定义组件中的某个方法。通过React.createRef创建。目前,ref推荐使用对象或者函数。未来可能会移除这种赋值方式。高阶组件withLog.js。...原创 2022-08-02 14:28:46 · 334 阅读 · 0 评论 -
react-HOC
高阶组件接收一个组件作为参数,返回一个组件。原创 2022-08-02 10:12:08 · 111 阅读 · 0 评论 -
react-属性默认值与类型验证
ps安装React会自动安装这个库,不需要额外安装,直接引用就行。react提供了属性默认值的设置方法。原创 2022-08-01 16:36:26 · 572 阅读 · 0 评论 -
react-表单
type为text,password,textarea,还有select选择器设置value属性即可转化为受控组件。非受控组件组件的内容元素等只受该组件控制,使用者不可控制。radio与checkbox则需要设置checked属性。原创 2022-08-01 13:55:36 · 225 阅读 · 0 评论 -
react-新旧生命周期
react新旧生命周期原创 2022-07-28 14:56:56 · 232 阅读 · 0 评论 -
react-事件
react事件的本质其实就是一个属性下例中,模拟当倒计时结束时调用父组件的onOver事件index.js这里会有一个this指向问题,需要注意一下解决this指向问题还有别的办法,自行百度state={isOverfalse//倒计时是否完成}//当写成箭头函数时,将会绑定到对象上而不是原型上//传入子组件不会产生this问题handleOver=()=>{isOverTick.js//倒计时importReact,{...原创 2022-07-27 16:37:46 · 137 阅读 · 0 评论 -
react-组件状态练习-移动的小球球
react-组件状态练习-移动的小球球。原创 2022-07-27 15:38:31 · 253 阅读 · 0 评论 -
react-组件状态
倒计时组件Tick.jsindex.js。原创 2022-07-27 14:48:11 · 254 阅读 · 0 评论 -
react-组件
类组件的属性会被传入constructor的参数中。函数组件的属性会被传入函数的参数。原创 2022-07-27 10:43:49 · 136 阅读 · 0 评论 -
react-图片切换练习
注意点react中图片引用不能直接写入src属性,需要先导入。原创 2022-07-27 09:11:59 · 639 阅读 · 0 评论 -
react-jsx语法相关
null,undefined,false,true不会被渲染到页面上。当你在某种情况下不得不写两个元素且不想页面上多显示一个根节点。可以使用React.Fragment简写为原创 2022-07-26 15:18:36 · 84 阅读 · 0 评论 -
react-vscode相关配置
文件->首选项->设置—搜索emmet—找到EmmetIncludeLanguages。看个人习惯,推荐安装,早养成良好的代码风格。现在可以在js文件中快速生成html标签。react快速代码表编写,建议安装。点击添加项—输入如下内容。...原创 2022-07-26 14:03:21 · 210 阅读 · 0 评论 -
React-Hello World
参数1元素类型,如果是个字符串,则表示一个普通的html元素(React元素)*React.createElement(参数1,参数2,剩余参数...)*ReactDOM.render(挂载内容,挂载节点)*创建一个React元素,方式1。*参数2元素属性,一个对象。*剩余参数该元素子节点。*ReactDOM库。注意script的type。'这是一个span元素'...原创 2022-07-26 13:15:54 · 111 阅读 · 0 评论