React Learning Essays

The 1.render should be a pure function, meaning that each time the same input is given, the same output should be returned, and there should be no behavior that modifies the state or interaction, which is passed on to the logic.

2. Components should follow the minimize state principle, that is, to make most of the components stateless, so as to reduce complexity, the only thing that these stateless components need to be concerned about is rendering data, their outer layer plus a state component, the outer component handles events and logic, Modify the state. These stateless subcomponents are just as good as rendering the data based on the incoming props.

3.DOM operation, in most cases we do not need to manipulate the DOM to modify the UI, but rather use setstate to do it, but in some cases we have to access the real DOM, such as the user input component in the real DOM entered a value, Then we will have access to the real DOM node through refs.

Specifically, a REFS property is set on the node and then the DOM node is obtained through THIS.REFS.NAME.

As an example:

<input type= "text" refs= "Realdom"/>

<button onclick={Callback}/>

Then the callback of this button can get the input value.

Callback () {

Let value = This.refs.realdom.value

Let Statechange=value

You can also change the state to re-render the component

This.setstate (

{StateChange}, () =>{this.refs.readom.value= "";}

);

}