2024年前端最新《React精髓》学习笔记_react学习笔记，2024年最新web前端面试项目有哪些

2401_84433974

于 2024-05-13 19:50:48 发布

阅读量749

点赞数 17

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84433974/article/details/138817141

版权

程序员专栏收录该内容

192 篇文章 1 订阅

订阅专栏

最后

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

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

三、创建第一个React组件；

react组件与状态。假设用一个简单的状态机来表示用户界面，那么用户行为将会触发状态机状态的改变，每个状态用不同的react元素表示，那么这个状态机就是React组件。

React组件的state属性应该用来存储事件处理函数随时可能发生改变的数据，已达到重新渲染组件的目的；应该保持在state对象中组件状态的最小可能表示形式，无论在state中放了什么都要自己手动更新，而render（）函数中放的东西，都会通render（）自动更新。

在事件处理中，默认React会在冒泡阶段触发事件处理函数，但可以在事件处理函数名后添加Capture来告诉React，在捕获阶段触发他们。如onClickCapture。此外React在SyntheticEvent对象上包装了浏览器的原生事件，这意味着可以照常使用stopPropagation()和preventDefault()方法，如果要访问浏览器的原生事件，可以通过nativeEvent属性来做，如需要处理touch事件，可以简单的调用React.initializeTouchEvets(true).同时React不会将事件处理函数渲染到真实dom中，而是React在顶层使用一个监听函数来监听事件，并把他们代理到相对应的事件实例函数。

四、让React组件变得可响应；

项目设计中，可以从顶层React元素开始，然后实现它的子组件，自顶向下来构建组件的层级

组件的写法：

引入依赖模块
定义React组件
作为模块导出React组件

子组件更新父组件的机制

父组件传递一个回调函数作为子组件的属性。
每当子组件想要更新父组件的state时，它就会调用这个回调函数并传递必要的数据到父组件的新状态中
父组件更新它的state，触发render()函数重新渲染所有有必要更新的子组件；

React单向数据流绑定，父组件通过getInitialState设定默认数据，数据作为属性传递给子组件，子组件再通过回调函数，通过访问state更新父组件的数据。这种数据流单向流动的模式，有助于增加组价的数量，而不增加页面的复杂度；但是这种数据流的层层传递会浪费很多冗余的数据，但是容易调试。要优化这种方案有很多，Flux就是其中的一种。

五、结合其他库来使用React；

在上面的功能划分中，第一条是React做不到的，这和UI没什么关系，所以可以结合其他库来实现功能，使用snapkite引擎；

安装snapkite数据流模块

npm install --save snapkite-stream-client

React组件的生命周期

创建期

getDefaultProps():
getInitialState():
componentWillMount():
render():
componentDidMount():此阶段好和外部JavaScript库，发送AJax请求，设置定时器setInterval(),setTimeout();

销毁期

componentWillUnmount():清理一些数据和不需要的业务逻辑

六、更新React组件；

存在期

componentWillReceiveProps():
shouldComponentUpdate():
componentWillUpdate():
render():
componentDidUpdate():

将Css样式作为JavaScript对象内联到React组件中，好处是

移植：移植性比较好，在同一个JavaScript文件中可以将样式都分享出去。
封装：将样式内联可以限制它的影响范围
灵活：可以用JavaScript来计算Css

缺点也很明显，CSP内容安全策略会阻止内联样式生效。

通过ReactDOMServer生成的组件HTML字符串，可以看出react的灵活性，既可以使用相同的React组件来渲染DOM元素，也可以生成HTML字符串传递给第三方API。

React render（）渲染虚拟DOM只能是一个根节点，如果要渲染多个，则要用一个父容器包裹一下，如div.

React通过组件的propType对象来验证组件的属性。

七、构建复杂的React组件；

父子组价间的数据传递。管理状态是关键。
这里写图片描述

八、使用Jest来测试React应用组件；

许多自信的React开发人员都会觉得自己的React组件没有什么重大缺陷，这也导致了一个误区：不写单元测试。

怎么针对JavaScript函数写单元测试呢？可以借助很多单元测试框架–Jest(Facebook出品)，它是有测试框架Jasmine演变而来的。

