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 一致
注意事项
与 getDerivedStateFromProps 一致
已标记废弃
getDerivedStateFromProps
与挂载阶段一致
shouldComponentUpdate
作用
通过返回 true 或 false 确定是否需要触发重新渲染
注意事项
可通过添加判断条件完成性能优化
PureComponent 的原理实现
UNSAFE_componentWillUpdate
作用
执行更新前操作
注意事项
异步渲染机制下，该方法可能会被暂时执行
标记废弃
render
与挂载一致
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 使用 JSX
一句话解释 JSX
核心概念
方案对比
模板
弱关注点分离
引入概念过多（指令、属性）
模板字符串
结构描述复杂
语法提示差
JXON
语法提示差
收藏
职业：暂无
0 条评论
下一页
