首页 > 其他 > 详细

React相关(二)

时间:2021-03-03 14:47:43      阅读:20      评论:0      收藏:0      [点我收藏+]

1、redux

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

主要有三个核心方法,actionstorereducer

工作流程是 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

 

React相关(二)

原文:https://www.cnblogs.com/bhj37/p/14473060.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!