一.讲下redux的核心概念和⼯作流程?
核心概念:
Store:保存数据的地⽅,你可以把它看成⼀个容器,整个应⽤只能有⼀个Store;State:Store对象包含所有数据,如果想得到某个时点的数据,就要对Store⽣成快照,这种时点的数据集合,就叫State;Action:State的变化,会导致View的变化。但是,⽤户接触不到State,只能接触到View。所以,State的变化必须是View导致的。Action就是View发出的通知,表示State应该要发⽣变化了;Action Creator:View要发送多少种消息,就会有多少种Action。如果都⼿写,会很麻烦,所以我们定义⼀个函数来⽣成Action,这个函数就叫Action Creator;Reducer:Store收到Action以后,必须给出⼀个新的State,这样View才会发⽣变化。这种State的计算过程就叫做Reducer。Reducer是⼀个函数,它接受Action和当前State作为参数,返回⼀个新的State;dispatch:是View发出Action的唯⼀⽅法。
然后我们过下整个⼯作流程:
- ⾸先,⽤户(通过
View)发出Action,发出⽅式就⽤到了dispatch⽅法; - 然后,
Store⾃动调⽤Reducer,并且传⼊两个参数:当前State和收到的Action,Reducer会返回新的State; State⼀旦有变化,Store就会调⽤监听函数,来更新View。
到这⼉为⽌,⼀次⽤户交互流程结束。可以看到,在整个流程中数据都是单向流动的,这种⽅式保证了流程的清晰。
二.React中key作用是什么?
目的:帮助 React 跟踪哪些项目已更改、添加或从列表中删除。在diff算法中,key用来判断该元素节点是被 移动过来的还是新创建元素,减少不必要的元素重复渲染。
三.React组件生命周期的阶段是什么?
React 组件的生命周期有三个不同的阶段:
- 初始渲染阶段:这是组件即将开始其生命之旅并进入 DOM 的阶段。
- 更新阶段:一旦组件被添加到 DOM,它只有在 prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段。
- 卸载阶段:这是组件生命周期的最后阶段,组件被销毁并从 DOM 中删除。
四.简单聊聊生命周期(指出(组件)生命周期方法的不同)
constuctor:在构造函数中初始化props和statecomponentWillMount–在组件渲染之前执行,对state进行最后的修改 render:渲染componentDidMount– 在组件渲染之后执行componentWillReceiveProps– 这个周期函数作用于特定的 prop 改变导致的 state 转换shouldComponentUpdate--用来做性能优化的,根据特定条件返回 true 或
false。如果你希望更新组件,请返回true 否则返回 false。默认情况下,它返回 false。componentWillUpdate– 数据在改变之前执行componentDidUpdate--渲染发生后立即调用componentWillUnmount– 从 DOM 卸载组件后调用。用于清理内存空间
五.区分Real DOM和Virtual DOM
| Real DOM | Virtual DOM |
|---|---|
| 1.更新缓慢 | 1.更新更快 |
| 2.可以直接更新HTML | 2.无法直接更新HTML |
| 3.如果元素更新,则创建新DOM | 3.如果元素更新,则更新JSX |
| 4.DOM操作代价很高 | 4.DOM操作很简单 |
| 5.消耗的内存较多 | 5.很少消耗内存 |
六.区分有状态和无状态组件。
| 有状态组件 | 无状态组件 |
|---|---|
| 1.在内存中存储有关组件状态变化的信息 | 1.计算组件的内部状态 |
| 2.有权改变状态 | 2. 无权改变状态 |
| 3. 包含过去、现在和未来可能的状态变化情况 | 3. 不包含过去,现在和未来可能发生的状态变化情况 |
| 4. 接受无状态组件状态变化要求的通知,然后将 props 发送给他们。 | 4.从有状态组件接收 props 并将其视为回调函数。 |
七.React中的合成事件是什么?
合成事件是围绕浏览器原生事件充当跨浏览器包装器的对象。它们将不同浏览器的行为合并为一个 API。这样做是为了确保事件在不同浏览器中显示一致的属性。
八.你对 React 的 refs 有什么了解?
refs是提供一种方式让我们访问DOM节点或在render方法中创建React元素,在某些特殊的情况下,能够获取到组件实例或者DOM元素进行操作
九.当你调用setState的时候,发生了什么事?
当调用 setState 时,React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态。这将启动一个称为和解(reconciliation)的过程。和解(reconciliation)的最终目标是以最有效的方式,根据这个新的状态来更新UI。 为此,React将构建一个新的 React 元素树(您可以将其视为 UI 的对象表示)。
一旦有了这个树,为了弄清 UI 如何响应新的状态而改变,React 会将这个新树与上一个元素树相比较( diff )。
通过这样做, React 将会知道发生的确切变化,并且通过了解发生什么变化,只需在绝对必要的情况下进行更新即可最小化 UI 的占用空间。
本文深入探讨了Redux的核心概念,包括Store、State、Action、ActionCreator和Reducer,以及它们在工作流程中的作用。同时,解释了React中的key属性对于优化组件更新的重要性。详细阐述了React组件的生命周期,以及有状态和无状态组件的区别。此外,还介绍了React的合成事件和refs特性,以及当调用setState时React的处理过程。最后,总结了RealDOM与VirtualDOM的区别以及它们各自的特点。
655

被折叠的 条评论
为什么被折叠?



