【react】react和vue的最大区别

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

react和vue一直都是两者都在用，现在基于自己的一些使用体验，说一下两者的本质区别

首先我们看vue：

vue最核心的部分就是它的双向绑定，

defineProperty和后来的Proxy

让getter搜集依赖，setter触发更新

等于是视图的更新，都交予了框架自己去完成

再看react：

react将setter外置，等于触发更新的时机可以coder自己决定

而且如果想用双向绑定也可以像vue一样实现一个类似的reactive

像ahooks里的useReactive

这样选择就变得就更多样，

然后在遇到更新频次问题的时候可以更受控

这也是为什么很多在线图表类的项目都是用react来写

react存在的问题：

由于react将setter外置了;
而从设计逻辑来说，使用useEffect有大量的观察者模式，

useeffect(()=>{
    //setter or something

},[mystate])

通过对mystate的监听去触发更新，
这样就存在一个问题：
如果watch on的数据复杂且频繁变化，
就会频繁的出触发界面更新，很容易带来性能问题。

How to address

import { useWhyDidYouUpdate } from 'ahooks';
import React, { useState } from 'react';

const Demo: React.FC<{ count: number }> = (props) => {
  const [randomNum, setRandomNum] = useState(Math.random());

  useWhyDidYouUpdate('useWhyDidYouUpdateComponent', { ...props, randomNum });

  return (
    <div>
      <div>
        <span>number: {props.count}</span>
      </div>
      <div>
        randomNum: {randomNum}
        <button onClick={() => setRandomNum(Math.random)} style={{ marginLeft: 8 }}>
          🎲
        </button>
      </div>
    </div>
  );
};

export default () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Demo count={count} />
      <div>
        <button onClick={() => setCount((prevCount) => prevCount - 1)}>count -</button>
        <button onClick={() => setCount((prevCount) => prevCount + 1)} style={{ marginLeft: 8 }}>
          count +
        </button>
      </div>
      <p style={{ marginTop: 8 }}>Please open the browser console to view the output!</p>
    </div>
  );
};

然后你就能再console里看到到底哪些数据在频繁变化：

像这样，针对变化和触发页面更新的state去优化，才是一条正确路径，其他的花活整体来说意义不大