React相关（二）

1、redux

redux 是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管理

主要有三个核心方法，action，store，reducer

工作流程是 view 调用 store 的 dispatch 接收 action 传入 store，reducer 进行 state 操作，view 通过 store 提供的 getState 获取最新的数据

新增 state,对状态的管理更加明确，通过 redux，流程更加规范了，减少手动编码量，提高了编码效率，同时缺点时当数据更新时有时候组件不需要，但是也要重新绘制，有些影响效率。一般情况下，我们在构建多交互，多数据流的复杂项目应用时才会使用它们。

2、Redux 遵循的三个原则是什么?

• 单一事实来源：整个应用程序的状态存储在单个存储中的对象/状态树中
• 状态是只读的：更改状态的惟一方法是触发一个动作
• 使用纯函数来修改state：为了描述 action 如何改变 state tree ，你需要编写reducers

3、React , redux 可以运行在服务端吗?有啥子优势？

• 利于 SEO
• 提高首屏渲染速度
• 同构直出，使用同一份 JS 代码实现，便于开发和维护

4、react性能优化方案

• 重写shouldComponentUpdate来避免不必要的 dom 操作
• 使用 production 版本的react.js
• 使用key来帮助React识别列表中所有子组件的最小变化

5、react diff 原理

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

• 给列表结构的每个单元添加唯一的 key 属性，方便比较

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

• 合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制

• 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能

 

 

 

 

原文地址：https://www.cnblogs.com/dcyd/p/12989422.html