React特性
react有什么特点
- 使用虚拟dom
- 可以进行服务器端渲染
- 遵循单向数据流或数据绑定
受控组件和非受控组件有什么区别？
- 受控组件：只能通过React修改数据或状态的组件
- 非受控组件：
- 如input、textarea、select等表单组件
- 控件自身就能控制数据和状态
React 组件中绑定一个事件跟直接操作 DOM 绑定一个事件有什么差别
- 绑定方式不同
- React使用事件委托机制，将所有事件监听器挂载在根节点或顶层的容器上，通过事件冒泡捕获事件
- 只有一个事件处理器负责监听
- 由React自行分发事件并调用相对应的事件处理逻辑
- Dom的事件监听器直接绑定到特定的dom元素上
- 对多个元素绑定事件，系统会创建多个独立的监听器
- React使用事件委托机制，将所有事件监听器挂载在根节点或顶层的容器上，通过事件冒泡捕获事件
- 性能不同
- React：减少事件监听器，更节省内存
- 原生dom：内存消耗较高
- 事件对象
- React：合成事件对象
- dom：原生事件对象
- 跨平台与兼容性
- React：跨平台统一接口
- dom：仅限web浏览器
- 生命周期管理
- react：自动清理事件
- dom：需要手动清理
- 事件优先级
- react：高优先级事件可以优先处理
- dom：按事件触发顺序逐一处理
组件的生命周期方法有哪些？
- constructor
- 初始化状态和绑定事件处理程序
- 在函数组件中，可以将useState钩子用于类似的目的
- render
- 负责渲染jsx标记并返回要在屏幕上显示的内容
- componentDidMount
- 组件在Dom中渲染后立即执行此方法
- 常用于初始化任务
- componentDidUpdate
- 当组件的props或state改变时调用此方法
- 允许执行副作用
- componentWillUnmount
- 组件从dom中删除之前，调用此方法
- 用于清除事件侦听器或者取消计时器等操作
React性能优化
React源码
React Hook
常用的React Hook有哪些？
- useState 管理组件状态
- useEffect 执行组件副作用，比如获取数据或者订阅事件
- useContext 获取组件上下文值
- useRef 获取组件dom实体
- useCallback 对函数缓存，防止不必要的重新渲染
- useMemo 对值缓存，防止不必要的重新渲染
- useReducer 通过reducer函数管理状态，类似于Redux工作原理
- useLayoutEffect
对useCallback、useMemo这2个hook的立即，有什么样的区别，适合在什么样的场景下使用
是不是所有变量或函数都需要用到这两个hook进行包裹
- 不是所有变量或函数都需要使用这两个hook进行包裹，
- 它们的作用主要是优化性能，
- 主要针对那些性能损耗的计算或函数，没有损耗的变量或者函数是不需要包裹
包裹后性能一定会好吗？
- 不一定，取决于具体情况
- useCallback用于缓存函数，避免每次渲染都创建新的函数实例
- 当函数被父组件作为参数传递到子组件时，函数实例的重新创建会触发子组件重新渲染
- useCallback可以确保相同的函数实例在相同的依赖项下保持不变
- useMemo用于缓存值，避免每次渲染都重新计算
- 在依赖项不变的情况下，返回值的缓存结果，避免重复计算，提高了性能
- 无需使用useMemo和useCallback的情况：
- 依赖频繁变化
- 值或函数轻量且不频繁变化
- 组件不会频繁重渲染
- 计算量本身较小
有没有更底层一点的理解？
- 更底层的理解是，useCallback 和 useMemo 的原理都是基于 memoization（记忆化）技术。
- 它们在渲染过程中会根据依赖项的变化，判断是否重新计算函数或值。
- 当依赖项不变时，会直接返回缓存的结果，从而避免了不必要的重复计算，提高了性能。
