React

一、react和vue的区别

   =>  相同点：

	1.数据驱动页面，提供响应式的试图组件

	2.都有virtual DOM,组件化的开发，通过props参数进行父子之间组件传递数据，都实现了webComponents规范

	3.数据流动单向，都支持服务器的渲染SSR

	4.都有支持native的方法，react有React native， vue有wexx

=>  不同点：

	1.数据绑定：Vue实现了双向的数据绑定，react数据流动是单向的

	2.数据渲染：大规模的数据渲染，react更快

	3.使用场景：React配合Redux架构适合大规模多人协作复杂项目，Vue适合小快的项目

	4.开发风格：react推荐做法jsx + inline style把html和css都写在js了

		    vue是采用webpack + vue-loader单文件组件格式，html, js, css同一个文件

二、redux中的reducer（纯函数）

Redux数据流里，reduces其实是根据之前的状态（previous state）和现有的action（current action）更新state(这个state可以理解为上下累加器的结果）

每次redux reducer被执行时，state和action被传入，这个state根据action进行累加或者是'自身消减'(reduce),进而返回最新的state,这也就是典型reduce函数的用法：state ->  action ->  state

三、react的refs

refs就想一个逃生窗，允许我们之间访问dom元素或者组件实例，可以向组件添加一个ref属性的值是一个回调函数，

它将接受地城dom元素或组件的已挂在实例，作为第一个参数

四、react中的keys

帮组我们跟踪哪些项目已更改、添加、从列表中删除，key是独一无二的，可以让我们高效的去定位元素，并且操作它

五、React的生命周期

三个状态：Mounting(已插入真实的DOM）

	  Updating(正在被重新渲染)

	  Unmounting(已移除真实的DOM)

componentDIdMount 在第一次渲染后调用，只在客服端。之后组件已经生成对应的DOM结构，

componentDidUpdate 在组件完成更新后立即调用，在出初始化是不会调用

六、React子组件向父组件传值

父组件通过props 给子组件传递数据，子组件则是通过调用父组件传给它的函数给父组件传递数据。

七、React数据流

八、为什么虚拟DOM会提高性能 https://www.zhihu.com/question/29504639?sort=created

虚拟DOM相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的doom操作，从而提高性能

具体实现步骤：

	·用JavaScript对象结构表示DOM树的结构；然后用这个树构建一个真正的DOM树，插到文档中

        ·当状态变更的时候，重新构造一棵树的对象树，然后用新的树和旧的树进行对比，记录两棵树差异

	·把2所记录的差异应用到步骤1所构建的真正的DOM树上，试图就更新了。

九、diff算法

1.把树形结构按照层级分解，只比较同级元素

2.给列表结构的每个单元添加key属性，方便比较。在实际代码中，会对新旧两棵树进行一个深度优先的遍历，这样每个节点都会有一个标记

3.在深度优先遍历的时候，每遍历到一个节点就把该节点和新的树进行对比。如果有差异的话就记录到一个对象里面

Vritual DOM 算法主要实现上面步骤的三个函数：element， diff， patch。然后就可以实际的进行使用

react只会匹配相同的class的component（这里的class指的是组件的名字）

合并操作，条用component的setState方法的时候，React将其标记为dirty.到每一个时间循环借宿，React检查所有标记dirty的component重新绘制

4.选择性子树渲染。可以重写shouldComponentUpdate提高diff的性能	

十、super

十一、简述下flux的思想

flux的最大特点，就是数据的‘单向流动’

1.用户访问View

2.View发出用户的Action

3.Dispatcher收到Action,要求state进行相应的更新

4.store更新后，发出一个‘change’事件后，更新页面

十二、reac性能优化是哪个周期函

shouldComponentUpdate 这个方法用来判断是否需要调用render方法重新描绘dom.因为dom的描绘非常消耗性能，

如果我们在shouldComponentUpdate方法中能够写出更优化的dom diff算法，可以极大的提高性能

十三、react怎么划分业务组件和技术组件

根据组件的职责通常把组件分为UI组件和容器组件

UI组件负责UI的呈现，容器组件负责管理数据和逻辑

两者通过React-redux提供connect方法联系起来

十四、setState

setState通过一个队列机制实现state更新，当执行setState时，会将需要更新的state很后放入状态队列

而不会立即更新this.state，队列机制可以高效地批量更新state。如果不通过setState而直接修改this.state的值	

那么该state将不会被放入状态队列中。当下次调用setState并对状态队列进行合并时，就会忽略之前修改的state，造成不可预知的错误



同时，也利用了队列机制实现了setState的异步更新，避免了频繁的重复更新state




同步更新state:

	setState 函数并不会阻塞等待状态更新完毕，因此 setNetworkActivityIndicatorVisible 有可能先于数据渲染完毕就执行。第二个参数是一个回调函数，在setState的异步操作结束并且组件已经重新渲染的时候执行

	也就是说，我们可以通过这个回调来拿到更新的state的值，实现代码的同步



例子：componentDidMount() {



	fetch('https://test.com')

    

	.then((res) => res.json())

    

	.then(

(data) => {

this.setState({ data:data });

			StatusBar.setNetworkActivityIndicatorVisible(false);

        }]

十五

区分虚拟DOM和真实DOM

• 虚拟DOM：
  更新更快
  无法直接更新HTML，如果有元素更新，则更新jsx
  DOM操作非常简单
  很少的内存消耗
• 真实DOM：
  更新缓慢
  可以直接更新HTML
  如果元素更新，则创建新DOM
  消耗内存较多

十六

setState是同步还- 在组件的生命周期或者React合成事件中，是异步
在setTimeout或者原生dom事件中，是同步