巩固React基础——前端之React之一【Day69-Day83】

Developer_Niuge
178 阅读25分钟

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

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

Day69【2022年10月10日】

学习重点：初识react

1.React是什么？

React：用于构建用户界面的 JavaScript 库；

f709a1eceabe964e412ad2dcd927ac8.png React的官网文档：zh-hans.reactjs.org/ React的三大特点：

  • 声明式编程
  • 组件化开发
  • 多平台适配

2.React的三大特点

2.1 声明式编程

声明式编程和命令式编程的区别

声明式编程 主要关注“我想要什么”，而不关注具体该怎么实现，让计算机自身想出怎么执行。

而使用声明式编程方法，我们可以用 Array.map 函数，像下面这样：

var numbers = [1,2,3,4,5]
var doubled = numbers.map (function (n) {
  return n * 2
})
console.log (doubled) //=> [2,4,6,8,10]

map利用当前的数组创建了一个新数组，新数组里的每个元素都是经过了传入map的函数(这里是function (n) { return n*2 })的处理。

map函数所做的事情是将直接遍历整个数组的过程归纳抽离出来，让我们专注于描述我们想要的是什么 (what)。注意，我们传入map的是一个纯函数；它不具有任何副作用(不会改变外部状态)，它只是接收一个数字，返回乘以二后的值。

命令式编程 主要关注“让计算机应该如何做”，计算机会严格遵循你的指令，而不理会最后的结果是不是你所想要的，不管是不是你想要的结果最终都会执行。

我们用命令式编程风格实现，像下面这样：

var numbers = [1,2,3,4,5]
var doubled = []
for(var i = 0; i < numbers.length; i++) {
  var newNumber = numbers[i] * 2
  doubled.push (newNumber)
}
console.log (doubled) //=> [2,4,6,8,10]

我们直接遍历整个数组，取出每个元素，乘以二，然后把翻倍后的值放入新数组，每次都要操作这个双倍数组，直到计算完所有元素。

总结： 声明式编程重点关注你想要得出的结果，而不在乎在执行过程中涉及到的封装继承等操作，而命令式编程重点关注怎么做，他会按照你既定的要求去操作如何执行，不会在乎最终的执行结果。

2.2 组件化开发

将前端界面拆分成一个一个的组件 有以下几个优势：

  • 降低耦合度：每个业务模块无不关联，可自由拆卸、自由组装，重复利用
  • 加快编译速度：每个组件可以单独编译运行，发布时也可以合并成一个app。
  • 提高协作效率：团队中每个人负责自己的组件，不会影响其他组件，降低团队成员熟悉项目的成本。

image.png

2.3 多平台适配

2013年，React发布之初主要是开发Web页面；

2015年，Facebook推出了ReactNative，用于开发移动端跨平台；（虽然目前Flutter非常火爆，但是还是有很多公司在使用

ReactNative）；

2017年，Facebook推出ReactVR，用于开发虚拟现实Web应用程序；（VR也会是一个火爆的应用场景）； 一次学习可以在多平台适配

3.今日精进

身边的圈子决定了自身的认知，圈子如同一道屏障，若是安逸于圈内，人的思维习惯将形成固化将永远在舒适区，通过学习提升能力，主动向上社交，持续输出，保持利他思维达到破圈，这将彻底提升认知甚至改变命运。

Day70-71【2022年10月11-12日】

学习重点：JSX

1.JSX是什么？

  • 官网的解释是JSX是一种JavaScript的语法扩展（eXtension），因为看起来是一段XML语法也称之为JavaScript XML

  • 它用于描述我们的UI界面，并且其完成可以和JavaScript融合在一起使用；

  • 它不同于Vue中的模块语法，你不需要专门学习模块语法中的一些指令（比如v-for、v-if、v-else、v-bind）

JSX其实是嵌入到JavaScript中的一种结构语法

1.为什么要使用JSX

React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。

React 并没有采用将标记与逻辑分离到不同文件这种人为的分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。

React 不强制要求使用 JSX，但是大多数人发现，在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。它还可以使 React 显示更多有用的错误和警告消息。

这是来自react官网的解释，总结来说引入react认为渲染逻辑本质上与其他UI逻辑存在内在耦合，他们之间是密不可分，所以React没有将标记分离到不同的文件中，而是将它们组合到了一起，这个地方就是组件。将二者共同放在组件当中。

