react 相关

react 虚拟dom

虚拟dom是什么
虚拟dom相当于在js和真实dom中间加了一个缓存。利用dom diff算法避免没必要的dom操作。从而提高性能。
实现过程
1. 用js对象结构表示dom树的结构。
2. 用这个树构建一个真正的dom树，当状态变化时，重新构建一个新树。
3. 用新树和旧树比较，记录两颗树的差异并应用到真正的dom上。
1
2
3
4
5
6

虚拟dom和真实dom区别

减少dom操作，虚拟dom将多次操作合并为一次。
真实dom：

1. 更新缓慢。
2. 可以直接更新html
3. 如果元素更新创建新dom
4. dom操作代价高
5. 内存消耗大

虚拟dom：

1. 更新更快
2. 无法直接更新html
3. 如果元素更新，更新jsx
4. dom操作简单。
5. 很少的内存消耗。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

react组件通信

1. 父传子：通过props
2. 子传父：props+回调。父组件将函数传递给子组件。子组件调用函数并传递参数。
3. 兄弟传值：由父节点转发。
4. 跨层通信：context。
5. 发布-订阅：
6. 全局状态管理工具：redux或mobx。
1
2
3
4
5
6
7

redux原理

redux是前端最热门的js库之一，是js的状态容器。用于整个应用的状态管理。
数据如何通过redux传递：

1. 首先，用户发出action，通过dispatch发送。
2. 然后，store自动调用reducer，并且传入两个参数：当前state和收到的action，reducer返回新的state
3. state一旦变化就调用，store调用监听函数，更新view。

redux 原则：

1. 单一事实来源：整个应用状态存储在单一store中的对象里。
2. 状态只读：改变状态的唯一方式是触发action
3. 使用纯函数更改：指定状态如何通过操作转换。

对“单一事实来源”的理解：
store将状态存储在同一个地方，更容易追踪，调试，检查。
redux组成

1. action - 定义事件
2. reducer - 
3. store 
4. view

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

React生命周期

React生命周期三个阶段：
1. 初始渲染阶段：这是组件即将开始进入dom的阶段。
2. 更新阶段：一旦组件被添加到dom，它只有在props或状态变化时才可能更新dom。
3. 卸载阶段：组件生命周期最后的阶段，组件被销毁并从dom中移除。

1
2
3
4
5

React生命周期函数

挂载阶段：
1. constructor：构造函数，最先被执行。
2. getDerivedStateFromProps：属性改变，想要修改state时使用。
3. render：纯函数，只返回需要渲染的东西。
4. componentDidMount：组件挂载后执行。

更新阶段：

1. getDerivedStateFromProps：prop更新，state未更新。
2. shouldComponentUpdate：prop和state更新了，返回true表示触发重新渲染，返回false表示不重新渲染。
3. render
4. componentDidUpdate： 组件更新后执行。

卸载阶段:

1. componentWilUnmount：组件被销毁时执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

react router

<switch>
    <route exact="" path="’/’" component="{Home}/">
    <route path="’/posts/:id’" component="{Newpost}/">
    <route path="’/posts’" component="{Post}/">
</route>
</route>
</route>
</switch>
什么是react router
react 路由是构建在react上的路由库，使url与网页上显示的数据保持同步。用于开发单页web应用。
为什么需要react router
router用于定义多个路由，当url与router内的路由匹配时，用户会被重定向到特定路由。
为什么router需要switch
switch可以使当url按顺序匹配路由，找到第一个项后，渲染指定路径。
1
2
3
4
5
6
7
8
9
10
11
12
13
14

hooks优点

1. 更容易复用代码，解决类组件难以复用逻辑的问题。类组件复用方式是高阶组件和renderProps。hooks复用的方式
每调用一次都会生成一个状态，虽然状态和副作用的存在依赖于组件，但他们可以在组件外定义。
2. 代码更清爽。函数式编程风格，函数式组件、状态保存在运行环境、每个功能包裹在函数中。
3. 代码量更少，向props取值更简单，函数组件的取值直接从父级作用域取，类组件需要先访问this，再访问state和props。更改状态从this.setState({count:1})变成了setCount
4. 更容易发现无用的状态和函数。
5. 更容易拆分组件，函数组件写小组件比类组件方便。

缺点：

1. useEffect 的依赖参数不好写，useEffect容易出错，它是响应式的，当某个依赖项变化时才会被调用。
2. 状态不同步，每个函数有一份独立的作用域，当处理复杂逻辑时，会碰到引用不是最新的问题。
1
2
3
4
5
6
7
8
9
10
11

为什么浏览器无法读取jsx

浏览器只能处理js对象，不能读取jsx，为了使用浏览器能读取jsx，使用babel转换器，转为js，然后传给浏览器。
1

你对refs的理解

处理对React元素或组件的引用。当需要进行dom测量或向组件添加方法时有用。
应用：
1. 管理焦点、选择文本；
2. 触发式动画；
3. 与第三方继承。
1
2
3
4
5

React事件绑定原理

React并不是将click绑定到该div的真实dom上，而是在document处监听所有事件，当事件发生并冒泡至document时，react将事件内容交给真正的处理函数运行。这样减少内存消耗，还能在组件销毁时统一订阅和移除。
另外冒泡到document上的事件也不是原生浏览器事件，而是react合成事件，所以如果不想要冒泡的话要用event.preventDefault而不是event.stopPropagation。
1
2

redux-saga和mobx比较

1. 状态管理
redux-saga是redux 的一个异步处理的中间件。
mobx是数据管理库，和redux一样。
2. 设计思想
redux-saga属于flux体系，是函数式编程思想。
mobx不属于flux体系，是面向对象和响应式编程思想。
3. 特点
redux-saga因为是中间件，更关注异步处理，通过generator函数将异步变为同步，代码可读性高，结构清晰。
mobx更简单灵活，store中包含state和action。
4. 数据可变性。
redux-sage强调state不可变，不能直接操作state，通过action和reducer在原来的state基础上返回新的state。
mobx直接在方法中更改state。
5. 写法
redux-sage
1
2
3
4
5
6
7
8
9
10
11
12
13
14

setState是同步还是异步

1. setState在合成事件和钩子函数中是异步的。在原生事件和setTimeout是同步的。
2. setState的异步并不是内部由异步代码实现，其本身执行过程和代码是同步。只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法马上拿到更新后的值。当然可以通过第二个参数callback中拿到更新后的值。
3. setState的批量更新优化也是建立在异步之上。在原生事件和setTimeout中不会批量更新。
1
2
3

props和state区别

props和state都是普通js对象：

1. state是组件自己管理数据，控制自己的状态；
2. props是外部传入的数据，不可变；
3. 没有state的组件叫无状态组件，有state的组件叫有状态组件。
4. 多用props，少用state。

1
2
3
4
5
6
7

当调用setState时，react render是如何工作

虚拟dom渲染：当render方法被调用时，它返回一个新的虚拟dom结构，当调用setState时，render被再次调用。
原生dom渲染：
1
2