深入理解React协调算法

前言

React是一个用于构建界面的JavaScript库。它的核心是跟踪组件状态变化并将更新后的状态更新到屏幕上。在React中，我们把这个过程称为 reconciliation (协调)。通过调用setState方法，React检查状态或属性是否已更改，并在UI层上更新。

背景介绍

首先看一个简单的例子：

class ClickCounter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {count: 0};
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState((state) => {
            return {count: state.count + 1};
        });
    }


    render() {
        return [
            <button key="1" onClick={this.handleClick}>Update counter</button>,
            <span key="2">{this.state.count}</span>
        ]
    }
}

这是一个简单的计数器的例子, 点击按钮，组件的状态就会在处理程序中更新，组件的状态的更新反过来会引起span元素的内容更新。

下面是在协调阶段，React内部会有各种活动。以下是计数器在协调阶段所做的操作：

1. 更新state的count属性
2. 检查并比较ClickCounter的子代以及props
3. 更新span元素

协调期间还会执行其他活动，例如调用生命周期方法，更新ref。这些活动在Fiber架构中统称为"work"（工作）。work的类型取决于React元素的类型。React元素有多种类型，比如类组件，函数组件，Portals，DOM节点等。而React元素类型则是由React.createElement的第一个参数决定。React.createElement函数在render创建元素中调用。

React.createElement到Fiber

JSX编译

<button key="1" onClick={this.onClick}>Update counter</button>
<span key="2">{this.state.count}</span>

JSX在经过编译后，会得到如下的结果。这是render方法真正返回的结果

class ClickCounter {
    ...
    render() {
        return [
            React.createElement(
                'button',
                {
                    key: '1',
                    onClick: this.onClick
                },
                'Update counter'
            ),
            React.createElement(
                'span',
                {
                    key: '2'
                },
                this.state.count
            )
        ]
    }
}

React.createElement函数会返回如下的结果:

[
    {
        $$typeof: Symbol(react.element),
        type: 'button',
        key: "1",
        props: {
            children: 'Update counter',
            onClick: () => { ... }
        }
    },
    {
        $$typeof: Symbol(react.element),
        type: 'span',
        key: "2",
        props: {
            children: 0
        }
    }
]