react基础知识点总结

react基础知识点总结，包括patterns、Component、Higher-Order Components（HOCs）、Decorator、Immutable……

react基础知识点总结

• patterns
  • Dependency injection
    • DI
    • 依赖注入
    • context
      • redux
      • 每一个组件都能访问到
    • 高阶组件
      • 传递props
      • 避免传一些没用到的数据
• Component
  • PropTypes
    • defaultProps
    • isRequired
    • array
    • bool
    • func
    • number
    • object
    • string
    • symbol
    • any
    • arrayOf
    • element
    • instanceOf
    • node
    • objectOf
    • oneOf
    • oneOfType
    • shape
  • setState
    • this.updater.enqueueSetState(this, partialState);
    • this.updater.enqueueCallback(this, callback, setState);
  • forceUpdate
  • ReactNoopUpdateQueue
• color: rgb(51, 51, 51); font-family: -apple-system, Helvetica Neue, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif; font-size: 16px;Mixin
  • 混入
    • 单继承
      • 组合
    • 多重继承
  • react 14后 es6 不推荐
  • 有害
    • 子主题
• Higher-Order Components（HOCs）
  • krimport nxReactp, p{ nxComponent p} nxfrom s1Reactp;krconst nxPopupContainer o= p(nxWrapperp) o= kr class nxWrapperComponent krextends nxComponent p{ nx componentDidMountp() p{ nx consolep.nxlogp(s1HOC did mountp) p } nx componentWillUnmountp() p{ nx consolep.nxlogp(s1HOC will unmountp) p } nx renderp() p{ k return onxWrapper p{...kthisp.nxpropsp} o/ p } p}
  • 模式
  • 组件复用
  • 输入一个组件，返回一个包裹后的新的组件
• Decorator
  • es7
  • Object.defineProperty(obj, prop, descriptor)
    • 语法糖
• Immutable
  • shallowCopy（浅拷贝）
    • 复制引用，和原来指向一个对象
  • deepCopy（深拷贝）
    • 复制所有属性和方法，生成新对象
    • Object.create()
    • for in
      • 递归
    • hasOwnProperty
    • var cloneObj = JSON.parse(JSON.stringify(obj))
  • 共享的可变状态容易导致错误
  • 减少重复渲染
  • 不可变数据，对数据的修改会生成新的数据
  • 结构共享，避免所有属性的复制造成性能损耗
    • 节点变化只影响当前节点及其父节点
  • 比较
    • ===
      • 直接比较内存地址
    • Immutable.is(map1, map2)
      • 直接比较对象的值
        • 比较hashCode值
• 判断类型
  • Object.prototype.toString.call([])===object Array
• docs
  • jsx
    • elements
    • escape编码
      • 阻止xss
    • 编译成React.createElement()
      • 语法糖
  • Element
    • immutable
      • 最小单元
      • 删除，重建
  • Components and Props
    • FunctionalComponents
    • ClassComponents
    • 组件 组合
    • 组件 提取
    • props只读
    • 独立，代码服用，隔离
  • State and Lifecycle
    • state
      • this.setState((prevState, props) => ({ counter: prevState.counter + props.increment }));
      • Asynchronous
    • class类式组件
    • State Updates are Merged
      • this.setState({data})
    • lifecycle hooks
    • 单向数据流
  • Handling Events
    • 阻止事件触发
      • e.preventDefault()
    • bind
      • arrow function
      • = () =>
  • Conditional Rendering
    • if
  • Lists and keys
    • array内需要key
    • 同一层级key唯一
    • jsx map
  • Lifting State Up
    • 不同子组件共享父组件state
  • Forms
    • Controlled Components
      • input value 存在state内
    • Uncontrolled Components
      • ref
        • 真实数据保存到DOM中
    • name属性
  • 组合和继承
    • react代码复用推荐组合
    • props 传入组件
    • props.children
      • 不知子组件children类型
    • Specialization
      • 归一组件外包装一层成为特殊组件
  • 理念
    • UI与组件层级一一映射
      • UI与数据模型一一映射
      • 单一功能原则
    • 静态
      • 自顶向下
      • 数据模型-->UI
      • 单向数据流
    • ui状态
      • 最小可变状态集
    • 状态位置
    • 反向数据流
  • PropTypes类型检查
    • 性能原因，只在开发模式下检查
  • refs
    • 动画
    • 焦点，文本选择，媒体
    • dom/class 组件
  • 性能
    • timeline
  • 避免重复渲染
    • shouldComponentUpdate
    • PureComponent
      • shouldComponentUpdate自动浅比较
        • 对象第一层属性
    • 不可突变的数据结构
      • assign合并之前state
      • 不直接改变对象
      • Immutable
  • stack
