06 2022 档案
摘要:jsx语法的转化过程 jsx仅仅是createElement()方法的语法糖 jsx语法会被 @balel/preset-react插件编译为createElement()方法 组件的更新机制 setState的两个作用 1.修改state 2.更新组件ui 父组件在重新渲染的时候 子组件也会重新渲
阅读全文
摘要:#### seacrch 表单完成的功能 ``` 1.根据配置json配置项自动生成表单 ok 2.是响应式的排版 ok 3.点击搜索按钮会向上抛出值 ok 4.点击重置按钮会自动清空数据,不需要父组件额外的处理 ok 5.调整按钮靠右,使用flex的填充属性 ok 6.给下拉框绑定了事件 ok 7
阅读全文
摘要:栅格系统的设计理念 建议横向排列的盒子数量最多四个,最少一个。 因此我们的span一般设置为3或者4 小屏幕的话就另当别论了 栅格系统的简单介绍 1.通过row在水平方向建立一组column(简写 col) 你的内容应当放置于col内,并且只有col可以作为row的直接元素。 这个非常重要 <a-r
阅读全文
摘要:setState跟新数据是同步还是异步? setState跟新数据是异步的。 如何用代码表现出来是异步的。 点击按钮更新数据,然后去打印这个值看一下 setState跟新数据是异步的 class Father extends React.Component{ state = { num:0 } ad
阅读全文
摘要:定义指令的变化 根据vue3文档的描述 https://v3.cn.vuejs.org/guide/migration/introduction.html#%E6%B8%B2%E6%9F%93%E5%87%BD%E6%95%B0 自定义指令的 API 已更改为与组件生命周期一致。 且 binding
阅读全文
摘要:React组件复用 React组件复用的方式有两种: 1.render Props模式 2.高阶组件HOC 上面说的这两种方式并不是新的APi。 而是利用Raect自身的编码特点,演化而来的固定编码写法。 什么是render Props模式 1.把prop是一个函数并且要告诉组件要渲染什么内容的技术
阅读全文
摘要:reduce 的学习方法 array.reduce(callback(prev, currentValue, index, arr), initialValue) //简写就是下面这样的 arr.reduce(callback,[initialValue]) callback (执行数组中每个值的函
阅读全文
摘要:什么是生命周期? 从出生到成长,最后到死亡,这个过程的时间可以理解为生命周期。 React中的组件也是这么一个过程。 React的生命周期分为三个阶段:挂载期(也叫实例化期)、更新期(也叫存在期)、卸载期(也叫销毁期)。 在每个周期中React都提供了一些钩子函数。 生命周期的描述如下: 挂载期:一
阅读全文
摘要:props中的children属性 组件标签只用有子节点的时候,props就会有该属性; children的属性跟props一样的,值可以是任意值;(文本,React元素,组件,函数) 组件: <ClassCom> 传递的数据 </ClassCom> 这样的组件标签中就会有子节点 props中的ch
阅读全文
摘要:React兄弟组件之间的通信 Child2组件需要去更改Child1组件中的数据。 因为Child1和Child2是兄弟组件 所以数据和事件都放在最进的父级组件中去 兄弟组件通信的简单使用 import React from 'react'; //这个是react这个包,我们是需要的 import
阅读全文
摘要:v-memo的讲解 vue3.2中新增了一个性能优化的指令; 这个指令就是v-memo; v-memo:可以做性能优化,v-memo中值若不发生变化,整个子树的更新会被跳过。 <div v-memo="[valueA, valueB]"> ... </div> 当组件重新渲染的时候,如果 value
阅读全文
摘要:组件中的props 在react中,props的特点是: 1.可以给组件传递任意类型的数据 2.props是只读的对象,只能够读取属性的值,无法修改对象 如过我们强行修改数据,会报错,告诉我们该属性是只读属性。 ps:在类组件中,如果写了构造函数,应该将props传递给super(). 否则无法在构
阅读全文
摘要:受控组件 受控组件的步骤: 1.在state中添加一个状态,作为表单元素的value值(控制表单元素值的来源) 2.给表单元素绑定change事件,将表单元素的值设置为state的值(这样就可以控制表单元素值的变化) 受控组件的简单使用 index.js import React from 'rea
阅读全文
摘要:有状态组件和无状态组件 函数组件又叫做无状态组件,类组件又叫做有状态组件。 状态又叫做数据 函数组件没有自己的状态,只负责静态页面的展示。 我们可以理解为纯ui展示。() 类组件有自己的状态,扶着更新UI,会让页面动起来. state的基本使用 state就是数据,是组件内部的私有数据。 只能够在组
阅读全文
摘要:事件绑定 语法:on +事件名= { ()=>{ do something }} <!-- 点击事件 --> onClick={ () => { } } 注意的是:React采用的是驼峰命名法。 需要注意的是:在类组件中和函数组件中绑定事件是不同的哈 在类组件中绑定事件 <!-- 点击事件 -->
阅读全文
摘要:React 创建组件的两种方式 函数组件:使用js函数创建的组件 约定1:函数名称必须以大写字母开头 约定2:函数组件必须要有返回值. 如果返回值为null.表示不渲染任何内容。 return null [什么都不会渲染了] 如果没有return会报错的哈 怎么使用函数组件呢? 直接使用函数名作为组
阅读全文