最后
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！
可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
array React.Children.map(object children, function fn [, object thisArg])
该方法会返回一个array。
React.Children.forEach
React.Children.forEach(object children, function fn [, object thisArg])
Usage：
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.body
);
PropTypes
组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。
组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求。
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
上面的Mytitle组件有一个title属性。PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。现在，我们设置 title 属性的值是一个数值。
var data = 123;
ReactDOM.render(
<MyTitle title={data} />,
document.body
);
这样一来，title属性就通不过验证了。控制台会显示一行错误信息。
Warning: Failed propType: Invalid prop titleof typenumbersupplied toMyTitle, expected string.
更多的PropTypes设置，可以查看官方文档。
此外，getDefaultProps 方法可以用来设置组件属性的默认值。
var MyTitle = React.createClass({
getDefaultProps : function () {
return {
title : 'Hello World'
};
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle />,
document.body
);
上面代码会输出"Hello World"。
ref 属性(获取真实的DOM节点)
组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。
但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性。
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
上面代码中，组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。
需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。
React 组件支持很多事件，除了 Click 事件以外，还有 KeyDown 、Copy、Scroll 等，完整的事件清单请查看官方文档。
ref属性不只是string
ref属性不仅接受string类型的参数，而且它还接受一个function作为callback。这一特性让开发者对ref的使用更加灵活。
render: function() {
return (
<TextInput
ref={function(input) {
if (input != null) {
input.focus();
}
}} />
);
},
在ES6中我们可以使用箭头函数来为组件的ref设置一个callback。
render() {
return <TextInput ref={(c) => this._input = c} />;
},
componentDidMount() {
this._input.focus();
},
需要提醒大家的是，只有在组件的render方法被调用时，ref才会被调用，组件才会返回ref。如果你在调用this.refs.xx时render方法还没被调用，那么你得到的是undefined。
心得：ref属性在开发中使用频率很高，使用它你可以获取到任何你想要获取的组件的对象，有个这个对象你就可以灵活地做很多事情，比如：读写对象的变量，甚至调用对象的函数。
state
上文讲到了props，因为每个组件只会根据props 渲染了自己一次，props 是不可变的。为了实现交互，可以使用组件的 state 。this.state 是组件私有的，可以通过getInitialState()方法初始化，通过调用 this.setState() 来改变它。当 state 更新之后，组件就会重新渲染自己。
render() 方法依赖于 this.props 和 this.state ，框架会确保渲染出来的 UI 界面总是与输入（ this.props 和 this.state ）保持一致。
初始化state
通过getInitialState()方法初始化state，在组件的生命周期中仅执行一次，用于设置组件的初始化 state 。
getInitialState:function(){
return {favorite:false};
}
更新 state
通过this.setState()方法来更新state，调用该方法后，React会重新渲染相关的UI。
this.setState({favorite:!this.state.favorite});
Usage:
var FavoriteButton=React.createClass({
getInitialState:function(){
return {favorite:false};
},
handleClick:function(event){
this.setState({favorite:!this.state.favorite});
},
render:function(){
var text=this.state.favorite? 'favorite':'un favorite';
return (
<div type='button' onClick={this.handleClick}>
You {text} this. Click to toggle.
</div>
);
}
});
上面代码是一个 FavoriteButton 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
心得：由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。
本篇将从组件(Component)的详细说明、组件的生命周期(Component Lifecycle)、isMounted是个反模式等方面进行讲解，让大家对组件(Component)有个更系统以及更深入的认识。
组件的详细说明
当通过调用 React.createClass() 来创建组件的时候，每个组件必须提供render方法，并且也可以包含其它的在这里描述的生命周期方法。
render
ReactComponent render()
render() 方法是必须的。
当该方法被回调的时候，会检测 this.props 和 this.state，并返回一个单子级组件。该子级组件可以是虚拟的本地 DOM 组件（比如
React.DOM.div()），也可以是自定义的复合组件。
你也可以返回
null 或者
false 来表明不需要渲染任何东西。实际上，React 渲染一个
<noscript>标签来处理当前的差异检查逻辑。当返回
null 或者
false 的时候，
this.getDOMNode() 将返回
null。
注意：
render()函数应该是纯粹的，也就是说该函数不修改组件的 state，每次调用都返回相同的结果，不读写 DOM 信息，也不和浏览器交互（例如通过使用 setTimeout）。如果需要和浏览器交互，在 componentDidMount() 中或者其它生命周期方法中做这件事。保持 render() 纯粹，可以使服务器端渲染更加切实可行，也使组件更容易被理解。
心得：不要在
render()函数中做复杂的操作，更不要进行网络请求，数据库读写，I/O等操作。
getInitialState
object getInitialState()
初始化组件状态，在组件挂载之前调用一次。返回值将会作为 this.state的初始值。
心得：通常在该方法中对组件的状态进行初始化。
getDefaultProps
object getDefaultProps()
设置组件属性的默认值，在组件类创建的时候调用一次，然后返回值被缓存下来。如果父组件没有指定 props 中的某个键，则此处返回的对象中的相应属性将会合并到 this.props （使用 in 检测属性）。
Usage:
getDefaultProps() {
return {
title: '',
popEnabled:true
};
},
注意
该方法在任何实例创建之前调用，因此不能依赖于 this.props。另外，getDefaultProps() 返回的任何复杂对象将会在实例间共享，而不是每个实例拥有一份拷贝。
心得：该方法在你封装一个自定义组件的时候经常用到，通常用于为组件初始化默认属性。
PropTypes
object propTypes
propTypes 对象用于验证传入到组件的 props。 可参考可重用的组件。
Usage:
var NavigationBar=React.createClass({
propTypes: {
navigator:React.PropTypes.object,
leftButtonTitle: React.PropTypes.string,
leftButtonIcon: Image.propTypes.source,
popEnabled:React.PropTypes.bool,
onLeftButtonClick: React.PropTypes.func,
title:React.PropTypes.string,
rightButtonTitle: React.PropTypes.string,
rightButtonIcon:Image.propTypes.source,
onRightButtonClick:React.PropTypes.func
},
心得：在封装组件时，对组件的属性通常会有类型限制，如：组件的背景图片，需要
Image.propTypes.source类型，propTypes便可以帮你完成你需要的属性类型的检查。
mixins
array mixins
mixin 数组允许使用混合来在多个组件之间共享行为。更多关于混合的信息，可参考Reusable Components。
心得：由于ES6不再支持mixins，所以不建议在使用mixins，我们可以用另外一种方式来替代mixins，请参考：React Native之React速学教程(下)-ES6不再支持Mixins。
statics
object statics
statics 对象允许你定义静态的方法，这些静态的方法可以在组件类上调用。例如：
var MyComponent = React.createClass({
statics: {
customMethod: function(foo) {
return foo === 'bar';
}
},
render: function() {
}
});
MyComponent.customMethod('bar'); // true
在这个块儿里面定义的方法都是静态的，你可以通过ClassName.funcationName的形式调用它。
注意
这些方法不能获取组件的 props 和 state。如果你想在静态方法中检查 props 的值，在调用处把 props 作为参数传入到静态方法。
displayName
string displayName
displayName 字符串用于输出调试信息。JSX 自动设置该值；可参考JSX in Depth。
isMounted
boolean isMounted()，当组件被渲染到DOM，该方法返回true，否则返回false。该方法通常用于异步任务完成后修改state前的检查，以避免修改一个没有被渲染的组件的state。
心得：开发中不建议大家isMounted，大家可以使用另外一种更好的方式来避免修改没有被渲染的DOM，请下文的isMounted 是个反模式。
组件的生命周期(Component Lifecycle)
在iOS中UIViewController提供了(void)viewWillAppear:(BOOL)animated, - (void)viewDidLoad,(void)viewWillDisappear:(BOOL)animated等生命周期方法，在Android中Activity则提供了onCreate(),onStart(),onResume(),onPause(),onStop(),onDestroy()等生命周期方法，这些生命周期方法展示了一个界面从创建到销毁的一生。
那么在React 中组件(Component)也是有自己的生命周期方法的。
组件的生命周期分成三个状态：
- Mounting：已插入真实 DOM
- Updating：正在被重新渲染
- Unmounting：已移出真实 DOM
心得：你会发现这些React 中组件(Component)的生命周期方法从写法上和iOS中
UIViewController的生命周期方法很像，React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用。
Mounting(装载)
getInitialState(): 在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。componentWillMount()：服务器端和客户端都只调用一次，在初始化渲染执行之前立刻调用。componentDidMount()：在初始化渲染执行之后立刻调用一次，仅客户端有效（服务器端不会调用）。
Updating (更新)
- componentWillReceiveProps(object nextProps) 在组件接收到新的 props 的时候调用。在初始化渲染的时候，该方法不会调用。
用此函数可以作为 react 在 prop 传入之后， render() 渲染之前更新 state 的机会。老的 props 可以通过 this.props 获取到。在该函数中调用 this.setState() 将不会引起第二次渲染。
- shouldComponentUpdate(object nextProps, object nextState): 在接收到新的 props 或者 state，将要渲染之前调用。
该方法在初始化渲染的时候不会调用，在使用 forceUpdate 方法的时候也不会。如果确定新的 props 和 state 不会导致组件更新，则此处应该 返回 false。
心得：重写次方你可以根据实际情况，来灵活的控制组件当 props 和 state 发生变化时是否要重新渲染组件。
- componentWillUpdate(object nextProps, object nextState)：在接收到新的 props 或者 state 之前立刻调用。
在初始化渲染的时候该方法不会被调用。使用该方法做一些更新之前的准备工作。
注意：你不能在该方法中使用 this.setState()。如果需要更新 state 来响应某个 prop 的改变，请使用
componentWillReceiveProps。
- componentDidUpdate(object prevProps, object prevState): 在组件的更新已经同步到 DOM 中之后立刻被调用。
该方法不会在初始化渲染的时候调用。使用该方法可以在组件更新之后操作 DOM 元素。
Unmounting(移除)
- componentWillUnmount：在组件从 DOM 中移除的时候立刻被调用。
在该方法中执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素。
isMounted是个反模式
isMounted通常用于避免修改一个已经被卸载的组件的状态，因为调用一个没有被装载的组件的setState()方法，系统会抛出异常警告。
if(this.isMounted()) { //不推荐
this.setState({...});
}
上面做法有点反模式，isMounted()起到作用的时候也就是组件被卸载之后还有异步操作在进行的时候，这就意味着一个被销毁的组件还持有着一些资源的引用，这会导致系统性能降低甚至内存溢出。
React 在设计的时候通过setState()被调用时做了一些检查，来帮助开发者发现被卸载的组件还持有一些资源的引用的情况。如何你使用了isMounted()，也就是跳过的React的检查，也就无法发现被卸载的组件还持有资源的问题。
既然isMounted()是反模式，那么有没有可替代方案呢？
我们可以通过在设置一个变量来表示组件的装载和卸载的状态，当componentDidMount被调用时该变量为true，当
componentWillUnmount被调用时，该变量为false，这样该变量就可以当isMounted()来使用。但还不够，到目前为止，我们只是通过变量来替代isMounted()，还没有做任何的优化，接下来我们需要在componentWillUnmount被调用时取消所有的异步回调，主动释放所有资源，这样就能避免被卸载的组件还持有资源的引用的情况，从而减少了内存溢出等情况的发生。
class MyComponent extends React.Component {
componentDidMount() {
mydatastore.subscribe(this);
}
render() {
...
}
componentWillUnmount() {
mydatastore.unsubscribe(this);
}
}
使用可取消的Promise做异步操作。
const cancelablePromise = makeCancelable(
new Promise(r => component.setState({...}}))
);
cancelablePromise
.promise
.then(() => console.log('resolved'))
.catch((reason) => console.log('isCanceled', reason.isCanceled));
cancelablePromise.cancel(); // Cancel the promise
可取消的Promise。
const makeCancelable = (promise) => {
let hasCanceled_ = false;
const wrappedPromise = new Promise((resolve, reject) => {
promise.then((val) =>
hasCanceled_ ? reject({isCanceled: true}) : resolve(val)
);
promise.catch((error) =>
hasCanceled_ ? reject({isCanceled: true}) : reject(error)
);
});
return {
promise: wrappedPromise,
cancel() {
hasCanceled_ = true;
},
};
};
本篇将带着大家一起认识ES6，学习在开发中常用的一些ES6的新特性，以及ES6与ES5的区别，解决大家在学习React /React Native过程中对于ES6与ES5的一些困惑。
ES6的特性
何为ES6？
ES6全称ECMAScript 6.0，ES6于2015年6月17日发布，ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为ECMAScript-262。
下面我为大家列举了ES6新特性中对我们开发影响比较大的六方面的特性。
1.类（class）
对熟悉Java，object-c，c#等纯面向对象语言的开发者来说，都会对class有一种特殊的情怀。ES6 引入了class（类），让JavaScript的面向对象编程变得更加简单和易于理解。
class Animal {
// 构造方法，实例化的时候将会被调用，如果不指定，那么会有一个不带参数的默认构造函数.
constructor(name,color) {
this.name = name;
this.color = color;
}
// toString 是原型对象上的属性
toString() {
console.log('name:' + this.name + ',color:' + this.color);
}
}
var animal = new Animal('dog','white');//实例化Animal
animal.toString();
console.log(animal.hasOwnProperty('name')); //true
console.log(animal.hasOwnProperty('toString')); // false
console.log(animal.__proto__.hasOwnProperty('toString')); // true
class Cat extends Animal {
constructor(action) {
// 子类必须要在constructor中指定super 方法，否则在新建实例的时候会报错.
// 如果没有置顶consructor,默认带super方法的constructor将会被添加、
super('cat','white');
this.action = action;
}
toString() {
console.log(super.toString());
}
}
var cat = new Cat('catch')
cat.toString();
// 实例cat 是 Cat 和 Animal 的实例，和Es5完全一致。
console.log(cat instanceof Cat); // true
console.log(cat instanceof Animal); // true
2.模块(Module)
ES5不支持原生的模块化，在ES6中，模块将作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域，模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口，通过import来引用其它模块提供的接口。同时还为模块创造了命名空间，防止函数的命名冲突。
导出(export)
ES6允许在一个模块中使用export来导出多个变量或方法。
导出变量
//test.js
export var name = 'Rainbow'
心得：ES6不仅支持变量的导出，也支持常量的导出。
export const sqrt = Math.sqrt;//导出常量
ES6将一个文件视为一个模块，上面的模块通过 export 向外输出了一个变量。一个模块也可以同时往外面输出多个变量。
//test.js
var name = 'Rainbow';
var age = '24';
export {name, age};
导出函数
// myModule.js
export function myModule(someArg) {
return someArg;
}
导入(import)
定义好模块的输出以后就可以在另外一个模块通过import引用。
import {myModule} from 'myModule';// main.js
import {name,age} from 'test';// test.js
心得:一条import 语句可以同时导入默认方法和其它变量。
import defaultMethod, { otherMethod } from 'xxx.js';
3.箭头（Arrow）函数
这是ES6中最令人激动的特性之一。=>不只是关键字function的简写，它还带来了其它好处。箭头函数与包围它的代码共享同一个this,能帮你很好的解决this的指向问题。有经验的JavaScript开发者都熟悉诸如var self = this;或var that = this这种引用外围this的模式。但借助=>，就不需要这种模式了。
箭头函数的结构
箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名，而箭头之后可以是一个表达式（作为函数的返回值），或者是用花括号括起的函数体（需要自行通过return来返回值，否则返回的是undefined）。
// 箭头函数的例子
()=>1
v=>v+1
(a,b)=>a+b
()=>{
alert("foo");
}
e=>{
if (e == 0){
return 0;
}
return 1000/e;
}
心得：不论是箭头函数还是bind，每次被执行都返回的是一个新的函数引用，因此如果你还需要函数的引用去做一些别的事情（譬如卸载监听器），那么你必须自己保存这个引用。
卸载监听器时的陷阱
错误的做法
class PauseMenu extends React.Component{
componentWillMount(){
AppStateIOS.addEventListener('change', this.onAppPaused.bind(this));
}
componentWillUnmount(){
AppStateIOS.removeEventListener('change', this.onAppPaused.bind(this));
}
onAppPaused(event){
}
}
正确的做法
class PauseMenu extends React.Component{
constructor(props){
super(props);
this._onAppPaused = this.onAppPaused.bind(this);
}
componentWillMount(){
AppStateIOS.addEventListener('change', this._onAppPaused);
}
componentWillUnmount(){
AppStateIOS.removeEventListener('change', this._onAppPaused);
}
onAppPaused(event){
}
}
除上述的做法外，我们还可以这样做：
class PauseMenu extends React.Component{
componentWillMount(){
AppStateIOS.addEventListener('change', this.onAppPaused);
}
componentWillUnmount(){
AppStateIOS.removeEventListener('change', this.onAppPaused);
}
onAppPaused = (event) => {
//把方法直接作为一个arrow function的属性来定义，初始化的时候就绑定好了this指针
}
}
需要注意的是：不论是bind还是箭头函数，每次被执行都返回的是一个新的函数引用，因此如果你还需要函数的引用去做一些别的事情（譬如卸载监听器），那么你必须自己保存这个引用。
4.ES6不再支持Mixins
在ES5下，我们经常使用mixin来为组件添加一些新的方法，如：
var SetIntervalMixin = {
componentWillMount: function() {
this.intervals = [];
},
setInterval: function() {
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
this.intervals.forEach(clearInterval);
}
};
var TickTock = React.createClass({
mixins: [SetIntervalMixin], // Use the mixin
getInitialState: function() {
return {seconds: 0};
},
...
但，很不幸的是，ES6不支持使用Mixins了，不过我们可以使用，增强组件来替代Mixins。
//Enhance.js
import { Component } from "React";
export var Enhance = ComposedComponent => class extends Component {
constructor() {
this.state = { data: null };
}
componentDidMount() {
this.setState({ data: 'Hello' });
}
render() {
return <ComposedComponent {...this.props} data={this.state.data} />;
}
};
//HigherOrderComponent.js
import { Enhance } from "./Enhance";
class MyComponent {
render() {
if (!this.data) return <div>Waiting...</div>;
return <div>{this.data}</div>;
}
}
export default Enhance(MyComponent); // Enhanced component
用一个“增强组件”，来为某个类增加一些方法，并且返回一个新类，这无疑能实现mixin所实现的大部分需求。
另外，网上也有很多其他的方案，如react-mixin。
5.ES6不再有自动绑定
在ES5中，React.createClass会把所有的方法都bind一遍，这样可以提交到任意的地方作为回调函数，而this不会变化。但在ES6中没有了自动绑定，也就是说，你需要通过bind或者箭头函数来手动绑定this引用。
// 通过使用 bind() 来绑定`this`
<div onClick={this.tick.bind(this)}>
// 也可通过使用箭头函数来实现
<div onClick={() => this.tick()}>
心得： 因为无论是箭头函数还是bind()每次被执行都返回的是一个新的函数引用，所以，推荐大家在组件的构造函数中来绑定
this。
constructor(props) {
super(props);
this.state = {count: props.initialCount};
this.tick = this.tick.bind(this);//在构造函数中绑定this
}
// 使用
#### 6.static关键字
在ES6中我们可以通过static关键字来定义一个类函数。
class People {
constructor(name) { //构造函数
this.name = name;
}
sayName() {
console.log(this.name);
}
static formatName(name) //将formatName定义为类方法
return name[0].toUpperCase() + name.sustr(1).toLowerCase();
}
}
console.log(People.formatName(“tom”)); //使用类方法formatName
### ES6 VS ES5（ES6与ES5的区别）
新版本的React /React Native使用了ES6标准，下面就让我们一起了解一下基于ES6的React/React Native相比ES5有哪些不同。
>
> 心得：很多React/React Native的初学者经常会被ES6问题迷惑：官方建议我们ES6，但是网上搜到的很多教程和例子都是基于ES5版本的，所以很多人感觉无法下手，下面就让我们一起认识ES6与ES5在React/React Native开发上有哪些不同和需要注意的地方。
>
>
>
下面是我们需要知道的ES6与ES5在4大方面上的区别。
#### 1.在定义方面的不同
在定义组件，方法，属性等方面，ES6与ES5是有所不同的，下面就让我们一起看一下有哪些不同。
>
> 心得：因为向下兼容的原因，你在开发过程中可使用ES6也可以使用ES5的规范，但为了代码的风格一致性，建议尽量减少混写。
>
>
>
##### 定义组件
>
> **ES5**
>
>
>
在ES5里，通常通过React.createClass来定义一个组件类，像这样：
var Photo = React.createClass({
render: function() {
return (
);
},
});
>
> **ES6**
>
>
>
在ES6里，我们通过继承React.Component 来定义一个组件类，像这样：
class Photo extends React.Component {
render() {
return (
);
}
}
##### 定义方法
相比ES5，ES6在方法定义上语法更加简洁，从上面的例子里可以看到，给组件定义方法不再用 名字: function()的写法，而是直接用名字()，在方法的最后也不能有逗号了。
>
> **ES5**
>
>
>
var Photo = React.createClass({
test: function(){
},
render: function() {
return (
);
},
});
>
> **ES6**
>
>
>
class Photo extends React.Component {
test() {
}
render() {
return (
);
}
}
##### 定义组件的属性类型和默认属性
>
> **ES5**
>
>
>
在ES5里，属性类型和默认属性分别通过propTypes成员和getDefaultProps方法来实现。
**这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道**
### HTML
* HTML5有哪些新特性？
* Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?
* 如何实现浏览器内多个标签页之间的通信？
* ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？
* 简述⼀下src与href的区别？
* cookies,sessionStorage,localStorage 的区别？
* HTML5 的离线储存的使用和原理？
* 怎样处理 移动端 1px 被 渲染成 2px 问题？
* iframe 的优缺点？
* Canvas 和 SVG 图形的区别是什么？
### JavaScript
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
* 问：0.1 + 0.2 === 0.3 嘛？为什么？
* JS 数据类型
* 写代码：实现函数能够深度克隆基本类型
* 事件流
* 事件是如何实现的？
* new 一个函数发生了什么
* 什么是作用域？
* JS 隐式转换，显示转换
* 了解 this 嘛，bind，call，apply 具体指什么
* 手写 bind、apply、call
* setTimeout(fn, 0)多久才执行，Event Loop
* 手写题：Promise 原理
* 说一下原型链和原型链的继承吧
* 数组能够调用的函数有那些？
* PWA使用过吗？serviceWorker的使用原理是啥？
* ES6 之前使用 prototype 实现继承
* 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？
* 事件循环机制 （Event Loop）
法来实现。
**这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道**
### HTML
* HTML5有哪些新特性？
* Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?
* 如何实现浏览器内多个标签页之间的通信？
* ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？
* 简述⼀下src与href的区别？
* cookies,sessionStorage,localStorage 的区别？
* HTML5 的离线储存的使用和原理？
* 怎样处理 移动端 1px 被 渲染成 2px 问题？
* iframe 的优缺点？
* Canvas 和 SVG 图形的区别是什么？
### JavaScript
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
* 问：0.1 + 0.2 === 0.3 嘛？为什么？
* JS 数据类型
* 写代码：实现函数能够深度克隆基本类型
* 事件流
* 事件是如何实现的？
* new 一个函数发生了什么
* 什么是作用域？
* JS 隐式转换，显示转换
* 了解 this 嘛，bind，call，apply 具体指什么
* 手写 bind、apply、call
* setTimeout(fn, 0)多久才执行，Event Loop
* 手写题：Promise 原理
* 说一下原型链和原型链的继承吧
* 数组能够调用的函数有那些？
* PWA使用过吗？serviceWorker的使用原理是啥？
* ES6 之前使用 prototype 实现继承
* 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？
* 事件循环机制 （Event Loop）
528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