• 源码
  • Haste
    • 所有文件名全局唯一
      • 可以直接通过文件名require(setInnerHTML)
  • Dynamic Injection
    • 原因：刚开始只有DOM，后来加了native，需要覆盖一些特性
    • runtime运行时
    • 未来将会取消
    • angular依赖注入
      • Dependency injection
        • Inversion of Control
      • 依赖的定义在构造函数
      • 只消费，不定义
      • 减耦合
  • core
    • components
  • render
  • Reconcilers
  • Fiber Reconciler
    • reconciler重写
    • 更新过程由同步变成异步
    • 加载或更新组件树
      • 调用生命周期函数
        • 匹配v-dom
          • 更新dom
            • 同步，不可中断
      • 无io操作，只cpu运算，但dom太大也会出现性能问题
      • 在更新过程中，ui线程是阻塞的，i例如nput输入会无响应
        • 界面卡顿
    • 任务分片
    • fiber纤程
      • 进程
        • 操作系统级
        • 独立的内存单元
        • 进程间通信
          • 信号
          • 管道
      • 线程
        • 操作系统级
        • 一个程序至少有一个进程,一个进程至少有一个线程
        • 多个线程共享内存
        • 通信
          • 共享内存
        • 上下文切换容易
      • 协程
        • 编译器级
        • 通过yield插入代码，实现代码分段执行
      • 优先级打断
      • 并行
        • 单核
          • 模拟并行
          • 挂起换一个
        • 多核
          • 真正并行
    • 更新过程
      • Reconciliation Phase
        • 计算需要更新的dom，可打断
        • 生命周期函数可能调用多次
        • componentWillMount
          • 小心副作用
        • componentWillReceiveProps
        • shouldComponentUpdate
        • componentWillUpdate
          • 小心副作用
      • Commit Phase
        • 更新dom，不可打断
        • componentDidMount
        • componentDidUpdate
        • componentWillUnmount
    • 优先级别PriorityLevel
    • 子主题
  • Event System
    • 事件委托
      • document根部监听
      • 组件唯一id，hash map 存储 对应 事件
      • chrome event listener
        • Ancestors只有
  • Event Emitter
• redux
  • 三大原则
    • 单一数据源
    • state只读
      • 只能通过 action 改变state
    • 使用纯函数reducer 修改state
  • flux模式
    • flux实现
      • dispatcher
    • redux实现
  • action
    • type
    • flux标准
      • type
      • payload
      • meta
      • err
    • action创建函数
      • return action对象
    • dispatch（action创建函数）
    • 子主题
  • reducer
    • (previousState, action) =newState
    • 纯函数
    • assign
    • ...
    • default 返回旧 state
  • store
    • dispatch
      • currentReducer(currentState, action)
    • getState
    • subscribe
      • 监听state变化
    • replaceReducer
  • 单向数据流
  • state
    • domain data 域数据
      • 服务器返回
    • app state 应用状态
    • ui 状态
  • 源码
    • applyMiddleware(...middlewares)
      • middlewares=[]
      • middleware 函数
      • next(action)
  • react-redux
    • Provider
      • store
      • Component
        • children
    • Router
    • connect
      • mapStateToProps
      • mapDispatchToProps
        • dispatch(action)
    • shouldComponentUpdate
      • 浅对比props
      • 性能
  • shallowEqual
    • function shallowEqual(objA, objB) { if (objA === objB) { return true; } var keysA = Object.keys(objA); var keysB = Object.keys(objB); if (keysA.length !== keysB.length) { return false; } // Test for A's keys different from B. var hasOwn = Object.prototype.hasOwnProperty; for (var i = 0; i < keysA.length; i++) { if (!hasOwn.call(objB, keysA[i]) || objA[keysA[i]] !== objB[keysA[i]]) { return false; } } return true; }
  • 问题
    • 局部数据
    • 范式化和扁平化state
    • 内存
      • 仅维护一颗state树，其它被回收