小胖墩er

一、refs的理解组件内的标签可以定义ref属性来标识自己，就比如原生中通过document获取dom元素的方法，这里ref获取的是虚拟DOM转换为真实的DOM，而不是获取虚拟DOM。 此属性可以是一个由 React.createRef() 函数创建的对象、或者一个回调函数、或者一个字符串（遗留 API）。当 ref 属性是一个回调函数时，此函数会（根据元素的类型）接收底层 DOM 元素或 class 实例作为其参数。这能够让你直接访问 DOM 元素或组件实例。 为什么是Refs？ refs存放的是所有使用了ref标识的对象 何时使用 Refs？ 下面是几个适合使用 refs 的情况： 管理焦点，文本选择或媒体播放。 触发强制动画。 集成第三方 DOM 库。 避免使用 refs 来做任何可以通过声明式实现来完成的事情。 举个例子，避免在 Dialog 组件里暴露 open() 和 close() 方法，最好传递 isOpen 属性。 注意: 不要过度使用Refs 二、字符串形式的ref定义： 直接在标签中写上ref="xxx" 使用： this ...

props的介绍当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件，这个对象称之为“props”。 函数声明的组件，会接受一个props形参，获取属性传递的参数 123function ComponentA(props) { return <div>我是组件B:{props.value}</div>} 如果函数组件需要props功能，一定不能缺少该形参类的声明,在react组建中,使用constructor 获取Component类的props属性当组件继承了父类props后，就可以通过this.props属性名进行属性传值 12345678class ComponentB extends React.Component { constructor(props) { super(props); } render() { return <div>我是组件B {this.pro ...

state的理解React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。 向组件中添加局部状态: 组件的局部状态(16.8版本之前)只存在于class声明的组件,函数声明的组件无state 所以我们称函数声明的组建为无状态组件,16.8版本后react 添加了Hook的概念让函数组件拥有了局部状态(无状态组件说法就被舍弃了) 除了使用外部数据（通过 this.props 访问）以外，组件还可以维护其内部的状态数据（通过 this.state 访问）。当组件的状态数据改变时，组件会再次调用 render() 方法重新渲染对应的标记。 12345678910111213141516171819202122232425// 1、创建类组件class ComponentA extends React.Component { constructor(props) { super(props); // 初始化状态 this.state = & ...

React安装React可以直接下载使用,也可以使用React CDN库,地址如下 1234<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>// 将jsx语言转移为es5代码 <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> 通过npm或者yarn在已有项目中添加React支持 12345# 使用yarn: $ yarn add react react-dom # 使用npm: $ npm install --save r ...

React Hooks原理 作者：在剥我的壳 链接：https://juejin.cn/post/6982755396976902158 函数组件执行函数 执行函数组件 renderWithHooks 改变 ReactCurrentDispatcher 对象 初始化hooks 通过 mountWorkInProgressHook 生成hooks链表 通过 mountState 来初始化 useState 通过 dispatchAction 来控制无状态组件的更新 通过 mountEffect 初始化 useEffect 通过 mountMemo 初始化 useMemo 通过 mountRef 初始化 useRef 更新hooks 通过 updateWorkInProgressHook 找到对应的 hooks 更新 hooks 链表 通过 updateState 得到最新的 state 通过 updateEffect 更新 updateQueue 通过 updateMemo 判断 deps，获取or更新缓存值 通过 update 获取 ref 对象 当你使用了ho ...

React17新版本概念React17.0新特性(与3年前的16版本相比没有新特性）虽然没有新功能，但是具有战略意义 17概念1、替换了底层的代码，向下兼容、同时甩掉了历史的包袱。 17概念2、没有代码的断层，给未来留下了足够的升级空间 17概念3、react17支持渐进式的升级(逐步升级)方案，在17以前是不支持两个版本混搭的，但是在17以后可以采取逐步升级，允许多个版本共存 比如（我们可以先升级路由系统，再升级弹窗，这样平滑的过渡到最新的版本） Breaking Changes 事件委托机制的改变 向原生浏览器靠拢 删除事件池 hooks的副作用 useEffect清理操作从同步操作改为了异步操作（useEffect本身是异步操作，但是在过去的版本中，它的清理操作是同步的，这种不统一，导致UI的渲染效率慢），所以在17中，改为了异步操作，React会马上释放资源，不会产生UI阻塞的问题了 JSX不可返回undefined（在17以后，render函数必须是有明确的返回对象的，这个修订的初衷是为了防止程序员在开发的时候，忘记写render） 删除部分私有的API React未来 ...

介绍sass基于Ruby语言开发而成css扩展语言，.less使用less.js在浏览器端编译less文件而使用sass是不支持浏览器端编译sass文件。如果不适用前端工程化编译sass,sass一般是在服务器端渲染的这样会影响到服务器的性能。 安装安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!） window下安装SASS首先需要安装Ruby，先从官网下载Ruby并安装。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。 安装完成后在命令行中输入指令查看ruby版本号,如果输出当前ruby版本号表示安装成功: 1ruby -v 将ruby gem管理工具切换到国内镜像源 1gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/ 切换为国内镜像源后,查看是否切换成功保证,gem只有一个国内镜像源 12//打印是否替换成功 gem sources -l # 确保只有 gems.ruby-china.co ...

介绍less 是CSS扩展语言（预编译语言），使 CSS 更易维护和扩展。less是基于js开发的，在node中或者引入less.js文件进行转义，推荐使用node将less文件转换为css文件而不是直接在浏览器端使用less。将less.js引入到前端页面对less进行编译中会增加浏览器负担。 安装less依赖将npm源设置为国内淘宝镜像 1npm config set registry https://registry.npm.taobao.org 全局安装 less依赖支持 1npm install -g less 变量概念： less允许开发人员使用编程语言一样声明变量，用来存储那些被认为在开发中经常会被重复使用的数据（如：主题颜色，常用标题字体大小） 语法： @变量名 : 变量值 ; 注意 less 支持使用@{变量}形式进行字符串拼接,该模式可以应用在选择器、属性名和url上使用 2. less自身支持基本运算同时中变量也支持基本运算 + - * / % 对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算 ...

12345678910111213141516let arr = [ { name: '小猫咪', age: '18' }, { name: '阿花', age: '18' }]let obj = {}for (let i = 0; i < arr.length; i ++) { // 如果是数字的话转一下就会带上引号 obj[JSON.stringify(arr[i].name)] = arr[i].age}console.log(obj); 重点：obj[b[item].uuid] = b[item].name

1var obj = {}; 1、toString（推荐），只有当参数为{} 或者 new Object()时才会成立。 1Object.prototype.toString.call(obj) === '[object Object]' 2、constructor，使用该函数也能判断是否是对象，但是当参数为null时，会出现错误。 1obj.constructor === Object 3、instanceof 需要注意的是由于数组也是对象，因此用 arr instanceof Object 也为true。 1obj instanceof Object 4、typeof 123456789101112typeof obj === Object// 根据typeof判断对象也不太准确表达式 参数值 返回值typeof undefined 'undefined'typeof null 'object'typeof true ...