React 小技巧和一些你不知道的 JS 知识

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 分享一些react开发中的小技巧和一些JS怪异的特性

一、React 中怎么让组件多次挂载?

import { useState, useEffect } from "react";

//Com组件
function Com(props) {
  const { val } = props;
  useEffect(() => {
    console.log("执行mounted");
  }, []);
  console.log("render", val);
  return <div>{val}</div>;
}

// Com组件的父组件
function App() {
  const [val, setVal] = useState(1);

  return (
    <>
      <button onClick={() => setVal(val + 1)}>change</button>
      <Com val={val} key={val} />
    </>
  );
}

// 问题 怎么让 Com 组件 多次 挂载(mounted)?

export default App;

解决方法:

  • 在 Com 组件上添加 key 值 (推荐使用)
【key 的作用】
react 中的 key 属性,它是一个特殊的属性。
react 利用 key 来识别组件,它是一种身份标识。每个 key 对应一个组件,相同的 key ,react 认为是同一个组件,这样后续相同 key 对应的组件都不会被创建,而是会被传入新的数据,更新组件。
有了 key 属性后,就可以与组件建立了一种对应关系,react 根据 key 来决定是销毁重新创建组件还是更新组件。
  • 通过给Com组件传递一个唯一的标识
【优点】
- 组件不需要多次`mounted`
【缺点】
- 增加了代码耦合性
- 引入了额外的复杂度

二、你不知道的 js 知识

变量提升

var 关键字声明的变量,无论实际声明的位置在何处,都会被视为声明在函数的顶部(如果声明不在任意函数内,则视为在全局作用域的顶部)
Js 引擎的工作方式是,先预解析代码, 获取所有被声明的变量和函数声明,然后再一行一行地运行,这就使所有变量声明的语句,都会被提升到代码的头部,这就是变量提升

var res = (function (x, f = () => x) {
  var x;
  console.log(x); // 1
  var y;
  y = x;
  x = 2;
  return [x, y, f()];
})(1);

console.log(res); // [2, 1, 1]
var x = 1;
function f(
  x,
  y = function () {
    x = 3;
    console.log("y", x); // y 3
  }
) {
  var x;
  console.log(x); // undefined
  x = 2;
  y();
  console.log(x); // 2
}
f();
console.log(x); // 1

箭头函数没有自己的 this,取决于外层函数,call 对它来说没有任何作用。

var res1 = function () {
  console.log(this.x); //outer

  return [(() => this.x).call({ x: "inner" }), (() => this.x)()]; // ['outer', 'outer']
}.call({ x: "outer" });

console.log(res1);

字符串的迭代

var res2 = [..."..."];
// ''.split('')

console.log(res2); //es6 迭代 ['.', '.', '.']

隐式转换

var a = { x: 1 };
var b = { x: 2 };
var obj = {};

//  对象变为 key 值会默认调用 toStirng(),变成[Object Object]

console.log(a.toString()); // [object Object]
obj[a] = 100;
obj[b] = 200;

console.log(obj[a]); // 200
console.log(obj[b]); // 200
// 1 + {} 与 {} + 1的输出结果分别是什么?
console.log(1 + {}); // 1[object Object]
console.log({} + 1); // [object Object]1
// 新版 node 会全部解析成表达式

console.log(eval("1 + {}")); // 1[object Object]
console.log(eval("{} + 1")); // 1
//  旧的 eval 会根据代码顺序,做不同的解析,第二个 eval 中的`{}`被解析成了代码块
相关文章
|
1月前
|
前端开发 JavaScript 测试技术
React 中集成 Chart.js 图表库
本文介绍了如何在 React 项目中集成 Chart.js 创建动态图表,涵盖基础概念、安装步骤、代码示例及常见问题解决方法,帮助开发者轻松实现数据可视化。
42 11
|
1月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
89 10
|
1月前
|
资源调度 前端开发 数据可视化
构建高效的数据可视化仪表板:D3.js与React的融合之道
【10月更文挑战第25天】在数据驱动的时代,将复杂的数据集转换为直观、互动式的可视化表示已成为一项至关重要的技能。本文深入探讨了如何结合D3.js的强大可视化功能和React框架的响应式特性来构建高效、动态的数据可视化仪表板。文章首先介绍了D3.js和React的基础知识,然后通过一个实际的项目案例,详细阐述了如何将两者结合使用,并提供了实用的代码示例。无论你是数据科学家、前端开发者还是可视化爱好者,这篇文章都将为你提供宝贵的洞见和实用技能。
67 5
|
1月前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
37 1
|
1月前
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue:一场性能与易用性的较量
JavaScript框架React vs. Vue:一场性能与易用性的较量
36 0
|
2月前
|
开发框架 前端开发 JavaScript
React、Vue.js 和 Angular主流前端框架和选择指南
在当今的前端开发领域,选择合适的框架对于项目的成功至关重要。本文将介绍几个主流的前端框架——React、Vue.js 和 Angular,探讨它们各自的特点、开发场景、优缺点,并提供选择框架的建议。
67 6
|
3月前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么?
React 和 Vue.js 框架的区别是什么?
|
3月前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
166 4
|
1月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
26 1
JavaScript中的原型 保姆级文章一文搞懂
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
105 2