整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
ES6（ECMAScript 2015）及之后的版本引入了许多让JavaScript编程更加高效、简洁的新特性。以下是其中一些关键特性及示例：
const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(n => n * n); // 使用箭头函数const name = "World";
console.log(`Hello, ${name}!`); // 使用模板字符串Promise是解决JavaScript异步编程的一个重要概念。它代表了一个尚未完成，但未来会完成的操作。Promise有三种状态：pending（等待中）、fulfilled（已成功）和rejected（已失败）。
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve("Data fetched"), 2000);
});
};
fetchData().then(data => console.log(data)); // 输出：Data fetchedasync和await是基于Promise的语法糖，使异步代码看起来和同步代码类似，从而简化了异步操作的书写。
const fetchData = async () => {
const data = await new Promise((resolve, reject) => {
setTimeout(() => resolve("Data fetched with async/await"), 2000);
});
console.log(data);
};
fetchData(); // 输出：Data fetched with async/await现代JavaScript框架，如Vue.js，大量使用了ES6+的新特性来提升开发效率和程序的可读性。例如，Vue 3 利用了Proxy来实现响应式系统，同时也在其组件系统中广泛使用了ES6+的特性，如模块导入、箭头函数等。
函数式编程是一种编程范式，它将计算视为数学函数的评估，并避免改变状态和可变数据。JavaScript作为一种多范式语言，支持函数式编程的核心概念，如纯函数、高阶函数等。
const pureAdd = (a, b) => a + b; // 纯函数const withLogging = fn => (...args) => {
console.log(`Calling function with arguments: ${args}`);
const result = fn(...args);
console.log(`Function returned: ${result}`);
return result;
};
const add = (a, b) => a + b;
const addWithLogging = withLogging(add);
addWithLogging(2, 3); // 日志输出调用细节和结果在现代Web开发中，构建高效的动态用户界面(UI)是至关重要的。JavaScript通过操作DOM（文档对象模型）使得开发者能够创建富交互的Web应用。通过监听用户的行为（如点击、滚动等事件），JavaScript可以动态地修改HTML和CSS，提供动态内容的加载、动画效果以及即时的用户反馈。
document.getElementById('addButton').addEventListener('click', function() {
const listItem = document.createElement('li');
listItem.textContent = '新的列表项';
document.getElementById('myList').appendChild(listItem);
});随着单页应用（SPA）的流行，状态管理变得越来越复杂。状态管理是指在用户与应用交互过程中，对状态的有效管理和更新。常见的状态管理方案包括Redux、Vuex（Vue的状态管理方案）、以及React的Context API。
Redux示例：
Redux通过一个全局的store来存储状态，组件通过dispatch发送action来更新状态，通过subscribe监听状态变化。
// 创建Reducer
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
// 创建store
let store = Redux.createStore(counter);
store.subscribe(() => console.log(store.getState()));
// 发送action
store.dispatch({ type: 'INCREMENT' });模块化是指将大型的JavaScript应用分解成小的、可维护的、可重用的代码块。ES6引入了import和export语法，使得模块化开发成为可能。
示例：
// math.js
export function add(x, y) {
return x + y;
}
// app.js
import { add } from './math.js';
console.log(add(2, 3));Web性能优化是提高用户体验的关键。它包括减少页面加载时间、优化渲染路径、减少JavaScript执行时间等。一些常见的性能优化技巧包括使用压缩和合并资源文件、懒加载图片和脚本、利用浏览器缓存等。
懒加载图片示例：
使用Intersection Observer API实现图片的懒加载。
document.addEventListener("DOMContentLoaded", function() {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
});
});
document.querySelectorAll('img[data-src]').forEach(img => {
observer.observe(img);
});
});JavaScript的工程化是指使用工具和流程来提高开发效率和代码质量。自动化测试则确保代码更改不会破坏现有功能。
构建工具示例：Webpack
Webpack是一个模块打包器，它可以处理依赖并将模块打包成静态资源。
自动化测试示例：Jest
Jest是一个JavaScript测试框架，支持单元测试和集成测试。
// sum.js
function sum(a, b) {
return a + b;
}
module.exports = sum;
// sum.test.js
const sum = require('./sum');
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});在Web开发中，安全是一个重要考虑因素。常见的Web安全问题包括跨站脚本攻击（XSS）、跨站请求伪造（CSRF）、SQL注入等。
// 使用DOMPurify清理HTML
const clean = DOMPurify.sanitize(dirtyHTML);
document.getElementById('someDiv').innerHTML = clean;响应式编程是一种异步编程范式，关注于数据流和变化传播。RxJS是一个库，用于使用可观察对象来编写响应式编程代码，使得处理事件、异步请求和回调更加简洁。
示例：从输入框中捕获输入事件
const { fromEvent } = rxjs;
const input = document.querySelector('input');
const observable = fromEvent(input, 'input');
observable.subscribe(event => console.log(event.target.value));在JavaScript项目中的选择：如果项目需要高度灵活的数据查询能力，GraphQL可能是更好的选择。如果项目有简单的数据需求，或者已经存在RESTful API的基础设施，那么继续使用REST可能更合适。
TypeScript是JavaScript的一个超集，添加了类型系统和对ES6+的支持。TypeScript提供的类型安全可以帮助开发者在编译时期捕获错误，提高代码的质量和可维护性。
示例：一个简单的TypeScript函数
function greet(person: string, date: Date): string {
return `Hello ${person}, today is ${date.toDateString()}!`;
}
console.log(greet("Maddy", new Date()));渐进式Web应用（PWA）是一种可以提供类似于原生应用体验的Web应用。通过Service Workers，PWA可以在离线时仍然提供核心功能。
注册一个Service Worker示例：
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
console.log('Service Worker registered with scope:', registration.scope);
}).catch(function(err) {
console.log('Service Worker registration failed:', err);
});
}在sw.js中，你可以缓存关键资源，拦截网络请求，并提供离线支持。
WebAssembly (Wasm) 是一种新的编码方式，让在网页中运行的代码可以接近原生执行速度，通过提供一个新的、高效的格式来在网页上运行代码。它对前端开发的主要影响是性能的显著提升，特别是对于需要大量计算的应用，如游戏、视频编辑、图像处理等。
使用场景：
示例：将C/C++代码编译为WebAssembly并在网页中运行。
<script>
fetch('example.wasm').then(response =>
response.arrayBuffer()
).then(bytes =>
WebAssembly.instantiate(bytes)
).then(results => {
results.instance.exports.exportedFunc();
});
</script>D3.js 是一个JavaScript库，用于使用Web标准制作动态、交互式的数据可视化。它强大之处在于能够绑定任意数据到DOM元素，并且对数据进行动态变化的表示，如通过SVG、Canvas来绘图。
示例：使用D3.js创建一个简单的柱状图。
<script src="https://d3js.org/d3.v6.js"></script>
<script>
const data = [4, 8, 15, 16, 23, 42];
const width = 420,
barHeight = 20;
const x = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, width]);
const chart = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", barHeight * data.length);
const bar = chart.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", (d, i) => "translate(0," + i * barHeight + ")");
bar.append("rect")
.attr("width", x)
.attr("height", barHeight - 1);
bar.append("text")
.attr("x", d => x(d) - 3)
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(d => d);
</script>在前端安全中，防范XSS和CSRF攻击是两个主要的考虑点。
服务端渲染（SSR）是指JavaScript和应用程序界面在服务器上渲染成HTML，然后发送到客户端的过程。这对SEO非常有利，因为搜索引擎爬虫可以直接分析渲染好的页面内容。
优势：
前端监控是指对Web应用的性能、错误、用户行为等进行实时监控。这有助于及时发现问题，优化用户体验和应用性能。
性能指标：
工具：Google的Lighthouse、WebPageTest、Chrome DevTools等都是优秀的性能监控和分析工具。
CSS-in-JS 是一种在JavaScript中编写CSS的技术，它允许开发者在JS文件中直接包含CSS样式，从而使样式和组件逻辑紧密耦合。这种做法有助于避免样式冲突，使得组件更加可重用。
框架选择：流行的CSS-in-JS库包括Styled-components、Emotion 和 JSS。这些库提供了将CSS写入JavaScript的能力，同时保持了CSS的动态性和复用性。
代码示例（使用Styled-components）：
import styled from 'styled-components';
const Button = styled.button`
background: palevioletred;
color: white;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
// 在组件中使用
render() {
return <Button>点击我</Button>;
}Web组件 是一套不同的技术，允许开发者创建可重用的定制元素 — 并且它们的功能性在Web应用中是封装的。Web组件的核心技术包括Custom Elements、Shadow DOM和HTML templates。
微前端 是一种设计思想，允许将前端应用分解为更小、独立交付的片段。每个团队可以独立开发和部署自己的功能区块，最终集成到一个更大的应用中。微前端架构的目的是促进团队之间的技术栈独立性，加速开发流程。
使用JavaScript进行跨平台开发的策略包括React Native和Electron。
这些工具和框架让开发者能够重用代码并保持应用在不同平台间的一致性。
设计模式是解决常见问题的可重用解决方案。
let instance = null;
class Singleton {
constructor() {
if (!instance) {
instance = this;
}
return instance;
}
}class Subject {
constructor() {
this.observers = [];
}
subscribe(observer) {
this.observers.push(observer);
}
notify(data) {
this.observers.forEach(observer => observer.update(data));
}
}JavaScript的垃圾回收机制是自动的，但是开发者仍需注意避免内存泄漏。内存泄漏通常是由不再需要的对象引用导致的，使得垃圾回收器无法释放它们。
WebGL是一个JavaScript API，用于在不需要插件的情况下，在任何兼容的Web浏览器内渲染高性能的交互式2D和3D图形。它通过引入与OpenGL ES 2.0紧密一致的API，使得可以在HTML <canvas> 元素中使用，从而充分利用用户设备提供的硬件图形加速。为了开始使用WebGL，你需要创建一个canvas元素并在你的JavaScript代码中初始化WebGL上下文。对于想要深入了解和实践WebGL，探索3D游戏开发，MDN提供了关于如何构建基本示例，包括使用A-Frame、Babylon.js、PlayCanvas和Three.js等流行框架的步骤。
Node.js的出现使得JavaScript能够被用于服务器端编程，从而开启了全栈开发的大门，允许开发者使用同一种语言来编写前端和后端代码。这意味着开发者可以构建和维护具有复杂功能的Web应用，同时保持技术栈的一致性。Node.js的非阻塞I/O模型特别适合处理大量并发连接，使其成为构建高性能Web应用的理想选择。
随着前端应用的复杂性增加，采用恰当的架构模式变得至关重要。微服务架构允许将应用分解为小的、松耦合的服务，每个服务执行特定的业务功能，并通过轻量级通信机制进行交互。这种方式提高了应用的可维护性和可扩展性。另一种模式是后端为前端（BFF），它介于客户端和微服务之间，为客户端提供精确的API，进一步优化了数据交换和应用性能。
为了触及全球用户，前端应用需要支持多语言。国际化（i18n）是设计和开发应用以便它可以轻松地适配不同语言和地区，而不需要进行重大改动的过程。本地化（l10n）是将应用适配到特定区域或语言的过程，包括翻译文本和适配格式（如日期和货币）。通过使用国际化库如i18next，开发者可以更容易地实现多语言支持。
Web3和区块链技术正在改变前端开发的景观，提供了创建去中心化应用（DApps）的新方法。这些应用运行在区块链上，提供高度的透明度、安全性和不可篡改性。Web3技术使得前端开发者能够直接与区块链交互，为用户提供全新的在线交互体验。随着这些技术的成熟和发展，预计将会出现更多创新的Web应用和服务。
如果喜欢，可以点赞收藏，关注哟~
React 是 Facebook 在 2011 年开发的前端 JavaScript 库。
它遵循基于组件的方法，有助于构建可重用的UI组件。
它用于开发复杂和交互式的 Web 和移动 UI。
尽管它仅在 2015 年开源，但有一个很大的支持社区。
它使用虚拟DOM而不是真正的DOM。
它可以用服务器端渲染。
它遵循单向数据流或数据绑定。
它提高了应用的性能
可以方便地在客户端和服务器端使用
由于 JSX，代码的可读性很好
React 很容易与 Meteor，Angular 等其他框架集成
使用React，编写UI测试用例变得非常容易
React 只是一个库，而不是一个完整的框架
它的库非常庞大，需要时间来理解
新手程序员可能很难理解
编码变得复杂，因为它使用内联模板和 JSX
JSX 是J avaScript XML 的简写。是 React 使用的一种文件，它利用 JavaScript 的表现力和类似 HTML 的模板语法。这使得 HTML 文件非常容易理解。此文件能使应用非常可靠，并能够提高其性能。下面是JSX的一个例子：
render(){
return(
<div>
<h1> Hello World from Edureka!!</h1>
</div>
);
}Virtual DOM 是一个轻量级的 JavaScript 对象，它最初只是 real DOM 的副本。它是一个节点树，它将元素、它们的属性和内容作为对象及其属性。 React 的渲染函数从 React 组件中创建一个节点树。然后它响应数据模型中的变化来更新该树，该变化是由用户或系统完成的各种动作引起的。
Virtual DOM 工作过程有三个简单的步骤。
每当底层数据发生改变时，整个 UI 都将在 Virtual DOM 描述中重新渲染。
然后计算之前 DOM 表示与新表示的之间的差异。
完成计算后，将只用实际更改的内容更新 real DOM。
浏览器只能处理 JavaScript 对象，而不能读取常规 JavaScript 对象中的 JSX。所以为了使浏览器能够读取 JSX，首先，需要用像 Babel 这样的 JSX 转换器将 JSX 文件转换为 JavaScript对象，然后再将其传给浏览器。
组件是 React 应用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的部分。每个组件彼此独立，而不会影响 UI 的其余部分。
每个React组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内，例如 form、group、div 等。此函数必须保持纯净，即必须每次调用时都返回相同的结果。
Props 是 React 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据。
状态是 React 组件的核心，是数据的来源，必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与props 不同，它们是可变的，并创建动态和交互式组件。可以通过 this.state()访问它们。
React 组件的生命周期有三个不同的阶段：
初始渲染阶段：这是组件即将开始其生命之旅并进入 DOM 的阶段。
更新阶段：一旦组件被添加到 DOM，它只有在 prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段。
卸载阶段：这是组件生命周期的最后阶段，组件被销毁并从 DOM 中删除。
componentWillMount() – 在渲染之前执行，在客户端和服务器端都会执行。
componentDidMount() – 仅在第一次渲染后在客户端执行。
componentWillReceiveProps() – 当从父类接收到 props 并且在调用另一个渲染器之前调用。
shouldComponentUpdate() – 根据特定条件返回 true 或 false。如果你希望更新组件，请返回true 否则返回 false。默认情况下，它返回 false。
componentWillUpdate() – 在 DOM 中进行渲染之前调用。
componentDidUpdate() – 在渲染发生后立即调用。
componentWillUnmount() – 从 DOM 卸载组件后调用。用于清理内存空间。
在 React 中，事件是对鼠标悬停、鼠标单击、按键等特定操作的触发反应。处理这些事件类似于处理 DOM 元素中的事件。但是有一些语法差异，如：
用驼峰命名法对事件命名而不是仅使用小写字母。
事件作为函数而不是字符串传递。
事件参数重包含一组特定于事件的属性。每个事件类型都包含自己的属性和行为，只能通过其事件处理程序访问。
合成事件是围绕浏览器原生事件充当跨浏览器包装器的对象。它们将不同浏览器的行为合并为一个 API。这样做是为了确保事件在不同浏览器中显示一致的属性。
需要管理焦点、选择文本或媒体播放时
触发式动画
与第三方 DOM 库集成
高阶组件是重用组件逻辑的高级方法，是一种源于 React 的组件模式。 HOC 是自定义组件，在它之内包含另一个组件。它们可以接受子组件提供的任何动态，但不会修改或复制其输入组件中的任何行为。你可以认为 HOC 是“纯（Pure）”组件。
代码重用，逻辑和引导抽象
渲染劫持
状态抽象和控制
Props 控制
纯（Pure） 组件是可以编写的最简单、最快的组件。它们可以替换任何只有 render() 的组件。这些组件增强了代码的简单性和应用的性能。
key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。这些 key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。
React 路由是一个构建在 React 之上的强大的路由库，它有助于向应用程序添加新的屏幕和流。这使 URL 与网页上显示的数据保持同步。它负责维护标准化的结构和行为，并用于开发单页 Web 应用。 React 路由有一个简单的API。
Router 用于定义多个路由，当用户定义特定的 URL 时，如果此 URL 与 Router 内定义的任何“路由” 的路径匹配，则用户将重定向到该特定路由。所以基本上我们需要在自己的应用中添加一个 Router 库，允许创建多个路由，每个路由都会向我们提供一个独特的视图。
就像 React 基于组件一样，在 React Router v4 中，API 是 ‘All About Components’。可以将 Router 可视化为单个根组件（BrowserRouter），其中我们将特定的子路由（route）包起来。
无需手动设置历史值：在 React Router v4 中，我们要做的就是将路由包装在BrowserRouter 组件中。
包是分开的：共有三个包，分别用于 Web、Native 和 Core。这使我们应用更加紧凑。基于类似的编码风格很容易进行切换。
类组件（ Class components ）
无论是使用函数或是类来声明一个组件，它决不能修改它自己的 props 。
所有 React 组件都必须是纯函数，并禁止修改其自身 props 。
React是单项数据流，父组件改变了属性，那么子组件视图会更新。
属性 props 是外界传递过来的，状态 state 是组件本身的，状态可以在组件中任意修改组件的属性和状态改变都会更新视图。
函数组件（functional component）
函数组件接收一个单一的 props 对象并返回了一个React元素
区别
函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。
state 和 props都是普通的JavaScript对象。尽管它们两者都具有影响渲染输出的信息，但它们在组件方面的功能不同。即
props 是一个从外部传进组件的参数，主要作为就是从父组件向子组件传递数据，它具有可读性和不变性，只能通过外部组件主动传入新的 props 来重新渲染子组件，否则子组件的 props以及展现形式不会改变。
state 的主要作用是用于组件保存、控制以及修改自己的状态，它只能在 constructor 中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的 this.setState来修改，修改 state 属性会导致组件的重新渲染。
在调用方法之前，子类构造函数无法使用 this 引用 super() 。
在ES6中，在子类的 constructor 中必须先调用 super 才能引用 this 。
在 constructor 中可以使用 this.props
在HTML当中，像 input , textarea , 和 select 这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能用setState() 方法进行更新。
非受控组件
非受控组件，即组件的状态不受React控制的组件，例如下边这个
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Demo1 extends Component {
render() {
return (
<input />
)
}
}
ReactDOM.render(<Demo1/>, document.getElementById('content'))在这个最简单的输入框组件里,我们并没有干涉input中的value展示,即用户输入的内容都会展示在上面。如果我们通过props给组件设置一个初始默认值,defaultValue属性是React内部实现的一个属性,目的类似于input的placeholder属性。
受控组件
同样的，受控组件就是组件的状态受React控制。上面提到过，既然通过设置input的value属性, 无法改变输入框值,那么我们把它和state结合在一起,再绑定onChange事件,实时更新value值就行了。
class Demo1 extends Component {
constructor(props) {
super(props);
this.state = {
value: props.value
}
}
handleChange(e) {
this.setState({
value: e.target.value
})
}
render() {
return (
<input value={this.state.value} onChange={e =>
this.handleChange(e)}/>
)
}
}hooks 是react 16.8 引入的特性，他允许你在不写class的情况下操作state 和react的其他特性。
hooks 只是多了一种写组件的方法，使编写一个组件更简单更方便，同时可以自定义hook把公共的逻辑提取出来，让逻辑在多个组件之间共享。
Hook 是什么
Hook 是什么？ Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。例如，useState 是允许你在 React 函数组件中添加 state 的 Hook。稍后我们将学习其他 Hook。
什么时候我会用 Hook？ 如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以在现有的函数组件中使用 Hook。
ReactHooks的优点
无需复杂的DOM结构
简洁易懂
React的StrictMode是一种帮助程序组件，可以帮助您编写更好的react组件，您可以使用包装一些组件， 并且基本上可以：
验证内部组件是否遵循某些推荐做法，如果不在控制台中，则会发出警告。
验证不赞成使用的方法，如果使用了严格模式，则会在控制台中警告您。
通过识别潜在风险来帮助您预防某些副作用。
React文档官网并未对 Context 给出“是什么”的定义，更多是描述使用的 Context 的场景，以及如何使用 Context 。
官网对于使用 Context 的场景是这样描述的：
In Some Cases, you want to pass data through the component tree without having to pass the props down manuallys at every level. you can do this directly in React with the powerful "context" API.
简单说就是，当你不想在组件树中通过逐层传递 props 或者 state 的方式来传递数据时，可以：
使用 Context 来实现 跨层级 的组件数据传递。
使用props或者state传递数据，数据自顶下流。
使用 Context ，可以跨越组件进行数据传递。
React Fiber 并不是所谓的纤程（微线程、协程），而是一种基于浏览器的单线程调度算法，背后的支持 API 是大名鼎鼎的：requestIdleCallback。Fiberl是一种将 recocilation （递归 diff），拆分成无数个小任务的算法；它随时能够停止，恢复。停止恢复的时机取决于当前的一帧（16ms）内，还有没有足够的时间允许计算。
把树形结构按照层级分解，只比较同级元素。
给列表结构的每个单元添加唯一的 key 属性，方便比较。
React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字） 合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.
到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制. 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。
setState 是修改其中的部分状态，相当于 Object.assign，只是覆盖，不会减少原来的状态replaceState 是完全替换原来的状态，相当于赋值，将原来的 state 替换为另一个对象，如果新状态属性减少，那么 state 中就没有这个状态了
React.createClass()、ES6 class 和无状态函数。
在 React 组件中，应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行，在组件的生命周期中仅会执行一次。
更重要的是，你不能保证在组件挂载之前 Ajax 请求已经完成，如果是这样，也就意味着你将尝试在一个未挂载的组件上调用 setState，这将不起作用。
在 componentDidMount 中发起网络请求将保证这有一个组件可以更新了。
<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html>标签之前。告知浏览器的解析器,用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。**
首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常见的空元素：
<img><input><link><meta>
鲜为人知的是：
<area><base><col><command><embed><keygen><param><source><track><wbr>
4.页面导入样式时，使用link和@import有什么区别？
link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎则：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
移除的元素：
纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes；
用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
在用户没有连网时，可以正常访问站点或应用，在用户与网络连接时更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
如何使用：
页面头部像下面一样加入一个manifest的属性；
在cache.manifest文件的编写离线存储的资源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
在离线状态时，操作window.applicationCache进行需求实现。
在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。
iframe会阻塞主页面的Onload事件；
搜索引擎的检索程序无法解读这种页面，不利于SEO;
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript
动态给iframe添加src属性值，这样可以绕开以上两个问题。
label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>WebSocket、也可以调用localstorge、cookies等本地存储方式，还可以使用页面的路有参数传递
localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，
我们通过监听事件，控制它的值来进行页面信息通信；
14.如何在页面上实现一个圆形的可点击区域？
map+area或者svg
border-radius
纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等
title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；
strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：会重读，而是展示强调内容。
i内容展示为斜体，em表示强调的文本；
h5新增的属性
可以通过ele.dataset获取到标签上的data-x的属性
返回一个对象
解决：解决方案是做成PNG8.
解决：方案是加一个全局的*{margin:0;padding:0;}来统一。
解决：解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“9”这一标记，将IE游览器从所有情况中分离出来。 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css
.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
解决：解决方法:统一通过getAttribute()获取自定义属性.
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
解决：可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
解决：方法是改变CSS属性的排列顺序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
1）所有的标记都必须要有一个相应的结束标记
2）所有标签的元素和属性的名字都必须使用小写
3）所有的XML标记都必须合理嵌套
4）所有的属性必须用引号""括起来
5）把所有<和&特殊符号用编码表示
6）给所有属性赋一个值
7）不要在注释内容中使“--”
8）图片必须有说明文字
title是global attributes之一，用于为元素提供附加的advisory information。通常当鼠标滑动到元素上的时候显示。
alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。
改版的时候更方便 只要改css文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前。
派生选择器（用HTML标签申明）
id选择器（用DOM的ID申明）
类选择器（用一个样式类名申明）
属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了）
除了前3种基本选择器，还有一些扩展选择器，包括
后代选择器（利用空格间隔，比如div .a{ }）
群组选择器（利用逗号间隔，比如p,div,#a{ }）
那么问题来了，CSS选择器的优先级是怎么样定义的？
一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。
复杂的计算方法：
用1表示派生选择器的优先级
用10表示类选择器的优先级
用100标示ID选择器的优先级
div.test1 .span var 优先级 1+10 +10 +1
span#xxx .songs li 优先级1+100 + 10 + 1
xxx li 优先级 100 +1
那么问题来了，看下列代码，<p>标签内的文字是什么颜色的？
<style>
.classA{ color:blue;}
.classB{ color:red;}
</style>
<body>
<p class='classB classA'> 123 </p>
</body>
答案：red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在<p class=’classB classA’>中的先后关系无关。
块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。
那么问题来了，浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？
答案：<input> 、<img> 、<button> 、<texterea> 、<label>。
外边距重叠就是margin-collapse。
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）
* 1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul < li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a: hover, li: nth - child）
* 可继承： font-size font-family color, UL LI DL DD DT;
* 不可继承 ：border padding margin width height ;
* 优先级就近原则，样式定义最近者为准;
* 载入样式以最后载入的定位为准;优先级为:
!important > id > class > tag
important 比 内联优先级高CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。给div设置一个宽度，然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;}
居中一个浮动元素
确定容器的宽高 宽500 高 300 的层
设置层的外边距
.div {
Width:500px ; height:300px;//高度可以不设
Margin: -150px 0 0 -250px;
position:relative;相对定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
* IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto；
* png24为的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css
.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
* IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
* IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
* （条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
!important > id > class > 标签
!important 比 内联优先级高
可继承： font-size font-family color, ul li dl dd dt;
不可继承 ：border padding margin width height ;
讲 DOM 先从 HTML 讲起，讲 HTML 先从 XML 讲起。XML 是一种可扩展的标记语言，所谓可扩展就是它可以描述任何结构化的数据，它是一棵树！
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性
attribute是dom元素在文档中作为html标签拥有的属性；
property就是dom元素在js中作为对象拥有的属性。
所以：
对于html的标准属性来说，attribute和property是同步的，是会自动更新的，
但是对于自定义的属性来说，他们是不同步的，
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
Src source,指向外部资源的位置,如果我们添加<script src ="js.js"></script>浏览器会暂停其他资源的下载和处理,直到该资源加载,编译,执行完毕(图片和框架也是如此),这也就是为什么js脚本要放在底部。
src用于替换当前元素,href用于在当前文档和引入资源之间建立联系。
cookie 本身不是用来做服务器端存储的（计算机领域有很多这种“狗拿耗子”的例子，例如 CSS 中的 float），它是设计用来在服务器和客户端进行信息传递的，因此我们的每个 HTTP 请求都带着 cookie。但是 cookie 也具备浏览器端存储的能力（例如记住用户名和密码），因此就被开发者用上了。
使用起来也非常简单，document.cookie = ....即可。
但是 cookie 有它致命的缺点：
存储量太小，只有 4KB
所有 HTTP 请求都带着，会影响获取资源的效率
API 简单，需要封装才能用
后来，HTML5 标准就带来了sessionStorage和localStorage，先拿localStorage来说，它是专门为了浏览器端缓存而设计的。
存储量增大到 5MB
不会带到 HTTP 请求中
API 适用于数据存储 localStorage.setItem(key, value) localStorage.getItem(key)
sessionStorage的区别就在于它是根据 session 过去时间而实现，而localStorage会永久有效，应用场景不同。例如，一些需要及时失效的重要信息放在sessionStorage中，一些不重要但是不经常设置的信息，放在localStorage中。
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；
*请认真填写需求信息，我们会在24小时内与您取得联系。
