React: React component state machine

I. Introduction

In React, there are two core default properties, namely state and props. assembly state status records, React according to a change of state, the interface will be adjusted accordingly, or rendering. props is the data flow properties, React to enable communication between components Sons props pass through. Component state mechanism in this chapter show React research in many Web interface can see the data constantly changes, in fact, this process is listening to the state React state results when changing constantly occur again and again re-assembly re-rendering. React based on this mechanism, so developers can flexibly be done with state control of behavior, update data, and rendering interface. By means of the component lifecycle, the function may be provided in the default state getInitialState state, acts on the logic operation performed componentDidMount function, if the need to change the execution state calls the this . The setState function can be updated , this time React components will be adjusted in real time according to changes of state. The following diagram, this is just a common component state machine using the process, developers can take advantage of complete and according to their needs.

Second, the case

In the interface, there is a label component, before rendering the page, start a timer system, constantly changing state value, then updated in real time components.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Hello React</title>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="browser.min.js"></script>
</head>
<body>
    < Div ID = "Container" > </ div > 
    < Script type = "text / Babel" > 

        // label tag 
        var CountLabel = React.createClass ({ 

            // call the component initialization, some data initialization 
            getInitialState that: function () { 
                the console.log ( " --- ---- getInitialState that " )
                 return { 
                    COUNT: 0  
                }; 
            }, 

            // rendering operation, the component updates 
            the render: function () {
                the console.log ( " --- ---- the render " )
                 var countStyle = { 
                    Color: " Red " , 
                    the fontSize: 50 
                }; // value to String
               
                 var COUNT =  the this .state.count.toLocaleString ()
                 return (
                     < h1 of style = {countStyle} > {COUNT} < / h1 of> 
                ); 
            }, 

            // timer callback function is defined,Timer starts to run, the state of the update state, re-render the render function 
            timerTick: function () { 

                // is equal to 50 resets 
                IF ( the this .state.count ===  50 ) { 
                     the this .setState ({ 
                        COUNT: 0 
                    }) ; 
                } the else {
                     // continue to accumulate 
                    the this .setState ({ 
                        COUNT: the this .state.count +  10 
                    }); 
                } 
            }, 

            // after the completion of the first component to render call
            componentDidMount: function () { 
                the console.log ( " --- ---- componentDidMount " )
                 // function using the system, define a timer, timerTick timer callback function to 
                the setInterval ( the this .timerTick, 1000 ); 
            } 

        }) ;     


        // timer box 
        var TimerBox = React.createClass ({ 
            the render: function () {
                 // set box style
                 var divStyle = { 
                    width: 200 is ,
                    textAlign: "center",
                    backgroundColor: "#EDA",
                    padding: 10,
                    fontFamily: "sans-serif",
                    borderRadius: 10
                };

                return (
                    <div style={divStyle} >
                        <CountLabel/>
                    </div>
                );
            }
        });
        
        //组件挂载 
        ReactDOM.render(
                        <TimerBox/>,
                        document.getElementById('container')
                    );

    </script>
</body>
</html>

Third, the results

1, printing, you can see the normal life cycle of only called once, but render the timer function to change the state with the state can keep calling.

2, the movable FIG.

React: React component state machine

Guess you like