最后
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
❤️ 谢谢支持,喜欢的话别忘了 关注、点赞哦。
三、创建第一个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