通过模拟对象来进行测试，叫Mocking(模拟)，Jest会扫描tests目录下的所有测试用例，并执行。

在Jest中describe定义一个测试套件，接收两个参数

套件名称，描述即将被测试的功能；
套件实现，实现该套件的函数；

一个单独的测试称为测试规范（specs）,通过全局函数it()定义，和describe()函数类似，接收两个参数

测试规范名称：描述测试规范的功能
测试规范的实现：实现测试规范的函数

通过实际的与期望的输出值做比较，得到结果，是通过规范还是失败规范调用期望expect()以及匹配器toEqual（toBe）比较。toEqual是深度比较，适合数组，而toBe是简单数值，boolean数据类型的比较。toBeDefined()：非undefined值；toBe(false):返回false；not.toBe(true)

测试规范名称是很有必要的，因为这个在测试不通过时的日志信息很重要。

安装jest

npm install --save-dev jest-cli
npm test

修改package.json脚本

  "scripts": {
    "test": "jest"
  },

jest.autoMockOff()设置不要去做自动模拟数据，自动模拟会真实调用require依赖的结果作为模拟的数据，但是这个的预期达不到效果，所以可以调用jest.dontMock()方法，但是这样的话每次依赖写都麻烦，所以可以直接jest.autoMockOff。

测试React组件：在组件的目录下创建test测试目录，并安装相应的测试库

npm install --save-dev react-addons-test-utils

jest.genMockFunction()返回一个模拟函数，TestUtils.findRenderedDOMComponentWithTag（）方法从已经渲染的DOM中查找对应的元素。TestUtils.Simulate.click（）模拟一个点击事件发送给DOM节点。最后expected(handleClick).toBeCalled(),是否被调用。所以的Jest模拟函数都有一个.mock属性，这个属性保存了模拟函数被调用时的数据，handleClick.mock.calls是自己每次被调用的数据，是一个数组。handleClick.mock.calls.length来判断调用的次数。

为了让Jest支持JSX的语法，还要配置babel-jest模块。

  "jest": {
    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
    "testFileExtensions": [
      "es6",
      "js"
    ],

安装babel-jest模块

npm install --save-dev babel-jest

九、使用Flux来完善React框架；

通过构建复杂的React组件，完整的数据流向是什么？数据入口在哪里？数据从Stream组件开始进入应用，通过层层传递到达Tweet组件，然后又层层传递到达父组件Application。由父组件负责管理和保存。父组件同时将数据传递给其他子组件。但是在其中很多数据在中间是使用不到的，但还要维持他的状态，这就造成了维护上的极大难度。比如onAdddTweetToCollection（）函数只在Tweet组件中使用，但是被传递了多次

Application > Stream > StreamTweet > Tweet

向应用组件较少时，这种方案还勉强可以维护，但是当应用组件很多时，这就晕了，同时性能上也不允许。为了阻止这样的噩梦发生，我们可以做两件事

改变数据进入应用的方式；
改变组件获取和修改数据的方式；

在Flux中，数据也是单向流动Action > Dispatcher > Store，把应用的关注点分为4个部分：

Action(动作):每当应用状态改变，都会创建一个Action;在Flux中动作不能脱离Dispathcer单独使用，所有动作都通过分发器分发到存储中。
Dispatcher(分发器): 管理注册过的回调函数，注册的动作都会通过分发器分发到存储中；
Store(存储):数据最终流向存储，存储负责管理应用中的数据，提供了读取数据的方法，但没有修改数据的方法，修改数据的方法，通过分发器分发动作来实现。
View(视图)

安装flux npm install --save flux，npm install --save object-assign

1.创建分发器

var Dispatcher = require('flux').Dispatcher;
module.exports = new Dispatcher();

2.创建动作生成器

创建action对象，指定属性类型，以及状态数据，并通过分发器分发action

总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

前端面试题汇总

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

JavaScript

性能

linux

性能

linux

2401_84433974

关注

17
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
2024年前端最新《React精髓》学习笔记_react学习笔记，2024年最新web前端面试项目有哪些

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。前端面试题汇总。
复制链接

扫一扫