登录免费注册

首页  思维导图  详情



 



React 原理

React 原理

2020-12-22 23:47:16   0  举报





仅支持查看

AI智能生成

一张图梳理大厂 React 面试必问题

前端开发 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

语法提示差

 Collect

Get Started

原理

 Collect

Get Started

ReAct 工程化问题

为什么现在主流 Agent 都采用 ReAct？

 Collect

Get Started

为什么现在主流 Agent 都采用 ReAct？

 Collect

Get Started

工作原理













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定

Document