Question

我正在使用async onDrop( banner, e ) { banner.classList.remove( 'dragover' ); e.preventDefault(); const file = e.dataTransfer.files[ 0 ], reader = new FileReader(); const { dispatch } = this.props; const result = await this.readFile( file, reader ); banner.style.background = `url( ${ result } ) no-repeat center`; dispatch( addLayer( file ) ); return false; } @isImage( 0 ) readFile( file, reader ) { reader.readAsDataURL( file ); return new Promise( function ( resolve, reject ) { reader.onload = ( event ) => resolve( event.target.result ); reader.onerror = reject; } ); } onDragOver( banner ) { banner.classList.add( 'dragover' ); return false; }并编写了一个React组件，我的代码如下：

Method can be static

Webstorm的代码检查建议我使用onDragOver方法{{1}}。我的问题是：

将该方法设为静态是否有任何实际好处，或者此建议在某种程度上无用？

Answer 1

是的，在调用静态函数时，您不需要该对象的实例。您只需要对构造函数的引用：

class Foo {
  static bar() { console.log("foo"); }
}

Foo.bar(); // outputs "foo" to console

无需任何地方new Foo()。

按照惯例，当您实际需要来自实例的状态（读取状态或写入状态）时，应该使用实例方法。

检查会告诉您，当您的原型/类方法中没有this时（因此不需要实例）。

Answer 2

https://www.newmediacampaigns.com/blog/refactoring-react-components-to-es6-classes

http://aristid.es/react-es6-components-static-declarations/

Source to book

import {Image} from '.../some';
Image.fetch() //call static method

我认为当不同的组件可以使用相同的方法时，就可以使用静态

将方法作为静态有什么好处吗？

2 个答案: