Solo  当前访客:0 开始使用

Jimmy Luo的个人博客

记录精彩的程序人生

React知识地图

2020-06-04 20:09:48 LuoJimmy
0  评论    2  浏览

React

  • 出现的根源

    • 传统UI操作关注太多细节
    • 应用程序状态分散在各处,难以追踪和维护
  • React: 始终整体“刷新”页面,无需关注细节

  • Flux架构:单向数据流

  • component

  • render

  • jsx:直接在JavaScript代码中直接写HTML标记。本质:动态创建组件的语法糖

  • props

  • state

  • function component

  • immutability

  • React elements: React elements are first-class JavaScript objects; we can pass them around in our applications. To render multiple items in React, we can use an array of React elements.

  • unique "key" prop: Keys tell React about the identity of each component which allows React to maintain state between re-renders. If a component’s key changes, the component will be destroyed and re-created with a new state

  • Component Lifecycle: mounting(componentDidMount())->updating(componentDidUpdate())->unmouting(componentWillUnmount())

    • constructor
      1. 用于初始化内部状态,很少使用
      2. 唯一可以直接修改state的地方
    • getDerivedStateFromProps
      1. 当state需要从props初始化时使用
      2. 尽量不要使用:维护两者状态一致性增加复杂度
      3. 每次render都会调用
      4. 典型场景:表单控件获取默认值
    • componentDidMount
      1. UI渲染完成后调用
      2. 只执行一次
      3. 典型场景:获取外部资源
    • componnetWillUnmount
      1. 组件移除时被调用
      2. 经典场景:资源释放
    • getSnapshotBeforeUpdate
      1. 在页面render之前调用,state已更新
      2. 典型场景:获取render之前的DOM状态
    • componentDidUpdate
      1. 每次UI更新时被调用
      2. 典型场景:页面需要根据props变化重新获取数据
    • shouldComponentUpdate
      1. 决定Virtual DOM是否重绘
      2. 一般可以有PureComponent自动实现
      3. 典型场景:性能优化
  • Controlled component

dva

  • dva = React-router + Redux + Redux-saga
  • Action: 一个对象,描述事件。type, payload
  • connect: 一个函数,绑定State到View
  • dispatch: 一个函数,绑定Action到State
  • Model: 一个对象,所有的逻辑都定义在它上面。namespace, state, reducers, effects, subscriptions
  • reducer:一个函数,接受state和action,返回老的或者新的state。Action 处理器,用来处理同步操作
  • effect: 一个函数,Action处理器,用来处理异步动作,基于Redux-saga实现。action, {call(调用异步逻辑), put(出发action), select(从state获取数据)}
  • Subscription: 用于订阅一个数据源,然后根据需要 dispatch 相应的 action
  • Router: Injected Props: location, params, children



Open Source, Open Mind,
Open Sight, Open Future!

目录

TOP