react相关问题 | 易学教程

什么是JSX?——浏览器是如何识别它的？

JSX是facebook普及的一种标记语言，通过babel/TSC等工具会编译为React.createElementfunction。所以在React每个组件中，虽然没有显式用到React，但都需要import React from 'react'。

JSX是如何区分React Component和HTML元素的？

通过元素首字母的大小写，如果首字母大写，则认为是React组件，小写的话则会被认为是HTML元素。可以在online Babel compiler中试一下。

123456789101112

function () {  return <div>Hello world!</div>;}function () {  return React.createElement(    "div",    null,    "Hello world!"  );}

123456789101112

function () {  return <div>Hello world!</div>;}function () {  return React.createElement(    Div,    null,    "Hello world!"  );}

此外，把一个组件赋给this.component并且写<this.component />也会起作用。

react16生命周期

Mounting

constructor()
static getDerivedStateFromProps()
render()
componentDidMount

子类必须在构造函数第一行执行super(props)，否则我们无法在构造函数里拿到this对象，因为子类的实例要通过父类的构造函数完成塑造，得到与父类实例相同的属性和方法。es6的继承是先将是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）
不建议使用UNSAFE_componentWillMount()，因为它是在render之前执行，所以不会触发重新渲染。在该方法内调用setState会和constructor里的初始化state合并执行，应该放到constructor中去初始化。

Updating

static getDerivedStateFromProps(nextProps, prevState) //会返回一个对象来更新当前的state对象
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate(prevProps, prevState) 在dom更新前，可以保存之前的滚动位置，便于在componentDidUpdate中去恢复
componentDidUpdate(prevProps, prevState, snapshot) 在dom更新后,snapshot的值是getSnapshotBeforeUpdate的返回值

不建议使用UNSAFE_componentWillReceiveProps()和UNSAFE_componentWillUpdate()，一次更新可能会调用多次。
UNSAFE_componentWillReceiveProps()经常会带来bug和不一致的问题，例如在该方法中设置input值，当父组件更新的时候，用户的输入就会被置空。

1234567891011121314151617

