本文目录一览：
web前端需要掌握的哪些知识
一个合格的web前端需要掌握哪些技术？
最基础的自然是JavaScript，HTML和css这三种语言。
首先了解下它们到底是什么。
HTML是用户看到的网页的骨架，比如你会发现当前页面分为左中右三个部分，其中还填充了不同的文字和图片；每个子部分还会继续细分，比如当前页面的中间部分下方有输入框等等。
CSS是网页展示的细节控制，比如你会发现有的文字是红底白色，有的子部分占了页面的二分之一宽，有的只占六分之一，有些部分需要用户进行某些操作（如点击，滑动）才会出现等等，这些就是有CSS来控制。
JavaScript是负责捕捉用户在浏览器上的操作，并与后端服务器进行数据交换的脚本语言。当用户在前端进行点击，输入等操作的时候，会触动绑定了该动作的JavaScript脚本，然后JavaScript收集数据，调用后端的api接口，再将后端返回的数据交给HTML和CSS渲染出来。
一个网页的HTML代码和CSS代码是可以直接在浏览器中查看的，你可以直接按F12，就能看到下图右侧的模块，左右侧红框就是代码与实际页面的对应关系。因此如果你看到某个网站的布局很不错，不妨点击F12，进行学习。
前端框架
然而，实际应用中，已经很少有正规的项目组直接用上述三种语言进行web 前端开发了，而是使用很多封装了这三种语言的框架，比如
Vue.js
，angular，react native等等。它们是来自谷歌和Facebook的大神项目组，基于自己的经验，封装了原生前端语言，实现了更多更复杂更酷炫的功能。因此，可以说，学会使用这些框架，能达到事半功倍的效果。
比如用了vue，它是自底向上增量开发的设计，其核心只关心图层，而且还可以与其他库或已存项目融合，学习门槛极其友好；另一方面，vue可以驱动单文件组件和vue生态系统支持的库开发的复杂单页应用。有了这个生态系统，可以说，vue是处在一个不断壮大，不断完善的欣欣向荣的状态。
网络通信协议
由于前后端分离的趋势，前端还需要了解很多网络通信协议的知识，这里不局限于http协议，因为据我的经验，有时候我们还会用到websocket等协议。因此，前端需要简单了解不同协议的特点以及使用方式，但是好消息是不用像学习计算机网络课程一样对每种协议的原理都了解的特别透彻，只要学会如何用前端语言发送这种协议的请求就够了。
单页面应用的实现方式
React的组件撰写和调用主要依赖于ES6的模块化和JSX的语法，以下是一个例子：
// main.js
import React from 'react'
import { render } from 'react-dom'
import MyComponent from './component.js'
import './main.css'
// 主组件
class MyDemo extends React.Component {
render() {
return (
div className="box"
MyComponent /
/div
)
}
}
render((
MyDemo /
), document.getElementById('app'))
// component.js
// 子组件
import React from 'react'
export default class MyComponent extends React.Component {
render() {
return (
div
p这是一个组件！/p
/div
)
}
}
// main.css
.box {
width: 100%
}
相比Vue.js框架，我个人认为React的组件编写方式还是没有Vue来的舒服，组件的css样式还是脱离在组件外部的，维护起来也不是很方便。
从这个例子中我们就可以看到React的虚拟DOM和JSX的特性了。相比其他框架，React的虚拟DOM不仅可以提升页面的性能，同时还可以防止XSS攻击等。关于虚拟DOM的具体原理这里不作介绍
至于JSX语法则是JS的一种语法糖，我们可以通过这种语法糖来便捷实现一些功能，这里JSX 把类 XML 的语法转成纯粹 JavaScript，XML 元素、属性和子节点被转换成 React.createElement 的参数。类似的JS语法糖还有TypeScript等。
前端到底要学到什么程度才能去找工作了
原来问及前端工程师的基础技能素养，可能html、css、JavaScript就搞定了。但是时代在变，企业对于人才的需求与能力要求也在发生变化，就web前端本身来说，每年也有很多新技术、新趋势的涌现。
要知道前端=切图这个职业设定早就成为过去式了，这种狭隘的职业定位是在其技术匮乏时代的产物，现在web前端工程师基本都是使用html5组织页面，使用css3绘图，很多元素已经不需要再使用图片还原设计，这其实是一个很大的进步。
而且web前端的工程师的技能要求已经不是仅仅停留在前端这个层面，像后端基础、大数据可视化、用户心理等都要有所涉及和了解。
前端工程师要学到什么程度才能找到一份最基本的工作？
单纯从技术角度分析，我大致做了如下知识点罗列，希望对大家的学习有帮助~
PC端网站布局：HTML基础，CSS基础，CSS核心属性，CSS样式层叠，继承，盒模型，容器，溢出及元素类型，浏览器兼容与宽高自适度，定位，锚点与透明，图片整合，表格，CSS属性与滤镜等。
HTML5+CSS3基础：HTML5新增的元素与属性，表单域增强元素，CSS3选择器，文字字体相关样式，CSS3位移与变形处理，CSS3 2D转换与过度动画，CSS3 3D转换与关键帧动画，弹性盒模型，媒体查询，响应式设计等。
WebApp页面布局：移动端页面设计规范，移动端切图，文字流式/控件弹性/图片等比例/特殊设计的100%布局，等比缩放布局，viewport/meta，rem/vw的使用，flexbox详解，移动web特别样式处理等。
原生JavaScript交互功能开发：基本语法，循环语句，函数与数组，String与Date，BOM与DOM，事件，拖拽效果，cookie存储，正则表达式，Ajax，面向对象基础，运动与游戏开发等。
面向对象进阶与ES5/ES6应用：Promise/A+，设计模式（观察者模式等），原型链，构造函数，执行上下文栈与执行上下文，变量对象与活动对象，作用域链，闭包，this，ES5，ES6等。
JavaScript工具库自主研发：DOM库，事件库，AJAX库，原型和继承库，MVVM核心库，基于SPA的路由库等。
jQuery经典交互特效：时间轴特效，tab页面切换效果，网页定位导航特效，滑动门特效，焦点图轮播特效，导航条菜单效果，瀑布流特效，弹出层效果，倒计时效果等。
PHP+MySQL后端基础：PHP，MySQL，HTTP(s)协议详解，Ajax进阶、跨域与Defered，Apache与Nginx 环境搭建与配置，接口的定义，Mock数据，Restful，前后端联调，前端安全(XSS,CSRF,JSON注入)等。
前端工程化与模块化应用：Gulp，Webpack，NPM，Git/SVN，CommonJS，AMD，CMD，ES6模块化等。
PC端全栈开发：大首页、列表页与详情页展示与交互特效、搜索、登录与注册、购物车、jQueryUI 与 jQuery EasyUI、Bootstrap(ACE)、Highcharts/Echarts、ArtTemplate、Velocity、Smarty、云平台系统前端等。
应用Vue.js开发WebApp：Vue.js基础，模块化，单文件组件，路由，与服务器通信，状态管理，单元测试与生产发布，服务端渲染SSR与Nuxt.js，基于Vue.js企业级项目开发等。
应用React.js开发WebApp：ReactJS基础，JSX语法，组件，flux+Redux，React，Router路由，动画效果，基于React 企业级项目研发等。
应用Angular开发WebApp：TypeScript 基础与进阶，开发环境配置，Hello World，架构、模块与组件，模板，元数据、数据绑定与数据显示，表单，服务与指令，依赖注入，路由，Ionic 3 MUI框架等。
微信公众号开发：初识微信公众号，订阅号的基本功能，使用百度BAE实现代码的快速上线，使用Git完成线上代码部署，公众号开发权限及功能接入，微信JSSDK接口API，微信场景项目开发与接入等。
微信小程序开发：微信小程序初探，小程序入门必学，小程序组件体验，小程序大功能，项目实战等。
React Native：React Native 初探，React Native 项目导航，React Native 项目文本框，React Native 项目滚动分页，React Native 项目第三方登录，React Native其他组件等。
各类混合应用开发：自主原生Navtive Hybrid，第三方Hybrid框架Cordova/Phone gap，第三方Hybrid框架等。
请问怎么学习react.js
一、JSX介绍
①定义
JSX=JavaScript XML，是一种在React组件内部构建标签的类XML语法。React在不使用JSX的情况下一样可以工作，但是使用JSX可以提高组件的可读性，增强JS语义，结构清晰，抽象程度高，代码模块化。因此推荐在React中使用JSX。
②特点
1、元素名首字母大写
2、符合嵌套规则
3、可以写入求值表达式
4、驼峰式命名
5、不能使用javascript原生函数的一些关键词，如for和class。需要替换成htmlFor和className
③使用方法
1、使用动态值：JSX将两个花括号之间的内容{...}渲染为动态值，花括号指明了一个javascript上下文环境,花括号里面可以是一个变量，也可以是函数。 例如：
var name=“winty”;
p{name}/p
function date(d){
return [
d.getFullYear(),
d.getMonth()+1,
d.getDate()
].join('-);
};
p{date(new Date()}/p
2.注释：首先，在子节点中注释要用大括号包裹起来，然后就可以单行注释/**/，也可以多行注释//。
var Hello=React.createClass({
render:function(){
return p name="winty" //set name
Hello ,World
/*
多行注释
多行注释
*/
/p
}
});
3.使用CSS内联样式
var style={
color:#000;
};
React.render(div style={style}..../div,document.body);
4.使用条件判断
//方法1，三目运算符
var Hello=React.createClass({
render:function(){
return pHello,{this.props.name?this.props.name : "LuckyWinty"}/p
}
});
//方法2，if-else语句
var Hello1=React.createClass({
getName:function(){
if(this.props.name)
return this.props.name;
else
return "LuckyWinty";
render:function(){
return pHello,{this.getName}/p
}
});
//方法3，使用逻辑||运算符
var Hello3=React.createClass({
render:function(){
return pHello,{this.props.name||"LuckyWinty"}/p
}
});
④非DOM属性介绍
JSX中有3个非DOM属性，分别是：dangerouslySetInnerHTML、ref、key。
dangerouslySetInnerHTML：在JSX中直接插入HTML代码，但是如果能避免使用这个属性则尽量避免使用。
不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。 净化用户的输入来显示的时候，经常会出现错误，不合适的净化也是导致网页攻击 的原因之一。
在彻底的理解安全问题后果并正确地净化数据之后，生成只包含唯一 key __html 的对象，并且对象的值是净化后的数据。例如：
function createMarkup() {
return {__html: 'First · Second'};
};
div dangerouslySetInnerHTML={createMarkup()} /
ref：父组件引用子组件，你可以通过在属性中设置期望的引用名来定义一个引用。例如：
...
render:function(){
return div
input ref="MyInput" .../
/div
}
...
//然后你就可以在组件中的任何地方使用this.refs.myInput获取这个引用了
key：是一个可选的唯一标识符，通过给组件设置一个独一无二的键，并确保它在一个渲染周期中保持一致，使得React能够更只能地决定应该重用一个组件还是销毁并重建一个组件，进而提高渲染性能。例如：
var Hello3=React.createClass({
render:function(){
return ul
li key="1"1/li
li key="2"2/li
li key="3"3/li
/ul
}
});
二、React组件生命周期详解
组件本质上就是状态机，输入确定，输出一定确定。状态和结果一一对应，从而使程序变得直观。状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出响应。可以用事件的思路来理解状态,但是事件与事件之间互相独立，但是不同状态之间可能会互相影响。
组件的所有状态结合起来就成了组件的生命周期。即：初始化阶段-运行中阶段-销毁阶段。
不同生命周期内可以自定义的函数
初始化阶段：
①getDefaultProps:获取默认属性，只调用一次，是在createClass之后调用的。实例之间共享引用
②getInitialState:初始化每个实例的特有初始化状态
③componentWillMount:mout就是装载的意思，这个方法的意思就是说组件即将被装载到页面中，也是render之前最后一次修改状态的机会
④render:组件在render函数生成虚拟节点，最后由react将虚拟节点变成真正的节点渲染到页面上。只能访问this.props和this.state，只有一个顶层组件，最好不要修改状态和DOM输出。
⑤componentDidMount:组件被装载后才会被调用，也就是说调用这个方法的时候，组件已经被渲染到了页面上，这个时候可以修改DOM
这五个函数的执行顺序就是从上到下的。需要注意的是getDefaultProps只会在组件的第一个实例被初始化的时候被调用，也就是说第二个实例之后都是从getInitialState开始调用。同一个组件的所有实例的默认属性都是一样的。
主要测试代码：script type="text/babel"
var Hello=React.createClass({
getDefaultProps:function(){
console.log("getDefaultProps, 1");
},
getInitialState:function(){
console.log("getInitialState, 2");
return null;
},
componentWillMount:function(){
console.log("componentWillMount, 3");
},
render:function(){
console.log("render, 4");
return pHi,LuckyWinty!/p
},
componentDidMount:function(){
console.log("componentDidMount, 5");
},
});
React.render(Hello/Hello,document.body);
/script
①componentWillReceiveProps:这个函数在组件即将接收到属性时触发的，或者是父组件的属性发生变化时，属性在传送到组件之前，开发者有机会通过这个函数去处理属性。比如修改，更新内部状态等。
②shouldComponentUpdate：当组件接收到新属性或者新状态的时候触发的。这个是一个疑问函数，也就是说我们可以告诉react不去更新某个组件。因为有时候属性或者状态并不会导致组件发生更新。在组件不需要更新的情况下，手动使shouldComponentUpdate返回false，这样react就不需要再经过render和diff算法去判断是否要更新，从而提高性能。
③componentWillUpdate：render触发之前触发，更新组件，不能修改属性和状态
④render：组件在render函数生成虚拟节点，最后由react将虚拟节点变成真正的节点渲染到页面上，只能访问this.props和this.state，只有一个顶层组件，最好不要修改状态和DOM输出。
⑤componentDidUpdate：render之后，真正的DOM被渲染之后调用