React：基础知识学习，8年前端开发教你如何写简历

---

1. 表单字段内容的值, 使用state进行绑定

2. 导致表单字段, 用户无法修改

2. 原因

---

值是获取的state中的数据, 数据不变, 界面不会被渲染

3. 解决

---

监听onChange事件

1. 获取event.target.value

2. 反向的设置到state, 控制数据变更

十、ref的使用

===================================================================

1. 定义

---

Refs 提供了一种方式，用于访问在 render 方法中创建的 DOM 节点或 React 元素

2. 使用场景

---

1. 处理焦点、文本选择或媒体控制

2. 触发强制动画

3. 集成第三方 DOM 库

3. 注意

---

官方提示, 如果可以通过声明式实现，则尽量避免使用 refs。话外音: React无法控制局面的时候，就需要直接操作Refs了

4. 案例使用

---

1. 让输入框获得焦点?

2. 核心代码

十一、组件的嵌套组合

=====================================================================

1. 概念

---

在一个组件内部, 可以直接嵌入另外一个组件，可以完全当做是一个html标签使用：本质不是

2. 注意

---

最终都会被babel进行转化, 转变为对应层级关系的虚拟DOM对象, 然后再渲染为真实DOM对象

3. 案例实操1

---

Demo: 完成对学生信息的展示/添加/删除?

① 步骤一

1. 静态组件拆解, 核心代码

2. 核心代码

② 步骤二

1. 动态效果实现(添加/删除/显示), 核心代码如下

2. 添加和删除部分

① 在父组件中定义增加和删除的方法，并传递给子组件

② 子组件中调用方法

③ 总结

1. 多层组件中, 数据该放在何处?

如果只用于一个组件, 则定义在该组件内容; 如果是运用于多个组件, 则定义在它们的父组件中

2. 多层组件中, 数据传递问题?

父组件通过props传递数据给子组件, 子组件不能直接修改父组件的数据, 必须是父组件定义修改数据的函数, 传递给子组件然后由子组件调用

4. 案例实操2

---

1. Demo: 受控方式实现-用户名和密码获取?

2. 核心代码

十二、React组件的生命周期

==========================================================================

1. 前言

---

1. 组件的生命周期可以帮助我们清楚的剖析一个组件从创建到销毁的全部流程

2. 如果能够做到知其然且知其所以然, 那么在后期多组件、中大型项目开发过程中, 就能够很好的把控项目的性能细节

2. 生命周期

---

1. 图示

2. 阶段划分

① 初始化阶段：在组件初始化阶段会执行

图示

② 更新阶段：props或state的改变可能会引起组件的更新，组件重新渲染的过程中会调用以下方法

图示

③ 卸载阶段：componentWillUnmount()

④ 错误处理：componentDidCatch()

3. 完整的钩子选项运行流程图

3. 组件运作流程

---

1. 首次初始化渲染: React.render()

2. 组件每次发生更新: state: this.setState({})

3. 卸载阶段

4. 案例实操

---

1. Demo1: 组件生命周期钩子函数执行次数分析?

2. Demo2: 年龄增长/删除组件

3. 核心代码

5. 辅助阅读——概念：生命周期函数详解

---

1. constructor(props)

① react组件的构造函数, 在挂载之前被调用。在实现React.Component构造函数时，需要先在添加其他内容前，调用super(props)，用来将父组件传来的props绑定到这个类中，使用this.props将会得到。

② constructor中应当做些初始化的行为，如：初始化state，将事件处理函数绑定到类实例上，但不要使用setState()。如果没有必要初始化state或绑定方法，则不需要构造constructor，或者把这个组件换成纯函数写法。

③ 可以利用props初始化state，在之后修改state不会对props造成任何修改，但仍然建议提升状态到父组件中，或使用redux统一进行状态管理。

④ 官方建议不要在constructor引入任何具有副作用和订阅功能的代码，这些应当在componentDidMount()中写入。

2. getDerivedStateFromProps(nextProps, prevState)

① getDerivedStateFromProps在组件实例化后，或者接受新的props后被调用。他返回一个对象来更新状态，或者返回null表示新的props不需要任何state的更新。

② 如果是由于父组件的props更改，所带来的重新渲染，也会触发此方法。调用steState()不会触发getDerivedStateFromProps()。

3. componentWillMount() / UNSAFE_componentWillMount()

① componentWillMount()将在react未来版本中被弃用; UNSAFE_componentWillMount()在组件挂载前被调用，在这个方法中调用setState()不会起作用，因为它在render()前被调用。

② 为了避免副作用和其他的订阅，官方建议使用componentDidMount()代替。这个方法也是用于在服务器渲染上的唯一方法。

4. render()

render()方法是必需的。当被调用时，将计算this.props和this.state，并返回以下一种类型：

① React元素, 通过jsx创建，既可以是dom元素，也可以是用户自定义的组件。

② 字符串或数字, 他们将会以文本节点形式渲染到dom中。

③ Portals, react 16版本中提出的新的解决方案，可以使组件脱离父组件层级直接挂载在DOM树的任何位置。

④ null, 什么也不渲染。

⑤ 布尔值, 也是什么都不渲染，通常后跟组件进行判断。

⑥ 当返回null,false,ReactDOM.findDOMNode(this)将会返回null，什么都不会渲染。

注意: render()方法必须是一个纯函数，不能在里面改变state，也不能直接和浏览器进行交互，而是应该将事件放在其他生命周期函数中。 如果shouldComponentUpdate()返回false，render()不会被调用。

