Skip to main content

jsx2Dom

React

1.jsx2Dom

jsx 是 JavaScript 的一种语法扩展,它和模板语法很接近,但是它充分具备 JavaScript 能力 Facebook 给 jsx 定位是 JavaScript 的扩展

jsx 会被编译为 React.createElement(),React.createElement()返回一个叫做 react Element 的 js 对象 jsx 等价于一次 React.createElement()的一次调用 render

react.createElement 的调用 render

ReactElement 对象 render

react.render()

2.生命周期

render

lifecycle

  1. getDerivedStateFromProps 是一个试图代替 componentWillReceiverProps 的 API,实现基于 props 派生 state,原则上只做一件事,做了合理的减法

  2. getSnapshotBeforeUpdate 在 render 之后,真实 dom 更新之前,可以获取更新前的真实 dom 和更新后的 state&props

  3. Fiber 架构的重要特征是可以被打断的异步渲染模式,根据能否被打断这一标准,React16 将生命周期被划分为了 render 和 commit 两个阶段

    1. render 没有副作用,可以被暂停,中断或者重新启动==>render 阶段的生命周期可以重复执行
      1. 首次渲染在数据返回之前,异步请求可以在 componentDidXX 阶段执行
      2. WillXXX 可以被打断+重启,可能会发出多个请求
      3. getDerivedStateFromProps 避免触碰 this
    2. pre-commit 可以读取 dom
    3. commit 同步执行

3. 数据流

UI = render(data) 或者 UI = f(data) 视图会随着数据的变化而变化

  1. 基于 props 的单向数据流(单向数据流)

1.父子组件通信

2.eventBus

3.contextAPI ???

React.createContext

3.React Hooks

1.类组件

面向对象的编程

  • 封装:将一类属性和方法,"聚拢"到一个 class 里去
  • 继承:新的 class 可以通过继承现有 Class 实现对某一类属性和方法的复用
  • 多态:

2.函数组件

函数组件会捕获 render 内部的状态,这是两类组件最大的不同 (Dan)

3.hooks

  • useState: ==>state
  • useEffect: ===>生命周期 componentDidMount

react hooks 的好处

  1. 告别难以理解的 class; this 和生命周期
  2. 解决业务逻辑难以拆分的问题
  3. 使状态逻辑复用变得简单可行
  4. 函数组件从设计思想上来看更加契合 React 的理念

render

4.hooks 原则

  • 只在 React 函数组件中调用 hook
  • 不要再循环中/条件或者嵌套中调用 hook

5.调用链路

初始化 render 更新 render

mountState (首次渲染)构建链表并渲染 updateState (更新)依次遍历链表并渲染 hooks 的渲染是通过依次遍历来定位每个 hooks 内容的.如果前后两次读到的链表在顺序上出现差异,那么渲染的结果会不可控

  • hooks 的本质是链表

4.Dom

1.虚拟 dom

  • 挂载阶段: React 将结合 JSX 的描述,构建出虚拟 DOM 树,然后通过 ReactDOM.render 实现虚拟 DOM 到真实 DOM 的映射
  • 更新阶段: 页面的变化会先作用于虚拟 DOM,虚拟 DOM 将在 JS 层借助算法先对比具体有哪些真实 DOM 需要改变,然后再讲这些改变作用域真实 DOM

2.虚拟 dom 的价值

  1. 开发体验效率
  2. 跨平台
  3. 批量更新,

5.调和(Reconciliation)过程和 diff 算法

调和:将虚拟 DOM 映射到真实 Dom 的过程

  1. setState 是同步还是异步?