Summary of problems encountered during development

1. BUG-In android7 phone can not slide above

Note: Android 7.0 and above, the problem of slow and slow iScroll sliding has been solved

What browser are you using?

There was a fix to iScroll's handling of passive events in Chrome 55, but a new bug appeared in Chrome 56 (confirmed in the iScroll demos).

EDIT: Scouring the GitHubs, rbmeyers (on the github team), has been posted everywhere with a simple CSS fix:

touch-action: none;

2. Confusion about event binding when React uses ES6+ syntax

Use onClick={ this.handleClick.bind(this) } in props Or onClick={ (e) => this.handleClick(e) } or onClick={ ::this.handleClick } will cause performance problems, so now eslint will prevent these writing methods during syntax checking. The reason for the problem is If you encounter these writing methods every time you render, you will reuse the handleClick function to bind this to create a new function, which will affect performance.

If you use the following writing rules, it will not be created every time:

// 1. 
constructor() {this.handleClick = this.handleClick.bind(this);
}
handleClick(e) { /* ... */ }// 2. 
handleClick = (e) => { /* ... */ };

3. webpack-dev-server + HostAdmin, resulting in invalid host header

Access to webpack startup Server can be accessed normally using localhost and 127.0.0.1 directly. However, if the host is modified and accessed using hostname, the invalid host header will be displayed.

It turns out that the new version of webpack-dev-server has modified some things and checks hostname by default. If the hostname is not configured, it will not be accessible. This configuration should be based on some security factors. I deleted node_modules once before and this problem occurred after reinstalling it.

Repair method

disableHostCheck:true

or

public: 'local.kingsum.biz'

Looking at the document, it should be webpack -dev-server: This version v1.16.4 was merged in, so you should pay attention to this issue after upgrading to this version

4. Select2 initialization default value

xxx.val(status).trigger ('change')

me.$statusSelect.select2({
	data:  [{
      		id : '1',
      		text : '有效'
      	},{
      		id : '0',
      		text : '无效'
      	}
    ],
}).val(status).trigger('change');

5. How to remove the up and down arrows that come with the browser when input type="number"?

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"]{
  -moz-appearance: textfield;
}

The above is the detailed content of Summary of problems encountered during development. For more information, please follow other related articles on the PHP Chinese website!