5. componentWillReceiveProps()

① 官方建议使用getDerivedStateFromProps函数代替componentWillReceiveProps()。

② 当组件挂载后，接收到新的props后会被调用。如果需要更新state来响应props的更改，则可以进行this.props和nextProps的比较，并在此方法中使用this.setState()。如果父组件会让这个组件重新渲染，即使props没有改变，也会调用这个方法。

③ react不会在组件初始化props时调用这个方法, 调用this.setState也不会触发。

6. shouldComponentUpdate(nextProps, nextState)

① 调用shouldComponentUpdate, 可以让react知道组件的输出是否受state和props的影响。默认每个状态的更改都会重新渲染，大多数情况下应该保持这个默认行为。在渲染新的props或state前，shouldComponentUpdate会被调用, 默认为true。这个方法不会在初始化时被调用，也不会在forceUpdate()时被调用。返回false不会阻止子组件在state更改时重新渲染。

② 如果shouldComponentUpdate()返回false，componentwillupdate,render和componentDidUpdate不会被调用。在未来版本，shouldComponentUpdate()将会作为一个提示而不是严格的指令，返回false仍然可能导致组件的重新渲染。官方并不建议在shouldComponentUpdate()中进行深度查询或使用JSON.stringify()，他效率非常低，并且损伤性能。

7. UNSAFE_componentWillUpdate(nextProps, nextState)

在渲染新的state或props时，UNSAFE_componentWillUpdate会被调用，将此作为在更新发生之前进行准备的机会。这个方法不会在初始化时被调用。不能在这里使用this.setState()，也不能做会触发视图更新的操作。如果需要更新state或props，调用getDerivedStateFromProps。

8. getSnapshotBeforeUpdate()

在react render()后的输出被渲染到DOM之前被调用。它让组件能够在它们被潜在更改之前捕获当前值（如滚动位置）。这个生命周期返回的任何值都将作为参数传递给componentDidUpdate()。

9. componentDidUpdate(prevProps, prevState, snapshot)

① 调用shouldComponentUpdate, 可以让react知道组件的输出是否受state和props的影响。默认每个状态的更改都会重新渲染，大多数情况下应该保持这个默认行为。在渲染新的props或state前，shouldComponentUpdate会被调用, 默认为true。这个方法不会在初始化时被调用，也不会在forceUpdate()时被调用。返回false不会阻止子组件在state更改时重新渲染。

② 如果shouldComponentUpdate()返回false，componentwillupdate,render和componentDidUpdate不会被调用。在未来版本，shouldComponentUpdate()将会作为一个提示而不是严格的指令，返回false仍然可能导致组件的重新渲染。官方并不建议在shouldComponentUpdate()中进行深度查询或使用JSON.stringify()，他效率非常低，并且损伤性能。

十三、虚拟DOM和Diff算法

==========================================================================

1. 前言

---

1. 虚拟DOM和diff算法是React中非常核心的两个概念, 我们需要对此有一个很全面的认知！

2. 这对于我们用脚手架开发项目, 尤其是企业中前后端分离的项目(类似: 后台管理系统)等有很大的帮助!

2. 虚拟DOM

---

1. 内部执行流程

① 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中;

② 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异;

③ 把步骤2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。

2. 原理剖析

① Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘，硬盘读取速度比较慢，我们会就在它们之间加缓存条;

② 反之, 既然 DOM 运行速度慢，那么我们就在JS 和 DOM 之间加个缓存。JS只操作Virtual DOM，最后的时候再把变更的结果写入DOM。

3. diff算法

---

1. 如果两棵树的根元素类型不同，React会销毁旧树，创建新树

2. 对于类型相同的React DOM 元素，React会对比两者的属性是否相同，只更新不同的属性; 当处理完这个DOM节点，React就会递归处理子节点。

3. 遍历插入元素, 如果没有key, React将改变每一个子删除重新创建; 为了解决这个问题，React提供了一个 key 属性。当子节点带有key属性，React会通过key来匹配原始树和后来的树。

4. 执行过程

---

1. 通过绑定key, React就知道带有key ‘1024’ 的元素是新的，对于 ‘1025’ 和 ‘1026’ 仅仅移动位置即可。

2. key使用注意

5. 九宫格算法案例

---

1. 要求

① 要求: 按照九宫格算法的要求, 添加/删除盒子, 并且做好边界值处理。

② 考察知识点: 1. 虚拟DOM; 2. diff算法; 3. state管理。

2. 核心代码

3. 案例运行效果

4. 素材

① 数据

dataArr: [

{“icon”: “f1”, “name”: “水果-番茄”},

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

最后

CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

this._addItem()}>添加

<button onClick={() => this._removeItem()}>删除

{/下部分/}

{this.state.itemArr}

);

}

}

ReactDOM.render(, root);

3. 案例运行效果

4. 素材

① 数据

dataArr: [

{“icon”: “f1”, “name”: “水果-番茄”},

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-xA2INrK3-1711782805057)]
[外链图片转存中…(img-uQdoOaCe-1711782805058)]
[外链图片转存中…(img-6tbwdM8R-1711782805058)]
[外链图片转存中…(img-KZUwKGFR-1711782805059)]
[外链图片转存中…(img-2TdNlsRB-1711782805059)]
[外链图片转存中…(img-GzZ3cCjN-1711782805059)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-549wOrjf-1711782805060)]

最后

CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。