React Hooks与React Class性能对比

自从React Hooks推出之后, 官方一直推荐使用React Hooks, 也保留了React class的写法. 这里通过一个实验对比二者的性能. React Hooks会发生更多次的useXXX调用, 以及更多的临时函数创建, 我一开始一直认为React class性能会更好. 可实际对比才发现React Hooks的性能更好. 以下是性能对比的代码, 请各位大侠帮忙分析一下, 是否是测试代码有什么不对的地方.

export let TestHook = () => {
    const _this = useRef({} as any).current;
    if (!_this.inited) {
        _this.states = new Array(50000);
        _this.inited = true;
    }
    for (let i = 0; i < 50000; i++) {
        _this.states[i] = (useState(i));
    }

    let updateState = () => {
        _this.states.forEach(([state, setState]: any) => {
            setState(state + 1);
        });
    }
    useEffect(() => {
        const intervalId = setInterval(updateState, 100);
        return () => clearInterval(intervalId);
    }, []);

    return (
        <div className={style.hook}>
            {_this.states.map(([state]: any) => (
                <span >{state}</span>
            ))}
        </div>
    );
};

export class TestClass extends Component<any, any> {
    state: any = {}
    constructor(prop: any) {
        super(prop);
        for (let i = 0; i < 50000; i++) {
            this.state[i] = i;
        }
    }
    componentDidMount() {
        setInterval(() => {
            let s = this.state;
            for (let k in s) {
                this.setState({ [k]: s[k] + 1 });
            }
        }, 100)
    }
    render() {
        return (
            <div className={style.class}>
                {Object.keys(this.state).map((k) => (
                    <span>{this.state[k]}</span>
                ))}
            </div>
        )
    }
}