2.基本使用

  • JSX的顶层只能有一个根元素，所以我们很多时候会在外层包裹一个div元素（或者使用空标签）；

  • 为了方便阅读，我们通常在jsx的外层包裹一个小括号()，这样可以方便阅读，并且jsx可以进行换行书写，这也是一种书写规范，增加代码的可读性。

  • JSX中的标签可以是单标签，也可以是双标签； 注意：如果是单标签，必须以/>结尾

Jsx绑定children时候不能用对象会报错，传入数组时会自动做拼接
绑定style/className时候可以传入对象

3.原理和本质

实际上，jsx 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖。所有的jsx最终都会被转换成React.createElement的函数调用。

createElement需要传递三个参数：

参数一：type

  • 当前ReactElement的类型； -如果是标签元素，那么就使用字符串表示 “div”；
  • 如果是组件元素，那么就直接使用组件的名称；

参数二：config

  • 所有jsx中的属性都在config中以对象的属性和值的形式存储；
  • 比如传入className作为元素的class；

参数三：children

  • 存放在标签中的内容，以children数组的方式进行存储；

  • 当然，如果是多个元素呢？React内部有对它们进行处理，处理的源码在下方

书写规范

-   顶层只有一个根元素

-   jsx 的外层需要包裹一个 （） 方便阅读，可以进行换行书写

-   jsx的标签可以是单标签，也可以是双标签

-   单标签必须以/>结尾

-   jsx中的注释 { /* */}

-   JSX嵌入变量作为子元素

    -   情况一：当变量是Number、String、Array类型时，可以直接显示
    -   情况二：当变量是null、undefined、Boolean类型时，内容为空； 如果希望可以显示null、undefined、Boolean，那么需要转成字符串； 转换的方式有很多，比如toString方法、和空字符串拼接，String(变量)等方式；
    -   情况三：Object对象类型不能作为子元素（not valid as a React child）

总结： JSX 是一个 JavaScript 的语法扩展，结构类似 XML。JSX 主要用于声明 React 元素，但 React 中并不强制使用 JSX。即使使用了 JSX，也会在构建过程中，通过 Babel 插件编译为 React.createElement。所以 JSX 更像是 React.createElement 的一种语法糖。React 团队并不想引入 JavaScript 本身以外的开发体系。而是希望通过合理的关注点分离保持组件开发的纯粹性。

4.精进

商机皆来源于信息不对称，通过信息差挣钱，内行人赚外行人的钱，懂的人赚不懂的人的钱，赚钱的就是持续不断的释放你的信息差优势，来填补客户与你的信息差。

Day72-74【2022年10月12-14日】

学习重点：React事件绑定和虚拟DOM

1.事件绑定基本用法

  • React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
  • 使用 JSX 语法时需要通过{}传入一个函数作为事件处理函数，而不是一个字符串，这个函数在发生事件的时候会执行。
  • 在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式地使用 preventDefault

以上几点也是React事件跟原生事件的区别

2.this绑定问题

为什么要this绑定 再react代码执行的过程中为默认绑定（绑定为window），而代码又是再bable下执行的默认为严格模式，所以要指定this。

  • 普通绑定 - onClick={this.btnClick} - 在内部是独立函数调用,所以this为undefined 解决绑定this的三种方法（推荐第三种写法）

  • this绑定方式一: bind给btnClick显示绑定this - onClick={this.btnClick.bind(this)}

  • this绑定方式二: 使用ES6 class fields语法 - onClick={this.btnClick} - btnClick = () => {}

  • this绑定方式三: 事件监听时候直接传入一个箭头函数 - onClick={() => this.btnClick()}

3.事件传参及数据渲染

3.1事件传参

情况一：获取event对象

  • 很多时候我们需要拿到event对象来做一些事情（比如阻止默认行为）
  • 那么默认情况下，event对象有被直接传入，函数就可以获取到event对象；

    btn1Click(event) {
      console.log(event);
    }
    
    onClick={(event) => this.btn1Click(event)}

情况二：获取更多参数

  • 有更多参数时，我们最好的方式就是传入一个箭头函数，主动执行的事件函数，并且传入相关的其他参数；
  btn2Click(event, name, age) {
      console.log(event, name, age);
    }
    onClick={(event) => this.btn2Click(event, "http", 18)}

