FE.SRC-React实战与原理笔记

React实战与原理笔记

概念与工具集

生命周期

FE.SRC-React实战与原理笔记_第1张图片

constructor()

  • 用于初始化内部状态,很少使用;
  • 唯一可以修改state的地方;
  • 使用 this.state 来初始化 state
  • 给事件处理函数绑定 this

getDerivedStateFromProps()

  • 当创建时、接收新的 props 时、setState 时、forceUpdate 时会执行这个方法
  • 当state需要从props初始化时使用;
  • 尽量不要使用:维护两者状态一致性会增加复杂度;
  • 每次render都会调用
  • 典型场景;表单控件获取默认值

componentWillMount()

  • UI渲染完成后调用
  • 只执行一次
  • 典型场景:获取外部资源

componentWillUnmount()

  • 组件将要移除时调用
  • 资源释放(一些事件监听和定时器需要在此时清除)

getSnapshotBeforeUpdate()

  • 在页面render之前调用,state已更新
  • 典型场景:获取render之前的DOM状态

componentWillUpdata(nextProps, nextState)

  • 组件初始化时不调用,只有在组件将要更新时才调用,此时可以修改state

componentDidUpdate()

  • 每次UI更新时调用
  • 典型场景:页面需要根据props变化重新获取数据

shouldComponentUpdate(nextProps, nextState)

  • 决定vdom是否要重绘
  • 一般可以由PureComponent自动实现
  • 典型场景:性能优化

render()

  • 创建虚拟dom,进行diff算法,更新dom树都在此进行。此时就不能更改state了。

componentDidMount()

  • 组件渲染之后调用,只调用一次。

组件设计模式

组件

就是状态机器UI=fn(state) (状态分类:domain ui app)

context模式

主要应用场景在于很多不同层级的组件需要访问同样一些的数据。如下图,组件a、组件g、组件f需要共享数据,则只需要在最外层套上Provider,需要共享的组件使用Consumer即可。React新Context API在前端状态管理的实践

组合组件(Compound Component)

使用者只需要传递子组件,子组件所需要的props在父组件会封装好,引用子组件的时候就没必要传递所有props了。

高阶组件(HOC)

高阶组件本质是一个接受 Component 并返回新的 Component 的函数。目的是为了复用通用逻辑 [深入理解 React 高阶组件
](https://mp.weixin.qq.com/s?__...

函数组件

是纯 UI 组件,也称无状态组件(SFC:Stateless Functional Component)。渲染所需要的数据只通过 props 传入, 不需要用 class 的方式来创建 React 组件, 也不需要用到 this 关键字,或者用到 state [React中函数式声明组件
](https://segmentfault.com/a/11...

render props

给某个组件通过 props 传递一个函数,并且函数会返回一个 React 组件

提供者模式(Provider Pattern)

提供者模式可以解决非父子组件下的信息传递问题, 或者组件层级太深需要层层传递的问题

State Reducer

可以让父组件控制子组件state。render props 可以控制子组件的UI是如何渲染的,state reducer则可以控制子组件的state.

Controlled Components

将原来子组件改变state的逻辑移到父组件中,由父组件控制。
异步

实战-状态管理与组件通信

组件通信: broadcast dispatch state props context

其他状态管理: dva, mobx,flexible,reflux,flummox

flux

  • action:当需要改变应用的状态或有 View 需要更新时,你需要触发一个 Action
  • action creator:把 type 和 payload(载荷)封装成一个 Action。type 是你预定义的多个 type (通常是一个常量列表)之一,代表系统特定的 action。一旦 action 消息创建好了,Action Creator 就会把它传递给 Dispatcher
  • Dispatcher: 它保存着所有需要发送 action 的 store 列表。当 Action Creator 给过来一个 action,它会把这个 action 传递给各个 store。
  • waitfor:Dispatcher 的行为是同步的。如果想要在 store 之间实现依赖,有的更新完了其他的才能更新,你可以使用 Dispatcher 提供的 waitFor() 来实现。
  • store:所有的状态变化,必须通过 Action Creator/Dispatcher 通道。使用switch判断 action 的类型,决定是否相应。如果相应则根据 action 找出需要变化的部分,更新 state。

mobx

  • observable: 通过 observable(state) 定义组件的状态,包装后的状态是一个可观察数据(Observable Data)。
  • observer: 通过 observer(ReactComponent) 定义组件
  • action: 通过 action 来修改状态。

redux

  • react-redux 提供了两个重要的对象,Provider 和 connect,前者使 React 组件可被连接(connectable),后者把 React 组件和 Redux 的 store 真正连接起来。
  • 通过 reducer 创建一个 store,每当我们在 store 上 dispatch 一个 action,store 内的数据就会相应地发生变化。
  • provider
  • connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

原理

Virtual Dom 算法实现

  • 树的递归
  • 判断属性的更改
  • 判断列表差异算法实现 React Diff算法
  • 遍历子元素打标识
  • 渲染差异

详情参考 深入框架本源系列 —— Virtual Dom

Router 实现

以 hash 形式(也可以使用 History API 来处理)为例,当 url 的 hash 发生变化时,触发 hashchange 注册的回调,回调中去进行不同的操作,进行不同的内容的展示。前端路由实现与 react-router 源码分析

Redux设计思想

  • Web 应用是一个状态机,视图与状态是一一对应的。
  • 所有的状态,保存在一个对象里面。

Redux 让应用的状态变化变得可预测。如果想改变应用的状态,就必须 dispatch 对应的 action。而不能直接改变应用的状态,因为保存这些状态的地方(称为 store)只有 get方法(getState) 而没有 set方法。

只要Redux 订阅(subscribe)相应框架(例如React)内部方法,就可以使用该应用框架保证数据流动的一致性。

Redux源码剖析及应用

其他

《React源码解析(一):组件的实现与挂载》
《React源码解析(二):组件的类型与生命周期》
《React源码解析(三):详解事务与队列》
《React源码解析(四):事件系统》
React底层揭秘

参考资料

《深入浅出React和Redux》程墨
React 状态管理库: Mobx
深入浅出react
React 实践心得:react-redux 之 connect 方法详解
《React实战进阶45讲》 王沛 - 极客时间
react 生命周期
重新认识reacrt生命周期
react组件设计模式快速指南

你可能感兴趣的:(javascript)