React do not use bind (this), all with arrow functions. Is there any disadvantage in this?
React do not use bind (this), all with arrow functions. Is there any disadvantage in this?
< del > arrow function is that it can automatically bind the this < / del > arrow function in the context. The advantage is that it will not create its own this , it will only inherit this from the upper layer of its scope chain. Of course, this may also be a disadvantage, for example, when you need to change this , you need to change it to a normal function.
another situation I encounter is the need to use decorators, ordinary functions use decorators to directly override descriptor.value . But if decorated in the arrow function above descriptor.value is empty, need to operate through other methods, a little trouble, and finally I directly changed to a normal function, in the outermost layer binding this decorator to solve.
actually not much to entangle, as long as you understand what circumstances can not be used, other cases boldly use. Whenever you have a problem, keep it in mind. It's just that you can't use it. It's the same as whether or not to add a semicolon at the end. Basically all the situations that can be encountered after using too much have been encountered. As for the situations that have not been encountered, we will talk about them when we encounter them.
it is recommended to use the arrow function, which can avoid the hidden problems caused by this pointing. The second floor said that "the advantage of the arrow function is that it can automatically bind the this in the context". It is not bound by yourself, but the arrow function does not automatically change the this, at all, that is, there is no this, in the arrow function. The this in the arrow function is one level above it.
has no shortcomings, it is recommended to write this in itself.
I have written a lot of projects, but I haven't found that I have to use bind (this)
has its drawbacks, of course, the arrow function does not have a name and sometimes cannot provide friendly stack information.
if you write with the arrow function, you may see piles of anonymous in the error stack
1. Write the landing page with react, after calling the background data with axios, judge the route of the page to jump according to the return value, how to jump? 2.axios.get ( login login.action?username= +name+ &password= +pd, {) timeout: 1000...
setting in state: this.state = {checkList: []}; checkList initializes it with an array of the same length as JsonPage: this.setState ({checkList:checkSaveCount}); checkSavaCount is the same length as the following JsonPage. the following creates...
import React from react ; class PublicScreen extends React.Component { constructor(props) { super(props); this.getStyle = this.getStyle.bind(this); } getStyle() { const { width = 1920, height = 1080 } = this.pr...
renderdphtmldvareturnapiBackend: apiBackend ...
react projects cannot save store? using redux, data index.js ReactDOM.render( <Provider store={store}> <Router > < Provider>, document.getElementById( root )) registerServiceWorker() actions export const SET_USER = ...
this method is included in the constructor of most components, so what exactly is this method for constructor(props,context){ super(props,context) } ...
use the Table component of Antd Design, first check out the data, and then select a CheckBox, but when you change pages, that CheckBox will not disappear. For example, when I select the first line on the first page, and then skip to the second page, the ...
I can run before packaging without any error reports. This problem occurs after packaging. reports such an error in the browser, using scaffolding made by create-react-app, and the back end is Node.js, backend. No error is reported: packages two diff...
segmentfault dvaws.open().websocketwebsocketws ws.openfetchGETloginsendfetchCOOKIECOOKIEFETCHCOOKIECOOKIE ...
...
now we need to develop a website to generate front-end pages based on the node ID saved in the database. For example, the json data is: let data=[ {"id":1,"pid":0,"type":"div"}, {"id":2,"pi...
I pass values through redux scenario is when I click on the navigation bar of component 1 and refresh the ajax of component 2 is the data returned by ajax accepted by this.state.contnet what should I write? There is an urgent need for ideas. ...
official example of full copy: this is the official sample code: import { Select } from antd ; const Option = Select.Option; function handleChange(value) { console.log(`selected ${value}`); } ReactDOM.render( <div> <Select defaul...
how to use react to change the value of Input < hr > export default class myForm extends Component{ constructor(props){ super(props); this.state = { id: , }; } change=()=>{ var idIn...
want to set the meta tag to solve the adaptive problem <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> meta LOGO ...
use list as the option data source for Select, but use callback, which cannot be rendered. Just call it directly, as shown in the figure below. The first method is fine, and the second is not. Because there are many Select, on a page, you need to use th...
< H1 > github address < H1 > error will be reported when using npm run dev const path = require( path ); const merge = require( webpack-merge ); const common = require( . webpack.common.js ); dev-server let BundleAnalyzerPlugin = require( ...
import React from react ; import ReactDOM from react-dom ; import . assets styles index.less ; import Green from . assets images green.png ; import Red from . assets images red.png ; class Circle extends React.Component { constructor...
There are two areas in the State and Lifecycle section that I don t quite understand 1. State Updates are Merged The merging is shallow, so this.setState ({comments}) leaves this.state.posts intact, but completely replaces this.state.comments. ...
like this [array [xxx], array [xxx], array [xxx].] merge all xxx in array into one array [xxx.] ...