React
react
与 react-dom
库
react
package contains only the functionality necessary to define React components. It is typically used together with a React renderer like react-dom for the web.
react-dom
package serves as the entry point to the DOM and server renderers for React.
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));
react-router
与 react-router-dom
库
react-router
是路由核心库。react-router-dom
基于react-router
,加入了一些在浏览器运行的功能,与 dom 相关。一般二者要一起使用。
问题汇总
React 特点
JSX 语法
单向数据流
虚拟 DOM
组件化
虚拟 DOM
虚拟 DOM 是用来描述 DOM 结构的 js 对象,不是真实 DOM,与真实的 DOM 一一对应。使用的目的是为了更好地比较 DOM 的变化,不直接更新 DOM。
真实 DOM 更新缓慢,会直接更新 HTML,操作代价高,引起页面回流和重绘,消耗内存多。
虚拟 DOM:
- react 中数据发生改变,虚拟 DOM 重新渲染。
- 计算虚拟 DOM 与之前虚拟 DOM 的差异。
- 将 DOM 的变化用于更新真实 DOM。
虚拟 DOM 一定更快吗?
不是的。虚拟 DOM 会有大量的计算,不一定比直接操作 DOM 更快。虚拟 DOM 提高了代码的性能下限,优化了大量操作 DOM 的性能损耗。
Class Comp 与 Function Comp
-
类组件相对复杂,并且含有 this,比较难以理解。在一个生命周期函数中,可能有很多不想管的逻辑,而函数组件可以按照代码的用途拆分,做到关注点分离。
-
类组件相对较大,从长远角度难以维护,而 Hooks 组件相对较短,更容易拆分,可读性高也更方便维护。
-
函数组件复用成本低,更容易抽象出单独的组件或单独的逻辑。
-
函数组件更加灵活,更适合做到逻辑和 UI 的解耦。但类组件的逻辑也更清晰:构造函数以及生命周期的角度。
-
思考模式不同。
Class 组件的模式是先做什么再做什么,按照时间维度划分,比如 this.setState 的第二个参数,比如生命周期的使用。
函数组件的思考模式是依赖,副作用。围绕着 state,props 的变化而做什么事情。
函数式组件捕获了渲染所使用的值。hooks 追求的是渲染一致性,当执行一些方法时,读到的 state,props 是当时的状态快照,是不可变的。而类组件有 this,this.state/this.props 上的值都是变化的。---- 函数式组件与类组件有何不同? — Overreacted