React实战-React中this的用法

墨蓝 2022-06-10 07:09 262阅读 0赞

Javascript中的this是一个令人讨厌的东西，对于有着面向对象编程经历的程序员来说更是如此，那么在ReactJs中，this是如何使用的呢。

Javascript从出生那天起，十足一个草根，无非是辅助一下页面特效，然而后来的发展，估计也超出了设计者的预料，从Ajax出现后就大放光彩，到近几年在服务端的应用，Reactjs框架的出现就更是惹人注目了。然后在语言的发展过程中，总有些变革与妥协。在我看来，this正是由于先天和后天的原因，让人很是讨厌(微信号：React实战)。

一.在面向对象中this代表什么？

在面向对象中this简单明确，就是指向类的对象。

二.在Javascript中this代表什么？

在Javascript中则没这么简单。this在不同的书写方式，不同的创建方式里，指向的对象则不同，细说起来，没有上万字是不够的。但大致说来主要分为几类，以及以下几类的各类组合了。

1.单独function中的this以及在闭包function中的this.

2.使用strict时的this.

3.使用对象中function的this

4.使用=>箭头函数中的this

5.使用ES6中的this

6.Dom事件中的this

7.使用bind函数中的this

以上各类条件下的this所指并不一样，两种不同组合也会导致this所指对象不同。

来几个例子就可以知道这种this对象有多讨厌了，一不小心就会错误。

a.单独function与采用bind的this

function getThis()\{

console.log('getThis',this);

getThis();

var obj = \{a:4\};

getThis.bind(obj)();

运行结果：

getThis window

getThis \{a:4\}

b.对象中箭头function和function的this

var oo = \{

arrowThis: () => \{

console.log('arrowThis',this);

\},

noArrowThis: function ()\{

console.log('noArrowThis',this);

oo.arrowThis();

oo.noArrowThis();

运行结果：

arrowThis window

noArrowThis \{arrowThis:f, noArrowThis:f\}

c.类中中箭头function和function的this

function Person() \{

(function noArrowThis()\{

console.log('noArrowThis',this);

\})();

var arrowThis = () =>\{

console.log('arrowThis',this);

arrowThis();

\}；

var person = new Person();

运行结果：

arrowThis window

noArrowThis Person

d.strict中的this

function Person() \{

//'use strict';

...\}

运行结果：

arrowThis undefined

noArrowThis Person

以上几个简单的例子可以看出在不同的组合中this是不同的，基本思想是this指向创建函数的对象，strict中创建对象更为严格，避免了自动指向window，在类的构造函数中指向自身。

三．在ReactJS中this如何使用

ReactJS基于Javascript，用法也源于Javascript，主要有以下几种用法。

1.ES6的写法

如果你采用ES6，需要记住的是ES6不会自动绑定this到实例中,你需要使用bind函数。如下：

class HelloWorld extends React.Component \{

constructor(props) \{

super(props);

this.state = \{message: HelloWorld !'\};

handleClick() \{

alert(this.state.message);

render() \{

return (

HelloWorld

</button>

);

2.createReactClass中的this

如果采用createReactClass则不需要采用bind

var HelloWorld = createReactClass(\{

getInitialState: function() \{

return \{message: 'Hello!'\};

\},

handleClick: function() \{

alert(this.state.message);

\},

render: function() \{

return (

Say HelloWorld

</button>

);

\});

3.采用箭头函数

如果你采用箭头函数，则会省去bind了。

class HelloWorld extends React.Component \{

constructor(props) \{

super(props);

this.state = \{message: 'Hello!'\};

handleClick = () => \{

alert(this.state.message);

render() \{

return (

Say HelloWorld

</button>

);

虽然Javascript中的this变化很多，但在React中要简单的多，只是在刚接触时会弄不清为什么有这三种方式，只有去看看Javascript中的使用原则，才会清楚。

React实战-React中this的用法

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 react refresh 的用法

相关 React基础用法

相关 ⑧ React Redux 基本用法

相关 React实战-对比ReactJs与ReactNative中的Flex用法

相关 React实战-通过ReactRouter-example分析Router用法

相关 React实战-React中this的用法

相关 React-Router 高级用法

相关 React Refs用法

相关 React localStorage用法

相关 react样式的用法