3.2条件渲染

方式一：条件判断语句

适合逻辑较多的情况

方式二：三元运算符

适合逻辑比较简单

方式三：与运算符&&

适合如果条件成立，渲染某一个组件；如果条件不成立，什么内容也不渲染；

用的最多的就是列表渲染，在其中用的比较多的渲染方式就用map的形式 如何展示列表呢？

在React中，展示列表最多的方式就是使用数组的map高阶函数；

很多时候我们在展示一个数组中的数据之前，需要先对它进行一些处理：

比如过滤掉一些内容：filter函数

比如截取数组中的一部分内容：slice函数

3.3渲染的key值

key 是用来帮助 react 识别哪些内容被更改、添加或者删除。key 需要写在用数组渲染出来的元素内部，并且需要赋予其一个稳定的值。稳定在这里很重要，因为如果 key 值发生了变更，react 则会触发 UI 的重渲染。这是一个非常有用的特性。

Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。

在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染此外，React 还需要借助 Key 值来判断元素与本地状态的关联关系。

注意事项：

  • key值一定要和具体的元素一一对应；
  • 尽量不要用数组的index去作为key（例如不是使用map回调函数的index作为key值，会出现性能错误，输入框内容无法更新的情况，可参考这篇文章中[点击这里]（juejin.cn/post/709974… 可以使用可以用 uuid 作为key）
  • 不要在render的时候用随机数或者其他操作给元素加上不稳定的key，这样造成的性能开销比不加key的情况下更糟糕。

高级函数： 一个函数接收另一个函数为参数

4.虚拟DOM的发展过程

经历了以下几个阶段 直接对DOM进行操作（繁琐）————模板操作DOM（最初始的数据驱动）————虚拟DOM

模板操作DOM的流程：

组初始化数据 students：

[
  {
    name: 'Bob',
    age: 21
  },
  {
    name: 'Maria',
    age: 22
  },
  {
    name: 'Lynn',
    age: 22
  }
]

然后把这组数据塞进 template 去：

<table>
  {% students.forEach(function(student){ %}
  <tr>
    <td>{% student.name %}</td>
    <td>{% student.age %}</td>
    </tr>
  {% }); %}
</table>

它会把你的 students 这个数据源读进去，塞到上面这段 template 代码里，把它们融合在一起，吐出一段目标 HTML 给你。然后这段 HTML 代码就可以直接被拿去渲染到页面上，成为 DOM。

这个过程差不多是这样：

// 数据和模板融合出 HTML 代码
var targetDOM = template({data: students})
// 添加到页面中去
document.body.appendChild(targetDOM)

这样的操作，可以帮助我们程序员做到只关心数据及数据变化，而不必操心具体的 DOM 细节，大大解放了生产力。

模板带来的问题

模板这种形式的 DOM 方案，其实是非常粗糙的，蕴含了不小的隐患。

大家现在考虑一个常见的场景：如果我发现上述表格中某个同学的名字写错了——Maria 其实叫 Mariana。现在我要把这个名字改掉，于是我改了 students 里对应的姓名信息，模板会做什么呢？

首先，模板引擎会把 targetDOM 这个节点整个给注销掉；

然后，再重新走一遍刚刚走过的渲染流程：

  1. 数据+模板=HTML代码
  2. 把 HTML 代码渲染到页面上，形成真实的 DOM

注意到没有？这一通操作波及了太多无辜群众啊！

本来我只是想改 Maria 的名字，现在整个表格都需要被重新渲染。DOM 操作的范围，从小小的一个表格字段位，扩大到了整个表格。这不合理。

同时，由于上述更新过程中涉及的 DOM 节点注销和 DOM 节点添加，都是真刀真枪、真耗性能的 DOM 操作。当我们更新频率稍微高一点时，页面就会吃不消了。因此，模板渲染方案并不能很好地解决更新的问题，带来了性能上的不友好。

用图来表示是以下过程：

image.png

注销旧 DOM -> 数据 + 模板 => 新的一套HTML 代码 -> 挂载新 DOM 每一次更新都是对DOM整体进行更新，性能上效率很低。

虚拟DOM的更新过程