class EmailInput extends Component {  state = { email: this.props.email };  render() {    return <input onChange={this.handleChange} value={this.state.email} />;  }  handleChange = event => {    this.setState({ email: event.target.value });  };  componentWillReceiveProps(nextProps) {    // This will erase any local state updates!    // Do not do this.    this.setState({ email: nextProps.email });  }}

Unmounting

componentWillUnmount()

getDerivedStateFromProps(props, state)每次render之前都会被触发，与componentWillReceiveProps只在父组件rerender时会触发不一样。此外，getDerivedStateFromProps方法不建议经常使用，使用前想一想是否有替代方案。

错误捕获

static getDerivedStateFromError(error)
componentDidCatch(error, info)
错误边界(Error Boundaries) 仅可以捕获其子组件的错误。
使用static getDerivedStateFromError()在抛出错误后渲染回退UI。使用 componentDidCatch() 来记录错误信息。

异步加载

React V16.6引入的新特性lazy，以及React-loadable库。

getDerivedStateFromProps应用

加分题：数据获取为什么用 componentDidMount 而不是 constructor？

你希望听到的两个原因会是：“在渲染发生之前数据不会存在” —— 虽然不是主要原因，但它向您显示该人员了解组件的处理方式; “在 React Fiber 中使用新的异步渲染……” —— 有人一直在努力学习。

r1: SSR模式下，componentWillMount在server端也是会被调用的，内容返回到client端后，componentWillMount会被第二次调用，如果在componentWillMount中处理数据获取则会被调用两次。
r2: 在componentWillMount中调用setState不会触发rerender，所以一般不会被用来获取数据。
r3: React16之后采用了Fiber架构，类似ComponentWillMount的生命周期钩子都有可能执行多次，所以不在这些生命周期中做有副作用的操作，比如请求数据。
r4: constructor用来初始化组件，作用应该保持纯粹，不应该引入数据获取这种有副作用的操作。

react fiber纤程

fiber是纤程颗粒化的概念，一个线程可以包含多个Fiber，主要是对react更新机制的优化。React16之前的版本，更新组件会一直占用主线程，如果组件树过大，则可能会导致浏览器失去响应。在React16中加入的fiber可以将同步任务拆解，每次执行完一小片后，都会把控制权交还给react负责任务调度的模块，如果有优先级更高的任务，就先执行高优先级的任务。

大专栏 react相关问题headerlink" title="拆什么">拆什么

首先，看React的渲染，包括两个阶段：调度阶段(reconciliation)和渲染阶段(commit)。

调度阶段react根据数据更新virtual DOM，再运用diff算法找到需要VDOM change。这一部分的工作是可以拆分的。
渲染阶段根据计算出的所有diff去一次性更新真实的DOM。
组件比较庞大时，diff运算会比较耗时，不可控，所以需要拆分的是调度阶段。

怎么拆

fiber tree的部分结构如下所示，将简单的数结构，变成了基于单链表的树结构。

12345678910

{    alternate: Fiber|null, //在fiber更新时克隆出的镜像fiber，对fiber的修改会标记在这个fiber上    nextEffect: Fiber | null, // 单链表结构，方便遍历 Fiber Tree 上有副作用的节点    pendingWorkPriority: PriorityLevel, // 标记子树上待更新任务的优先级    stateNode: any, // 管理 instance 自身的特性    return: Fiber|null, // 指向 Fiber Tree 中的父节点    child: Fiber|null, // 指向第一个子节点    sibling: Fiber|null, // 指向兄弟节点}

执行顺序

因为是单链表(A → B → C)的结构，所以在每次执行到某个节点(A → B)被中断后，下次可以从该节点(B → C)接着执行。
requestIdleCallback会让一个低优先级的任务在空闲期被调用，而requestAnimationFrame会让一个高优先级的任务在下一个栈帧被调用，从而保证了主线程按照优先级执行 fiber 单元。

优先级顺序为：文本框输入 > 本次调度结束需完成的任务 > 动画过渡 > 交互反馈 > 数据更新 > 不会显示但以防将来会显示的任务。

因为react fiber机制，一个任务很可能执行到一半就被其他优先级更高的任务所替代，或者因为时间原因而被终止。当再次执行这个任务时，是从头开始执行一遍，就会导致组件的某些 will 生命周期可能被多次调用而影响性能。

REFs:

react事件注册分发

事件注册的时候，react 把所有事件都委托到了document上，减少注册事件的数量，降低内存占用。
事件被触发后，冒泡到document处，找到触发的dom和react component，当前触发的事件会被加入batchedUpdates批处理队列中，在事件对列中，事件分发的核心handleTopLevel保证了子元素在父元素前面（此处分析的是trapBubbledEvent）。
事件执行的时候，首先找到合适的plugin（v16版本有5种）构造对应的合成事件，第一次触发new 创建的事件对象会放到缓存池中，下次直接从对象池中取。最后，就是拿到与事件相关的元素实例和回调函数。

onClickCapture

如果想要注册捕获事件，可以使用onClickCapture。但React的合成事件都是统一注册在document元素上的，且只有冒泡阶段，但合成事件会区分捕获和冒泡两种类型，来保证合成事件的执行顺序。此外，原生事件的执行都会早于合成事件的执行，因为合成事件都要等到事件冒泡到document上，才会执行。
执行顺序是：原生捕获事件 -> 原生事件冒泡 -> 合成事件捕获 -> 合成事件冒泡

react 源码

Component和PureComponent比较

React组件继承了Component或者PureComponent，这两个父类的定义在ReactBaseClasses.js中。

12345678910111213141516171819

function ComponentDummy() {}ComponentDummy.prototype = Component.prototype;/** * Convenience component with default shallow equality check for sCU. */function PureComponent(props, context, updater) {  this.props = props;  this.context = context;  // If a component has string refs, we will assign a different object later.  this.refs = emptyObject;  this.updater = updater || ReactNoopUpdateQueue;}const pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());pureComponentPrototype.constructor = PureComponent;// Avoid an extra prototype jump for these methods.Object.assign(pureComponentPrototype, Component.prototype);pureComponentPrototype.isPureReactComponent = true;

从源码上看PureComponent继承了Component，新增了isPureReactComponent变量。
在shouldComponentUpdate函数中，可以看到如果isPureReactComponent为true，会shollow比较新旧props和state是否相等，都相等的话会返回false。而Component始终会返回true。

if (type.prototype && type.prototype.isPureReactComponent) {  return (    !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)  );}

在使用PureComponent时要注意：

尽量不要在render函数中给子组件绑定新的函数，如下面
1
<ChildComponent onclick={() => this.handleClick()}/>

这样每次render都会创建一个新的函数，改变了子组件的props参数，使子组件重新渲染。

尽量不要在render方法内生成数据
生成新的数据，例如新的list数组，也会带来不必要的重新渲染。
1234
let list = [xxx];...{list.map(item => (<LiItem value={item}/>))}<ChildComponent onclick={() => this.handleClick()}/>

因此相比于 Component ，PureComponent 有性能上的更大提升：

减少了组件无意义的重渲染（当 state 和 props 没有发生变化时），当结合 immutable 数据时其优更为明显；
隔离了父组件与子组件的状态变化；

若是数组和对象等引用类型，则要引用不同，才会渲染
如果prop和state每次都会变，那么PureComponent的效率还不如Component，因为你知道的，进行浅比较也是需要时间

key值的作用

提高diff的效率
避免就地复用

来源：https://www.cnblogs.com/liuzhongrong/p/12262810.html

标签

react

优先级