vue和react的区别

vue和react的区别

• minix 与组件之间存在隐式依赖，可能产生冲突。倾向于增加更多状态，降低了应用的可预测性
• 高阶组件 多层包裹嵌套组件，增加了复杂度和理解成本，对于外层是黑盒
• Render Props 使用繁琐，不好维护, 代码体积过大，同样容易嵌套过深

• 逻辑代码的复用
• 减小了代码体积
• 没有 this 的烦恼

Vue Composition API 围绕一个新的组件选项 setup 而创建。setup() 为 Vue 组件提供了状态、计算值、watcher 和生命周期钩子

• React Hooks 会在组件每次渲染时候运行，而 Vue setup() 只在组件创建时运行一次

原理：

React Hook 底层是基于链表实现，调用的条件是每次组件被 render 的时候都会顺序执行所有的 Hooks

function App(){
  const [name, setName] = useState('demo');
  if(condition){
    const [val, setVal] = useState('');    
  }
}

因为底层是链表，每一个 Hook 的 next 是指向下一个 Hook 的，if 会导致顺序不正确

Vue Hook 只会被注册调用一次，Vue 能避开这些麻烦的问题，原因在于它对数据的响应是基于 proxy 的，对数据直接代理观察。这种场景下，只要任何一个更改 data 的地方，相关的 function 或者 template 都会被重新计算，因此避开了 React 可能遇到的性能上的问题

React 数据更改的时候，会导致重新 render，重新 render 又会重新把 Hooks 重新注册一次，所以 React 的上手难度更高一些

当然 React 对这些都有自己的解决方案，比如 useCallback，useMemo 等 Hook 的作用，这些官网都有介绍

状态声明

const [name, setName] = useState("Mary");
const [state, dispatch] = useReducer(reducer, initialState);

-   像在正常的 JavaScript 中声明基本类型变量和对象变量那样去使用 ref 和 reactive 即可

-   只要用到 reactive 的时候，要记住从 composition 函数中返回反应式对象时得使用 toRefs()。这样做减少了过多使用 ref 时的开销
// toRefs() 则将反应式对象转换为普通对象，该对象上的所有属性都自动转换为 ref

依赖追踪

如由 state 中的其他部分引起的渲染）跳过某些 useEffect Hook 执行

// 传递一个依赖项的数组作为 useEffect Hook 的第二个参数，只有当 name 改变时才会更新 localStorage
function Form() {
  const [name, setName] = useState('Mary');
  const [surname, setSurname] = useState('Poppins');
  useEffect(function persistForm() {
      localStorage.setItem('formData', name);
  }, [name]);

  // ...
}

• eslint-plugin-React-Hooks 包含了一条 lint 提示关于丢失依赖项的规则
• useCallback 和 useMemo 也使用依赖项数组参数，以分别决定其是否应该返回缓存过的（ memoized）与上一次执行相同的版本的回调或值。

vue3.0 使用 watch() 执行以响应状态或属性的改变。自动跟踪

url都浏览器渲染

interface和type的区别

vue和react虚拟dom区别

www.cnblogs.com/zx618/p/183…

Cookie、localStorage 和 sessionStorage。这三者各有优劣，适用于不同的场景

react通信

• 父组件向子组件通信：使用 props
• 子组件向父组件通信：使用 props 回调
• 跨级组件间通信：使用 context 对象
• 非嵌套组件间通信：使用事件订阅
• redux等第三方插件