文末 从转行到现在,差不多两年的时间,虽不能和大佬相比,但也是学了很多东西。我个人在学习的过程中,习惯简单做做笔记,方便自己复习的时候能够快速理解,现在将自己的笔记分享出来,和大家共同学习。 个人将这段时间所学的知识,分为三个阶段: 第一阶段:HTML&CSS&JavaScript基础 第二阶段:移动端开发技术 第三阶段:前端常用框架 开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】 推荐学习方式:针对某个知识点,可以先简单过一下我的笔记,如果理解,那是最好,可以帮助快速解决问题; 大厂的面试难在,针对一个基础知识点,比如JS的事件循环机制,不会上来就问概念,而是换个角度,从题目入手,看你是否真正掌握。所以对于概念的理解真的很重要。 var person = React.createElement( Person, {name: window.isLoggedIn ? window.name : ‘’} ); ##### 子节点表达式 同样地,JavaScript 表达式可用于描述子结点: // 输入 (JSX): var content = {window.isLoggedIn ? : }; // 输出 (JS): var content = React.createElement( Container, null, window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login) ); #### 注释 JSX 里添加注释很容易;它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)用 {} 包围要注释的部分。 class ReactDemo extends Component { render() { return ( {/标签子节点的注释/} <Text style={styles.welcome} //textAlign=‘right’ textShadowColor=‘yellow’ /color=‘red’ textShadowRadius=‘1’/ > React Native! ); } } > > 心得:在标签节点以外注释,和通常的注释是一样的,多行用“/\*\*/” 单行用“//”; > > > #### JSX延展属性 ##### 不要试图去修改组件的属性 不推荐做法: var component = ; component.props.foo = x; // 不推荐 component.props.bar = y; // 不推荐 这样修改组件的属性,会导致React不会对组件的属性类型(propTypes)进行的检查。从而引发一些预料之外的问题。 推荐做法: var component = ; ##### 延展属性(Spread Attributes) 你可以使用 JSX 的新特性 - 延展属性: var props = {}; props.foo = x; props.bar = y; var component = <Component {…props} />; 传入对象的属性会被复制到组件内。 它能被多次使用,也可以和其它属性一起用。注意顺序很重要,后面的会覆盖掉前面的。 var props = { foo: ‘default’ }; var component = <Component {…props} foo={‘override’} />; console.log(component.props.foo); // ‘override’ 上文出现的… 标记被叫做延展操作符(spread operator)已经被 ES6 数组 支持。 ### Component React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。 var HelloMessage = React.createClass({ render: function() { return Hello {this.props.name}; } }); ReactDOM.render( , document.getElementById(‘example’) ); 上面代码中,变量 HelloMessage 就是一个组件类。模板插入 `<HelloMessage />`时,会自动生成 HelloMessage 的一个实例。所有组件类都必须有自己的 render 方法,用于输出组件。 > > 注意 > > > * 组件类的第一个字母必须大写。 * 组件类只能包含一个顶层标签。 ### 组件的属性(props) 我们可以通过`this.props.xx`的形式获取组件对象的属性,对象的属性可以任意定义,但要避免与JavaScript关键字冲突。 #### 遍历对象的属性: `this.props.children`会返回组件对象的所有属性。 React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 `React.Children.map`或`React.Children.forEach` 来遍历子节点。 **React.Children.map** 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 ( { React.Children.map(this.props.children, function (child) { return {child}; }) } ); } }); ReactDOM.render( hello world , document.body ); #### [PropTypes](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0) 组件的属性可以接受任意值,字符串、对象、函数等等都可以。有时,我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求。 组件类的PropTypes属性,就是用来验证组件实例的属性是否符合要求。 var MyTitle = React.createClass({ propTypes: { title: React.PropTypes.string.isRequired, }, render: function() { return {this.props.title} ; } }); 上面的Mytitle组件有一个title属性。PropTypes 告诉 React,这个 title 属性是必须的,而且它的值必须是字符串。现在,我们设置 title 属性的值是一个数值。 var data = 123; ReactDOM.render( , document.body ); 这样一来,title属性就通不过验证了。控制台会显示一行错误信息。 `Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.` 更多的PropTypes设置,可以查看[官方文档](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)。 此外,getDefaultProps 方法可以用来设置组件属性的默认值。 var MyTitle = React.createClass({ getDefaultProps : function () { return { title : ‘Hello World’ }; }, render: function() { return {this.props.title} ; } }); ReactDOM.render( , 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 ( ); } }); ReactDOM.render( , 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 等,完整的事件清单请查看[官方文档](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)。 #### 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={© => 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 ( You {text} this. Click to toggle. ); } }); 上面代码是一个 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 组件(比如 <div /> 或者 `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](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0) `object propTypes` `propTypes` 对象用于验证传入到组件的 `props`。 可参考[可重用的组件](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)。 **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](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)。 > > 心得:由于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](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)。 ##### isMounted `boolean isMounted()`,当组件被渲染到DOM,该方法返回true,否则返回false。该方法通常用于异步任务完成后修改state前的检查,以避免修改一个没有被渲染的组件的state。 > > 心得:开发中不建议大家isMounted,大家可以使用另外一种更好的方式来避免修改没有被渲染的DOM,请下文的isMounted 是个反模式。 > > > ### [组件的生命周期(Component Lifecycle)](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0) 在iOS中`UIViewController`提供了`(void)viewWillAppear:(BOOL)animated`, `- (void)viewDidLoad`,`(void)viewWillDisappear:(BOOL)animated`等生命周期方法,在Android中`Activity`则提供了`onCreate()`,`onStart()`,`onResume()`,`onPause()`,`onStop()`,`onDestroy()`等生命周期方法,这些生命周期方法展示了一个界面从创建到销毁的一生。 那么在React 中组件(Component)也是有自己的生命周期方法的。 ![component-lifecycle](https://raw.githubusercontent.com/crazycodeboy/RNStudyNotes/master/React%20Native%E4%B9%8BReact%E9%80%9F%E5%AD%A6%E6%95%99%E7%A8%8B/images/component-lifecycle.jpg) #### 组件的生命周期分成三个状态: * 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 Waiting… ; return {this.data} ; } } export default Enhance(MyComponent); // Enhanced component 用一个“增强组件”,来为某个类增加一些方法,并且返回一个新类,这无疑能实现mixin所实现的大部分需求。 另外,网上也有很多其他的方案,如[react-mixin](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)。 #### 5.ES6不再有自动绑定 在ES5中,React.createClass会把所有的方法都bind一遍,这样可以提交到任意的地方作为回调函数,而this不会变化。但在ES6中没有了自动绑定,也就是说,你需要通过bind或者箭头函数来手动绑定this引用。 // 通过使用 bind() 来绑定this // 也可通过使用箭头函数来实现 > > 心得: 因为无论是箭头函数还是bind()每次被执行都返回的是一个新的函数引用,所以,推荐大家在组件的构造函数中来绑定`this`。 > > > > > > constructor(props) { super(props); this.state = {count: props.initialCount}; this.tick = this.tick.bind(this);//在构造函数中绑定`this` } // 使用 **前端面试题汇总** ![](https://img-blog.csdnimg.cn/img_convert/8087f8c06b129975b3b7be228aa41f0d.png) **JavaScript** ![](https://img-blog.csdnimg.cn/img_convert/7796de226b373d068d8f5bef31e668ce.png) **[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)** **性能** ![](https://img-blog.csdnimg.cn/img_convert/d7f6750332c78eb27cc606540cdce3b4.png) **linux** ![](https://img-blog.csdnimg.cn/img_convert/ed368cc25284edda453a4c6cb49916ef.png) **前端资料汇总** ![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)