挑战坚持学习1024天——前端之JavaScript高级

js基础部分可到我文章专栏去看 ---点击这里

Day84-Day90【2022年10月24日-30日】

学习重点

以下内容待完善

1.react组件化

组件化是一种分而治之的思想：

如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而 且不利于后续的管理以及扩展。但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独 立的功能，那么之后整个页面的管理和维护就变得非常容易了。

我们需要通过组件化的思想来思考整个应用程序：

我们将一个完整的页面分成很多个组件；每个组件都用于实现页面的一个功能块；而每一个组件又可以进行细分；而组件本身又可以在多个地方进行复用；react类组件和函数组件的区别。

组件化是React的核心思想：

组件化提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何的应用都会被抽象成一颗组件树。

组件化思想的应用： 有了组件化的思想，我们在之后的开发中就要充分的利用它。尽可能的将页面拆分成一个个小的、可复用的组件。这样让我们的代码更加方便组织和管理，并且扩展性也更强。

React的组件相对于Vue更加的灵活和多样，按照不同的方式可以分成很多类组件： 根据组件的定义方式，可以分为：函数组件(Functional Component )和类组件(Class Component)； 根据组件内部是否有状态需要维护，可以分成：无状态组件(Stateless Component )和有状态组件(Stateful Component)； 根据组件的不同职责，可以分成：展示型组件(Presentational Component)和容器型组件(Container Component)；

这些概念有很多重叠，但是他们最主要是关注数据逻辑和UI展示的分离： 函数组件、无状态组件、展示型组件主要关注UI的展示； 类组件、有状态组件、容器型组件主要关注数据逻辑； 当然还有很多组件的其他概念：比如异步组件、高阶组件等，我们后续再学习。

2.生命周期

认识生命周期 很多的事物都有从创建到销毁的整个过程，这个过程称之为是生命周期；

React组件也有自己的生命周期，了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能；

命周期和生命周期函数的关系：

生命周期是一个抽象的概念，在生命周期的整个过程，分成了很多个阶段；

比如装载阶段（Mount），组件第一次在DOM树中被渲染的过程；

比如更新过程（Update），组件状态发生变化，重新更新渲染的过程；

比如卸载过程（Unmount），组件从DOM树中被移除的过程；

React内部为了告诉我们当前处于哪些阶段，会对我们组件内部实现的某些函数进行回调，这些函数就是生命周期函数：

比如实现componentDidMount函数：组件已经挂载到DOM上时，就会回调；

比如实现componentDidUpdate函数：组件已经发生了更新时，就会回调；

比如实现componentWillUnmount函数：组件即将被移除时，就会回调；

我们可以在这些回调函数中编写自己的逻辑代码，来完成自己的需求功能；

我们谈React生命周期时，主要谈的类的生命周期，因为函数式组件是没有生命周期函数的；（后面我们可以通过hooks来模拟一些生命周期的回调）

重点（常用）版：

完整版：

官网生命周期的图

2.1Constructor

如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。

constructor中通常只做两件事情：

• 通过给 this.state 赋值对象来初始化内部的state；

• 为事件绑定实例（this）；

2.2componentDidMount

componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。

componentDidMount中通常进行哪里操作呢？

依赖于DOM的操作可以在这里进行；

在此处发送网络请求就最好的地方；（官方建议）

可以在此处添加一些订阅（会在componentWillUnmount取消订阅）；

2.3componentDidUpdate

componentDidUpdate() 会在更新后会被立即调用，首次渲染不会执行此方法。

当组件更新后，可以在此处对 DOM 进行操作；

如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求；（例如，当 props 未发生变化时，则不会执行网

络请求）。

2.4componentWillUnmount

componentWillUnmount() 会在组件卸载及销毁之前直接调用。

在此方法中执行必要的清理操作；

例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等；

生命周期函数coderwhy

除了上面介绍的生命周期函数之外，还有一些不常用的生命周期函数：

getDerivedStateFromProps：state 的值在任何

时候都依赖于 props时使用；该方法返回一个对象来更新state；

getSnapshotBeforeUpdate：在React更新DOM

之前回调的一个函数，可以获取DOM更新前的一些信息（比如说滚动位置）；

shouldComponentUpdate：该生命周期函数很常用，常用于性能优化。

3组件通信

React 一共有 5 种主流的通信方式：

• props 和 callback 方式
• ref 方式。
• React-redux 或 React-mobx 状态管理方式。
• context 上下文方式。
• event bus 事件总线。

父到子 父组件在展示子组件，可能会传递一些数据给子组件：

父组件通过 属性=值 的形式来传递给子组件数据；

子组件通过 props 参数获取父组件传递过来的数据；

子到父 在React中同样是通过props传递消息，只是让父组件给子组件传递一个回调函数，在子组件中调用这个函数即可；

• React组件本质：同类和函数，都具有原型链、继承、实例属性、静态属性等；能实现对UI的渲染(render)；底层加入了 updater 对象，通过 updater控制state和更新视图；
• 类组件和函数组件的区别：类组件只实例化一次，实例中保存了组件的 state 等状态，每次更新，只是重新渲染，并执行对应的生命周期，state延续；函数组件直接调用函数，每次更新都会重新执行函数，无法保存state（这个问题16.8之后，通过Hook解决）
• 组件通讯方式：props+callback、eventBus、context、ref、redux
• 组件强化：HOC、自定义hook

本周精进：

10.24精进
要控制自己的情绪，世界上10%的事情是不可控的，90%事情可以自己掌控，做情绪的主人掌控自己可掌控的事儿。正念、自律、勤奋、谦卑。
10.25精进
职场中学会深度思考，向上推及向下推，试着从对方的角度看待问题，再以对方最想达到的点去实施。
10.26精进
今天切身体会到控制自身情绪的重要性，情绪一上来智商就会下去，克服负面情绪，能规避许多连锁反应，甚至能扭转不利的开端。
10.27精进
物极必反，凡事都要顺应道，阴阳要均衡，职场中从高层管理角度看下面要相互制衡。
10.28精进
沟通是促使双方能共同朝着同一个目标正确进行的重要渠道。沟通前要注意先聆听，抓住对方的想表达的要点，根据其痛点做相应的回答。高效的沟通方式，就像催化剂，能带来事半功倍的效果。
10.29今日无精进
10.30精进
做事之前没想好不要开始行动，说话之前没想好不要随意开口，思维不对动作全废，方向不对努力白费。

参考资料

• Coderwhy学习资料
• React官网
• 解锁前端面试体系核心攻略
• 鲨鱼哥整理面试资料
• 其他参考资料 结语

志同道合的小伙伴可以加我，一起交流进步，我们坚持每日精进（互相监督思考学习，如果坚持不下来我可以监督你）。我们一起努力鸭！ ——>点击这里

备注

按照时间顺序倒叙排列，完结后按时间顺序正序排列方便查看知识点,工作日更新。