Jingjing 的个人主页 - 动态

关注了

2年前

前端状态管理之Piana

当项目中有多个组件共享某些状态的时候，使用父子组件传值或是组件间传值会非常麻烦，并且数据不易维护。除了在项目中定义全局变量，还可以使用状态管理库来进行共享状态管理，使数据持...

1

#每天一个知识点# react中refs是什么？
refs是提供一种访问在render方法中创建DOM节点或者React元素的方法，在典型的数据流中，props是父子组件交互的唯一方式，想要修改子组件，需要使用新的props重新渲染它，某些情况下，在典型的数据流外，强制修改子代，这个时候可以使用refs

我们可以在组件添加一个ref属性来使用，该属性是一个回调函数，接收作为其第一个参数的底层DOM元素或组件挂载实例

input元素有一个ref属性，他的值是一个函数，该函数接收输入的实际DOM元素，然后将其放在实例上，这样就可以在 handleSubmit 函数内部访问它

经常被误解的只有在类组件中才能使用 refs，但是refs也可以通过利用 JS 中的闭包与函数组件一起使用

展开

前端开发圈

2年前

#日新计划更文活动# state和props区别是什么？
相同点：都是普通的js对象，他们包含着影响渲染输出的信息
不同点：state是组件自己管理数据，控制自己的状态，可变
props是外部传入的数据参数，不可变
没有state的叫做无状态组件，有state的叫有状态组件

前端开发圈

赞了这篇文章

不知名前端 @一个很体面的公司

·

2年前

为什么面试官这么爱问性能优化？

笔者是一个六年前端，没有大厂经历，也没有什么出彩的项目，所以今年以来，前端现在这种行情下并没有收到多少面试，但是为数不多的面试中，百分之九十都问到了性能优化的问题，而且问题...

1.3k

228

2年前

#每天一个知识点# 类组件和函数组件之间的区别是什么？
类组件可以使用其他特性，如状态和生命周期钩子，并且他有this

函数组件只能接收props渲染到页面，无状态组件，没有this，不能使用生命周期钩子

函数组件性能要高于类组件，因为类组件使用要实例化，而函数组件直接执行取返回结果即可，为了提高性能，尽量使用函数组件

展开

前端开发圈

2年前

#每天一个知识点# Node.js如何克服I/O操作阻塞的问题？

由于节点有一个事件循环，可用于以异步方式处理所有 I/O 操作，而不会阻塞 main 函数。
因此，例如，如果需要进行一些网络调用，它将被安排在事件循环中，而不是主线程（单线程）中。
如果有多个这样的 I/O 调用，每个调用都会相应地排队分别执行（除了主线程）。
因此，即使我们有单线程 JS，I/O 操作也是以非阻塞方式处理的。

展开

前端开发圈

2年前

#每天一个知识点# 你了解 Node. js吗？

Node. js是一个基于 Chrome v8引擎的服务器端 JavaScript运行环境；Node. js是一个事件驱动、非阻塞式I/O的模型，轻量而又高效；Node. js的包管理器npm是全球最大的开源库生态系统。

展开

前端开发圈

2年前

#每天一个知识点# diff 算法是什么？
diff算法是一种通过同层的树节点进行比较的高效算法
其有两个特点：
比较只会在同层级进行, 不会跨层级比较
在diff比较的过程中，循环从两边向中间比较

前端开发圈

2年前

#每天一个知识点# Vue.set方法是如何实现的?
vue给对象和数组本身都增加了dep属性。当给对象新增不存在的属性的时候，就会触发对象依赖的watcher去更新。当修改数组索引的时候，就调用数组本身的splice方法去更新数组

前端开发圈

2年前

#每天一个知识点# React的diff原理

传统diff算法
需要遍历整棵树的节点然后进行比较，是一个深度递归的过程，运算复杂度常常是O(n^3)

react diff的优化策略

DOM节点跨层级的操作不做优化，因为很少这么做，这是针对的tree层级的策略；

对于同一个类的组件，会生成相似的树形结构，对于不同类的组件，生成不同的树形结构，这是针对conponent层级的策略；

对于同一级的子节点，拥有同层唯一的key值，来做删除、插入、移动的操作，这是针对element层级的策略

展开

前端开发圈

2年前

#每天一个知识点# 什么是受控组件？
在 HTML 中，表单元素如 <input>、<textarea>和<select>通常维护自己的状态，并根据用户输入进行更新。当用户提交表单时，来自上述元素的值将随表单一起发送。

而 React 的工作方式则不同。包含表单的组件将跟踪其状态中的输入值，并在每次回调函数(例如onChange)触发时重新渲染组件，因为状态被更新。以这种方式由 React 控制其值的输入表单元素称为受控组件。

展开

前端开发圈

赞过

1

2

2年前

#每天一个知识点# 不会改变原数组的操作

concat---连接两个或更多的数组，并返回结果。

every---检测数组元素的每个元素是否都符合条件。

some---检测数组元素中是否有元素符合指定条件。

filter---检测数组元素，并返回符合条件所有元素的数组。

indexOf---搜索数组中的元素，并返回它所在的位置。

join---把数组的所有元素放入一个字符串。

toString---把数组转换为字符串，并返回结果。

lastIndexOf---返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

map---通过指定函数处理数组的每个元素，并返回处理后的数组。

slice---选取数组的的一部分，并返回一个新数组。

valueOf---返回数组对象的原始值

展开

前端开发圈

2年前

#每天一个知识点# React 组件的生命周期方法？
一些常见的生命周期方法包括：
componentDidMount：在组件添加到 DOM 后调用。

shouldComponentUpdate：在组件更新之前调用，避免不必要的更新。

componentDidUpdate：在组件更新后调用。

componentWillUnmount：在组件从 DOM 中移除之前调用。

展开

前端开发圈