image.png

数据 + 模板 = 虚拟 DOM -> diff 新旧两套虚拟 DOM 的差异，得到补丁集 -> 把“补丁”打到真实 DOM 上

虚拟 DOM 这一层是用 JS 实现的。也就是说在这个阶段所有的更改、对比操作都是纯 JS 层面的计算。JS vs DOM操作，其性能消耗完全不在一个量级上。如此一来，简单粗暴的“删了重写”，变成了灵活精确的“定点打击”！模板渲染带来的性能问题，就这样被 Virtual DOM 完美地解决了。

5.虚拟DOM的创建过程

我们通过 React.createElement 最终创建出来一个 ReactElement对象，React利用ReactElement对象组成了一个JavaScript的对象树，JavaScript的对象树就是虚拟DOM（Virtual DOM）。

查看ReactElement的树结构将的jsx返回结果进行打印；

一下JSX的打印是一个ReactElement树结构

image.png 而ReactElement最终形成的树结构就是Virtual DOM；

6.对虚拟DOM的理解

从本质上来说，Virtual Dom是一个JavaScript对象，通过对象的方式来表示DOM结构。将页面的状态抽象为JS对象的形式，配合不同的渲染工具，使跨平台渲染成为可能。通过事务处理机制，将多次DOM修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能。

虚拟DOM是对DOM的抽象，这个对象是更加轻量级的对DOM的描述。它设计的最初目的，就是更好的跨平台，比如node.js就没有DOM，如果想实现SSR，那么一个方式就是借助虚拟dom，因为虚拟dom本身是js对象。 在代码渲染到页面之前，vue或者react会把代码转换成一个对象（虚拟DOM）。以对象的形式来描述真实dom结构，最终渲染到页面。在每次数据发生变化前，虚拟dom都会缓存一份，变化之时，现在的虚拟dom会与缓存的虚拟dom进行比较。在vue或者react内部封装了diff算法，通过这个算法来进行比较，渲染时修改改变的变化，原先没有发生改变的通过原先的数据进行渲染。

另外现代前端框架的一个基本要求就是无须手动操作DOM，一方面是因为手动操作DOM无法保证程序性能，多人协作的项目中如果review不严格，可能会有开发者写出性能较低的代码，另一方面更重要的是省略手动DOM操作可以大大提高开发效率。

  • Virtual DOM 是一种编程概念，UI以一种理想化或者说虚拟化的方式保存在内存中
  • Virtual DOM 本质上是 JavaScript 对象，是真实 DOM 的描述，⽤⼀个 JS 对象来描述⼀个 DOM 节点
  • 我们知道jsx转成React代码的本质是 - 转换成React.createElement的函数调用
  • 通过React.createElement的函数创建出来的ReactElement对象
  • React利用ReactElement对象组成了一个JavaScript的对象树 - JavaScript的对象树就是虚拟DOM
  • 虚拟DOM帮助我们从命令式编程转到了声明式编程的模式

声明式编程

React官方的说法：Virtual DOM 是一种编程理念。

  • 在这个理念中，UI以一种理想化或者说虚拟化的方式保存在内存中，并且它是一个相对简单的JavaScript对象

  • 我们可以通过ReactDOM.render让 虚拟DOM 和 真实DOM同步起来，这个过程中叫做协调（Reconciliation）；

这种编程的方式赋予了React声明式的API：

  • 你只需要告诉React希望让UI是什么状态；

  • React来确保DOM和这些状态是匹配的；

  • 你不需要直接进行DOM操作，就可以从手动更改DOM、属性操作、事件处理中解放出来；

7.虚拟DOM的作用

  • 虚拟DOM 通过diff算法 - 以最⼩的代价更新变化的视图保证性能下限，在不进行手动优化的情况下，提供过得去的性能

下面对比一下修改DOM时真实DOM操作和Virtual DOM的过程，来看一下它们重排重绘的性能消耗∶

  • 真实DOM∶ 生成HTML字符串＋ 重建所有的DOM元素
  • Virtual DOM∶ 生成vNode＋ DOMDiff＋必要的DOM更新

