React 原理
2020-12-22 23:47:16 0 举报AI智能生成
一张图梳理大厂 React 面试必问题
作者其他创作
大纲/内容
React 生命周期
周期梳理
挂载阶段
construtor
作用
初始化 state 与绑定函数
注意事项
不要引入业务逻辑
逐渐被类属性的写法取代
getDerivedStateFromProps
让组件在 props 变化时更新 state
并非 props 变化时调用，传入即可调用
反模式
复制 props 到 state
在 props 变化后修改 state
UNSAFE_componentWillMount
过去用于网络请求或绑定函数
标记废弃
异步渲染机制下，该方法可能会被多次调用
render
执行渲染
不要使用 setState
componentDidMount
发起网络请求或者绑定事件
几乎没有
更新阶段
UNSAFE_componentWillReceiveProps
与 getDerivedStateFromProps 一致
已标记废弃
与挂载阶段一致
shouldComponentUpdate
通过返回 true 或 false 确定是否需要触发重新渲染
可通过添加判断条件完成性能优化
PureComponent 的原理实现
UNSAFE_componentWillUpdate
执行更新前操作
异步渲染机制下，该方法可能会被暂时执行
与挂载一致
getSnapshotBeforeUpdate
返回一个数据，作为 componentDidUpdate 的第三个参数传入
可在 DOM 更新执行某些运算
不可以使用 setState
componentDidUpdate
视图更新后执行操作
谨慎使用 setState，避免死循环
卸载阶段
componentWillUnmout
执行接触事件绑定，取消定时器等清理工作
职责梳理
状态变更
函数组件
任何情况下都会重新渲染，可使用 React.meno 优化，跳过渲染
React.Component
state 发生变化时会重新渲染
props 传入时，无论是否变化都会重新渲染
shouldComponentUpdate 然后开发者决定是否需要渲染
React.PureComponent
默认实现 shouldComponentUpdate，浅比较 state 和 props
错误处理
getDerivedStateFromError
报错之后更新 state，使它能够渲染自定义降级渲后的 UI
componentDidCatch
错误日志上报服务器
类组件与函数组件
共同点
使用方式
完全一致
表达效果
不同点
使用场景
生命周期
独特功能
设计模式
继承
组合
未来趋势
Hooks
心智模型
OOP
FP
React 原理
你真的了解 React 吗
讲概念
一句话解释该技术本质
说用途
简要说明技术用途
理思路
概要说明核心技术思路
优缺点
独特优势
个别缺点
为什么 React 使用 JSX
一句话解释 JSX
核心概念
方案对比
模板
弱关注点分离
引入概念过多（指令、属性）
模板字符串
结构描述复杂
语法提示差
JXON
收藏
职业：暂无
0 条评论
回复 删除
下一页
