React进阶（一）

一、基础篇

1.jsx本质：js语法拓展，并充分具备js的能力，通过babel编译为React.createElement(),返回一个React Element对象。

2.jsx映射为dom：

createElement(type, config, children) type：节点类型，config：组件属性，键值对传入，children：对象，记录组件标签之间的嵌套内容，子节点子元素
二次处理key，ref，self，source四个属性，遍历config，提取子元素push进入childArray
发起ReactElement调用，组装对象，然后再返回，此时获得虚拟dom对象

export function createElement(type, config, children) {
  // 处理参数

  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );
}

const ReactElement = function(type, key, ref, self, source, owner, props) {
  const element = {
    // This tag allows us to uniquely identify this as a React Element
    $$typeof: REACT_ELEMENT_TYPE,

    // Built-in properties that belong on the element
    type: type,
    key: key,
    ref: ref,
    props: props,

    // Record the component responsible for creating this element.
    _owner: owner,
  };

  return element
}

3.组件更新

触发顺序为父组件=》子组件

diff算法比对虚拟dom，生成真实dom。

componentWillMount优劣以及废弃理由：

getDerivedStateFromProps :接受来自父组件的props和state，返回对象，更新而不是覆盖。使用时需要注意

在使用此生命周期时，要注意把传入的 prop 值和之前传入的 prop 进行比较。
因为这个生命周期是静态方法，同时要保持它是纯函数，不要产生副作用。

derive：起源

getSnapshotBeforeUpdate:render之后，真实dom渲染之前，获得更新前dom和更新前后state，props的信息。需要与 componentDidUpdate() 方法一起使用。

fiber：拆解任务，异步渲染。可以被打断的异步渲染流程，根据能否被打断：分为render（可以被暂停）和commit（同步执行）两个阶段。

componentsWillxxx生命周期内不要写异步请求，会导致多次调用，constructor() ----> componentWillMount() ----> render() ----> componentDidMount()，render阶段在生命周期内可以多次重复执行。

4.数据流向

单向数据流

父组件传送过去的是一个携带上下文的函数，

发布订阅模型解决任意组件通信问题（没细看，

context API=》redux

5.Hooks

函数组件更能捕获render内部的状态，这是两类组件最大的不同。

useeffect return （）=》{} 在组件卸载时调用

优势：1.符合react逻辑2.状态逻辑复用3.业务逻辑拆分

hooks运作依赖底层顺序链表本质上hooks就是链表

二、面试题

1.react事件系统：关键词：顶层处理，事件集合。

为了解决跨浏览器兼容性问题， React 会将浏览器原⽣事件（ Browser Native Event ）封装为合成事件（ SyntheticEvent ）传⼊设置的事件处理器中。这⾥的合成事件提供了与原⽣事件相同的接⼝，不过它们屏蔽了底层浏览器的细节差异，保证了⾏为的⼀致性。另外有意思的是， React 并没有直接将事件附着到⼦元素上，⽽是以单⼀事件监听器的⽅式将所有的事件发送到顶层进⾏处理。这样 React 在更新 DOM 的时候就不需要考虑如何去处理附着在 DOM 上的事件监听器，最终达到优化性能的⽬的