面试二之React整理

React整理

1.介绍

React是有Facebook开发的前端js库，相比较与我们通常所理解的MVC，它其实并不完整，而是MVC中的C层。
它的突出特点是使用虚拟DOM，每当数据改变时，通过它的react diff运算去作比较，只渲染更新有改变的部分，通过这样的方式有效提高了DOM的操作。

我的理解，同vue相同，在数据发生改变时，都会通过diff方法去判断需要作出更新的节点然后进行操作。

另外关于数据
react----->单向数据绑定（只允许父组件通过props将数据传给子组件）
vue----->双向数据绑定
关于组件化，个人认为已经是时代潮流，几乎所有的前端框架都在推崇组件化以一搞开发效率。‘用户为体验买单，企业靠效率赚钱’我觉得一点都对。

2.重中之重—生命周期

主要分为三个阶段：1⃣️Mounting（挂载）2⃣️Updateing（更新）3⃣️Unmounting（卸载）
一.Mounting 挂载阶段
1.constructor() 构造器，用于创建并初始化组件对象
2.componentWillMount() 组件挂载前执行，如果你有数据是从前一个页面跳转携带过来的，并马上要应用到前端时，那么你应该把数据改变放到这个函数中国呢记性，setState修改这个数据。
3.render() 创建虚拟DOM，进行diff运算。里面的东西说白了就是用户看到的界面或组件的构造（骨架）
4.componentDidMount() 组件挂载完毕。
二.Updateing 更新阶段
1.componentWillReceiveProps() 父级数据发生变化时。
2.shouldComponentUpdate() 判断接下来是否需要组件更新，即是否调用render()
三.Unmounting() 卸载阶段
componentWillUnmount() 组件卸载和销毁之前立刻停用，可以在此销毁定时器，取消网络请求，消除创建的相关DOM节点。

3.虚拟Dom为什么会提高性能

取一个极端的例子，我们有10000条数据构成了现在的页面，有一天我修改了其中的一条数据，如果是真实DOM下去操作的话，着10000太哦数据都会被重新渲染。
而虚拟DOM则是会生成10000个对象（它们不会被浏览器图形化渲染）通过diff运算比较出前后只有一条数据被修改了，那么它只要去修改这一处的DOM就可以了。

4.react diff 原理

diff：计算一个树形结构转化成另一棵树形结构的最少操作（我把它理解成一种抽象的最短路径算法）
1.把树形结构按照层级分解，只比较同级元素
2.给列表结构的每个单元添加唯一的key属性，方便比较
3.react只会匹配相同class的component
4.合并操作，带哦用component的setState方法的时候，react将其标记为dirty，到每一个事件循环结束，react检查所有标记dirty的component重新绘制
5.选择性子树渲染，可重写shouldComponentUpdate提高diff性能

5.组件的状态（state）和属性（props）有什么不同

1.state是一种数据结构，用于组件挂载时所需数据的默认值
我把它理解成当前组件的数据小仓库，我可以把它拿出来用，也可以对它作出修改，然后再拿来用，非常的随心。
2.props是组件的配置，是从父组件传递过来的，组件不能改变自身的props。

6.在构造函数中调用super（props）的目的是什么呢？

我的理解是改变this指向，使this指向当前组件。

7.react父子组件、兄弟组件之间的通信

1.父–>子：父组件把数据挂载在子组件树形上，子组件通过this.props接收
2.子–>父：副组件定义一个修改数据的方法传给子组件，在子组件中进行调用来修改。
3.兄弟–>兄弟：属于同一个父级组件，先1⃣️后2⃣️

8.关于Redux

redux是一个应用数据流框架，猪哟啊解决来组件间状态共享的问题
三大原则： 1⃣️唯一数据源（整个应用的state被储存在一棵object树中）
2⃣️reducer必须是纯函数
3⃣️state是只读的，想要更改必须经过派发action
**工作流程：**使用通过reducer创建出来的store发起一个Action，reducer会执行相应的更行state的方法，点那个state更新之后，view会根据state作出相应的变化。
1⃣️提供getState()获取state
2⃣️通过dispatch(action) 发起action更新state
3⃣️通过subscribe() 注册监听器

这些都是边看边学边整理的，有错误的地方欢迎大哥们底下评论留言，或者私信我。我会改正的，giaogiao～