In the use of react, you often encounter various problems. If you are not familiar with react, you will feel inexplicable and helpless about the problems encountered. Next, analyze the problems and points of attention that are easy to encounter in react.
1. setState() is asynchronous
this.setState() will call the render method, but will not immediately change the value of the state, which is assigned in the render method. So the value of the state obtained immediately after executing this.setState() is unchanged. The same direct assignment of state does not trigger an update because the render function is not called. So is there a way to get the updated value directly after setState? The answer is yes
We can use the second parameter of setState (a callback function) to get the updated value.
this.setState({centerPoint:e.target.af} ,()=>{ this.addCircle(this.state.centerPoint); });It's ok to write like this. In addition, the componentDidUpdate function is executed first with the setState callback. This should also be noted.
2. The life cycle of the
component componentWillMount and componentDidMount are only called during initialization.
componentWillReceiveProps, shouldComponentUpdate, componentWillUpdata, componentDidUpdate are called only when the component is updated, not during initialization.
3. The reducer must return a new object to trigger the update of the component
because in the connect function, a shallow comparison of the old and new states is performed. If the state only changes in value but the reference address does not change, connect will consider them the same and not trigger an update.
4. Regardless of whether the state returned by the reducer changes, all callback functions registered in subscribe will be triggered.
5. The first letter of the component name must be capitalized, which is the norm for class naming.
6. Before the component is unloaded, the listener events and timers added to the dom element need to be cleared manually, because these are not within the control of react and must be cleared manually.
7. If the component is exposed through export default when loading on demand, default must be added to require.ensure.
require.ensure([], require => {
cb(null, require('../Component/saleRecord').default)
},'saleRecord')8. The routes of react include hashHistory and browserHistory. HashHistory is controlled by hash# and is generally used for official online deployment. The browserHistory is a common address jump, which is generally used in the development stage.
9. When used in the label, for should be written as htmlFor, because for has become a keyword.
10. The value of state can be changed directly in componentWillUpdate instead of setState.
11. If the es6class class is used to inherit the component component of react, super must be called in the constructor, because the subclass needs to use super to inherit the this of the component, otherwise an error will be reported when instantiating.
12、
Call the function ``onClick={this.onClose('key')}`` for the click event in the render. If it is written in this form, it will cause the render to loop infinitely, and if the following form is used, the function will return a function, not An infinite loop occurs. (To solve the problem of immediate execution of functions with parameters, the reason for the difference between onChange and onClick is because of parameters), the onChange callback is with parameters, the following method solves the problem of how to pass parameters in the case of default parameters, key is the passed parameter, e is the default parameter.
onChange={this.handleChange(Animaltype)}
handleChange=key=>(e)=>{
this.props.onNumberChange(e , key);
};
onClick={() =>this.OnClick(value.id)}
OnClick =(value) =>{
console.log(value);
this.setState({click:!this.state.click});
};
For the problem caused by asynchronous background data loading, it can usually be solved by React's cycle method, or you can try to use redux to solve it.