React

对比 Vue.js

数据更新

  • Vue:Vue 2 通过 getter、setter 与函数包裹;Vue 3 使用 Proxy;数据变化时自动更新显示
  • React:手动 setState 或通过 Redux 等库触发数据变化和视图更新

组件通信

  • Vue:父组件单向传值给子组件,子组件 emit 事件给父组件监听

  • React:父组件单向传值给子组件,同时传递 handler 函数给组件调用

  • props <=> onEvent()

  • Context.Provider <=> useContext

  • Redux / MobX

Diff 算法

  1. 节点比对区别:例如节点 class 更改,React 视为同节点,仅更新其属性
  2. 列表比对区别:都通过 key 优化,但 Vue 采用双端对比

Hooks 和类组件的区别

最大的区别函数组件每次渲染都会有独立 props 和 state,而 class 组件总是会通过 this 拿到最新的 props 和 state;即函数式组件捕获了渲染所使用的值。

例如有一个在一秒后会变化为 B 的 prop 为 name,目前为 A;有一个 buttonhandleClick 在三秒后会 alert(this.props.name);在类组件中 alert 的结果会是 B,因为 this 已经指向了最新的 props

而在函数组件中,alert(props.name) 得到的却是调用 handleClick 时 (即变化前) 的 A

这也是造成一些额外问题的原因,例如 useEffect 未正确指定其依赖于某个 count 值却在三秒后 setState(count+1),这里的 count 就永远为固定值了。

对于 setState 问题可以使用 setState((state)=>state+1) 解决,对于异步函数中获取到旧值可以使用 useRef 解决。

本站内容采用 CC BY-NC-SA 4.0 许可,请注明出处;商业转载请联系作者授权。