读者福利
========
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
由于篇幅过长,就不展示所有面试题了,想要完整面试题目的朋友(另有小编自己整理的2024大厂高频面试题及答案附赠)
建议先下载好资料后,再阅读本文。demo代码和资料下载
目录
前言
–
从最开始开始接触 React Native(以下简称 RN),到写下第一篇博文后,就再也没有写过相关的文章了,随着微信小程序的正式发布,其实也又一次将一个概念推到公众面前,那就是全栈式前端,这是个什么概念呢?大概意思就是一个人可以同时写 Android、iOS、Web 程序。可能民间不乏一些大神 Java、OC、Swift、JS 都写得特别好,但我相信大部分人还是和我一样,毕业后只从事一个方向的开发,所以要成为全栈式前端有比较大的困难。
但是随着发 RN 布,这一切似乎变得有了可能。这也是随着社会进步不断要求生产力提高后导致的必然发展趋势。虽然这个概念早在RN前就有了,但是之所以能在这个时间火起来,那就说明时候到了。像手机上的指纹识别一样,并不是苹果第一个集成到手机上,但却是苹果把它用在了最正确的时代。现在连几百元的手机都有指纹识别了。所以如果去年你没有去关注去学习RN 不要紧,但是随着微信发布小程序,这再次说明了全栈式前端是一个趋势,如果你还没有趁机上车,那……那其实也没啥,一门心思写好 Android 其实也是可以的,毕竟专才也是要有的!
哈哈~前面说的有点危言耸听了,但还是希望那些学有余力、热爱并关注前端开发的人能早点搭上这趟车。虽然目前RN还有很多问题,比如首当其冲的就是性能问题,但是随着版本的不断迭代,我相信这个问题迟早会被解决的。你问我那是什么时候?现在RN版本是 0.40,会不会是 1.0 发布的时候呢?哈哈~这个谁能知道呢,但是有生之年肯定会的!说了这么多,让我们正式发车吧!
二、回答一些问题
- 为什么写此教程
首先主要是出于我们公司业务发展上的要求,并且我对 RN 开发很感兴趣,因为它确实可以提高生产力,所以公司就指派我负责这次 RN 在公司移动端内部的推行。其次是苦于网上虽然关于RN资料很多,但是却没有一个比较系统的学习方案,看视频课程又觉得效率太低,这也导致我在学习RN的过程中浪费了大量的时间去搜集资料。所以我想写一篇文章记录一下我的学习过程,将我从零开始的入门学习心得和大家分享一下。目的就是为了让更多想学 RN 的人,不用再东奔西走的把时间浪费在搜集资料,能够快速的入门进行学习。
- 本文适合哪些人看?
1.热爱前端开发,并且总想开发一些能看得见的东西
2.对 RN 有着像对女朋友一样的兴趣,愿意去了解他
3.可以不懂 Web 开发,但最好有一定 Android 或者 iOS 开发经验。
4.对 RN 完全不了解的新人(如果是RN老司机不巧看到了这篇文章,我想说…哥,收徒么?我骨骼精奇,是个码代码的好手…哥…诶…别走啊…我还跪着呢!)
- 如何使用本教程?
看!多看!反复看! 敲!多敲!反复敲!
嘿嘿~说正经的,必须要结合我给出的 Demo 中的代码一起看。而且我会附上我在学习过程中梳理的思维导图文件,可以结合起来和文章一起看,这样学习的思路会更加清晰一些。
- 需要先学习 JavaScript、HTML、CSS 么?
HTML 和 CSS 没什么要求,略懂就行,不懂也无所谓。但是JS还是要懂一点(卧槽,“一点”是多少?就和菜谱里的盐少许一样难以琢磨)。好吧,我再说详细一点。把阮一峰老师的《 ECMAScript 6 入门》这篇关于ES6的文档花一周时间详细看一下其实就差不多了。至于 JS 里涉及的一些其他特性,闭包什么的,后面入门了再研究也可以。包括 ES7 关于网络请求写法的变化,我们也可以先不用管。
- 如何编写demo
是不是我们编写每一个知识点的demo都要通过
react-native init XXXX
的方式去新建一个项目呢?当然不是,我们可以把所有代码都写到一个demo里,并通过分包进行管理(app的文件夹是自己创建的,名字自定),这样自己看起来也比较方便。然后每个 demo 都通过 import 的方式导入到index.android/ios.js
文件中进行使用。
- 保不保证学习效果?
怎么不问我包不包就业呢?
三、章节内容(预计用时:9.5~14.5天)
1.内容简介
1.1)本教程共分为三个阶段,第一阶段主要是带大家入门,熟悉一些 RN 基础组件、JS 语法等等。该阶段结束后,基本可以搭建一个 App 框架了,甚至可以写一些简单的新闻类 App,在该阶段的教程中我仿写的是【开眼v3.1.2】。
1.2)本文中有大量的内容来自各家博客,所以出于对原文作者的尊重,我会直接给出原文链接并附上作者名字,如果看到对应的章节,请大家跳转到相应的网址去看一下。现在网上关于 RN 的文章太多,看的眼花缭乱结果却往往不容易形成体系,所以我只整理了一些必须的内容,而且相关的内容看我推荐这几篇文章基本也就够了。
1.3)在开始第一阶段的学习前,先来看一下完成这个阶段的学习后,我们大概能做出一个什么效果来。希望借此也能给你一些学习的动力吧!上图(被压缩太厉害了,凑合看吧)!
2.环境搭建(预计用时:1~2天)
按照RN中文社区的指导就可以了。不过过程中会遇到一些坑,我也附上我的踩坑记录。我建议大家可以先看一下踩坑记录,然后再开始安装环境。
2.1) 环境搭建踩坑指南:《一起学》安卓 React Native 开发–踩坑大全(持续更新…)
2.3)开发工具安装和配置 :
本文中使用 WebStorm 进行开发,也有人用 Atom 或 Sublime,对此我想说:赶快换 WebStrom 吧。为了不牵扯什么不必要的问题,下载地址我就不贴了,自行破*解吧。我最多只能说一下我用的是下面这个版本的。
安装好 WebStorm 后,为了更便捷的去开发,我们需要安装一些插件,以及进行一些常用配置。比如RN组件库的安装,添加一些常用的Live Templates等,下图是我添加的两个比较常用的,给大家参考一下,至于如何添加 Live Template 大家可以自行百度一下,比较简单,我就不过多赘述了。
配置Live Templates
3.Hello World(预计用时:0.5天)
不教大家写 Hello World 的教程,不是好教程!千万注意!【要看注释】哈!不然会很坑!
import React, { Component } from ‘react’;
import { AppRegistry, Text } from ‘react-native’;
class HelloWorldApp extends Component {
render() {
return (
);
}
}
// 注意,这里用引号括起来的 ‘HelloWorldApp’ 必须和你 init 时创建的项目名一致
AppRegistry.registerComponent(‘HelloWorldApp’, () => HelloWorldApp);
4.了解 index.android/ios.js
index.android.js 和 index.ios.js 分别作为 Android 手机和 iOS 手机上程序开始的入口,所以我们先来了解一下这个文件的结构。
1)组件导入区: 所有用到的组件都需要事先进行导入,包括样式也需要进行导入
**2)核心代码区:**所有逻辑代码编写的地方
**3)组件样式区:**render() 方法中用到的组件的样式,可以集中在这里编写
**4)注册启动组件:**组件只有注册后才能运行。这里用到的 AppRegistry 也需要在组件导入区进行导入
5.Flex布局(预计用时:2~3天)
Flex 布局是 Web 开发必备的技能,如果你是 Web 开发人员,可以直接跳过该部分内容。但是也需要注意的是 Web 中的一些属性在 RN 中是没有的,而且属性命名是通过小驼峰的方式进行命名的。后面我会附上我自己整理的关于 RN 组件支持的属性大全。可能不完善,但是常用的应该是有了。如果 Flex 布局没有练熟,还是不要看后面的了,所以请多花点时间在这里,甚至可以自己找一些比较有难度布局进行练习。
-
demo相关代码在这里,如果你已经下载了我整个 HelloRN 的项目,那代码就在app/01_flex_demo中
6.网络请求(fetch)(预计用时:2~3天)
JavaScript
-
js的基本类型有哪些?引用类型有哪些?null和undefined的区别。
-
如何判断一个变量是Array类型?如何判断一个变量是Number类型?(都不止一种)
-
Object是引用类型嘛?引用类型和基本类型有什么区别?哪个是存在堆哪一个是存在栈上面的?
-
JS常见的dom操作api
-
解释一下事件冒泡和事件捕获
-
事件委托(手写例子),事件冒泡和捕获,如何阻止冒泡?如何组织默认事件?
-
对闭包的理解?什么时候构成闭包?闭包的实现方法?闭包的优缺点?
-
this有哪些使用场景?跟C,Java中的this有什么区别?如何改变this的值?
-
call,apply,bind
-
显示原型和隐式原型,手绘原型链,原型链是什么?为什么要有原型链
-
创建对象的多种方式
-
实现继承的多种方式和优缺点
-
new 一个对象具体做了什么
-
手写Ajax,XMLHttpRequest
-
变量提升
-
举例说明一个匿名函数的典型用例
-
指出JS的宿主对象和原生对象的区别,为什么扩展JS内置对象不是好的做法?有哪些内置对象和内置函数?
-
attribute和property的区别
-
document load和document DOMContentLoaded两个事件的区别
-
JS代码调试
-
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】