Virtual DOM的更新DOM的准备工作耗费更多的时间，也就是JS层面，相比于更多的DOM操作它的消费是极其便宜的。尤雨溪在社区论坛中说道∶ 框架给你的保证是，你不需要手动优化的情况下，我依然可以给你提供过得去的性能。

  • 跨平台渲染比如服务端渲染、uniapp等

  • 声明式编程 - 虚拟DOM帮助我们从命令式编程转到了声明式编程的模式

    • 你只需要告诉React希望让UI是什么状态
    • React来确保DOM和这些状态是匹配的
    • 不需要直接进行DOM操作，就可以从手动更改DOM、属性操作、事件处理中解放出来

8.虚拟DOM和真实DOM的区别

虚拟DOM相对原生的DOM不一定是效率更高，如果只修改一个按钮的文案，那么虚拟 DOM 的操作无论如何都不可能比真实的 DOM 操作更快。在首次渲染大量DOM时，由于多了一层虚拟DOM的计算，虚拟DOM也会比innerHTML插入慢。它能保证性能下限，在真实DOM操作的时候进行针对性的优化时，还是更快的。所以要根据具体的场景进行探讨。

在整个 DOM 操作的演化过程中，其实主要矛盾并不在于性能，而在于开发者写得爽不爽，在于研发体验/研发效率。虚拟 DOM 不是别的，正是前端开发们为了追求更好的研发体验和研发效率而创造出来的高阶产物。虚拟 DOM 并不一定会带来更好的性能，React 官方也从来没有把虚拟 DOM 作为性能层面的卖点对外输出过。虚拟 DOM 的优越之处在于，它能够在提供更爽、更高效的研发模式（也就是函数式的 UI 编程方式）的同时，仍然保持一个还不错的性能。

虚拟DOM的操作不一定性能比真实DOM性能更好，而该方案的提出只是为了简化开发，数据驱动。 虚拟DOM操作的时候会多了一diff算法，相对于真实DOM直接操作来说性能是更低的。 虚拟DOM跟模板相比性能式提高的，跟真实DOM操作相比性能不一定有提高，只能说是保证性能。

尤雨溪在社区论坛中说道∶ 框架给你的保证是，你不需要手动优化的情况下，我依然可以给你提供过得去的性能。

9.diff算法

对新旧树进行对比，只对改变了的标题进行更改，diff算法只是针对模板开发来说性能更高，模板开发的过程中每一次都会把dom树进行更改，而虚拟dom中diff算法的提出提高了模板模式开发的效率。 际上，diff 算法探讨的就是虚拟 DOM 树发生变化后，生成 DOM 树更新补丁的方式。它通过对比新旧两株虚拟 DOM 树的变更差异，将更新补丁作用于真实 DOM，以最小成本完成视图更新。

CgqCHl_qyouAAkb9AAB_cmWuZhc920_mh1609406106571.jpg

具体的流程如下：

  • 真实的 DOM 首先会映射为虚拟 DOM；
  • 当虚拟 DOM 发生变化后，就会根据差距计算生成 patch，这个 patch 是一个结构化的数据，内容包含了增加、更新、移除等；
  • 根据 patch 去更新真实的 DOM，反馈到用户的界面上。

CgqCHl_qypGAZPuGAADYrK9nkJY878_mh1609406162857.jpg

一个简单的例子：

import React from 'react'
export default class ExampleComponent extends React.Component {
  render() {
    if(this.props.isVisible) {
       return <div className="visible">visbile</div>;
    }
     return <div className="hidden">hidden</div>;
  }
}

这里，首先假定 ExampleComponent 可见，然后再改变它的状态，让它不可见 。映射为真实的 DOM 操作是这样的，React 会创建一个 div 节点。

<div class="visible">visbile</div>

当把 visbile 的值变为 false 时，就会替换 class 属性为 hidden，并重写内部的 innerText 为 hidden。这样一个生成补丁、更新差异的过程统称为 diff 算法。

diff算法可以总结为三个策略，分别从树、组件及元素三个层面进行复杂度的优化：

策略一：忽略节点跨层级操作场景，提升比对效率。（基于树进行对比）

这一策略需要进行树比对，即对树进行分层比较。树比对的处理手法是非常“暴力”的，即两棵树只对同一层次的节点进行比较，如果发现节点已经不存在了，则该节点及其子节点会被完全删除掉，不会用于进一步的比较，这就提升了比对效率。

策略二：如果组件的 class 一致，则默认为相似的树结构，否则默认为不同的树结构。****（基于组件进行对比）

在组件比对的过程中：

  • 如果组件是同一类型则进行树比对；
  • 如果不是则直接放入补丁中。

只要父组件类型不同，就会被重新渲染。这也就是为什么 shouldComponentUpdate、PureComponent 及 React.memo 可以提高性能的原因。

策略三：同一层级的子节点，可以通过标记 key 的方式进行列表对比。****（基于节点进行对比）

元素比对主要发生在同层级中，通过标记节点操作生成补丁。节点操作包含了插入、移动、删除等。其中节点重新排序同时涉及插入、移动、删除三个操作，所以效率消耗最大，此时策略三起到了至关重要的作用。通过标记 key的方式，React 可以直接移动 DOM 节点，降低内耗。

10.React 与 Vue 的 diff 算法有何不同

diff 算法是指生成更新补丁的方式，主要应用于虚拟 DOM 树变化后，更新真实 DOM。所以 diff 算法一定存在这样一个过程：触发更新 → 生成补丁 → 应用补丁。

React 的 diff 算法，触发更新的时机主要在 state 变化与 hooks 调用之后。此时触发虚拟 DOM 树变更遍历，采用了深度优先遍历算法。但传统的遍历方式，效率较低。为了优化效率，使用了分治的方式。将单一节点比对转化为了 3 种类型节点的比对，分别是树、组件及元素，以此提升效率。

  • 树比对：由于网页视图中较少有跨层级节点移动，两株虚拟 DOM 树只对同一层次的节点进行比较。
  • 组件比对：如果组件是同一类型，则进行树比对，如果不是，则直接放入到补丁中。
  • 元素比对：主要发生在同层级中，通过标记节点操作生成补丁，节点操作对应真实的 DOM 剪裁操作。

以上是经典的 React diff 算法内容。自 React 16 起，引入了 Fiber 架构。为了使整个更新过程可随时暂停恢复，节点与树分别采用了 FiberNode 与 FiberTree 进行重构。fiberNode 使用了双链表的结构，可以直接找到兄弟节点与子节点。整个更新过程由 current 与 workInProgress 两株树双缓冲完成。workInProgress 更新完成后，再通过修改 current 相关指针指向新节点。

Vue 的整体 diff 策略与 React 对齐，虽然缺乏时间切片能力，但这并不意味着 Vue 的性能更差，因为在 Vue 3 初期引入过，后期因为收益不高移除掉了。除了高帧率动画，在 Vue 中其他的场景几乎都可以使用防抖和节流去提高响应性能。

11.总结

React 并不承诺比直接操作 DOM 更快。但是别忘了，React 可是为我们提供了数据驱动、不用操心 DOM 细节的便利，在这个基础上，它仍然维持了一个过得去的性能。React 的强大之处不在于性能碾压了xx、碾压了xxx，而在于它在性能和开发体验&可维护性之间做到了一个很好的平衡。

12精进

用结构化思维+专业术语+真实案例说服他人，这是个人要提高的方面，择重从以下几点提升：学方法论+积累各方面知识（上到天文下到地理）+实践输出。

Day75-76【2022年10月16-17日】

休息

Day77-83【2022年10月18-23日】

10.17精进
了解真相才能获得真正的自由，了解真相的本原可以解决这方面的大部分问题。
10.18精进
凡是做好预案，将最差可能发生的情况列入计划表中，事情发生的时候就不会不知所措。
10.19精进
工作中不要光闷头干活，活交给谁做都一样关键是要学会向上管理，面对不同的领导要根据其管理风格，行为特征，特点去调整自己的工作思路，多沟通快速领会意图，提高效率。
10.20精进
人生有很多种可能性，就像一台计算机，你输入不同命令，它就给你想要的结果。
所以，你要达成什么样的目的，就去下达什么样的命令，就能得到想要的结果。
自律，行动。
10.21精进
做人不能太要面子，有时候会为了所谓的面子而失去很多机会。
10.22精进
人生多半随机，少半必然。将结果确定的事情尽力做好，并敢于尝试结果随机的事情，每天接触认知陌生领域才能进步。 忙

参考资料

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

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

备注

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

avatar
文章
阅读
粉丝