The introduction of

Part009 makes the changeWeather event successfully change the value of isHot in state by binding the changeWeather function on the prototype object to the Weather instance and assigning this to the changeWeather function in the Weather instance. However, “hot” does not become “cool”, this chapter to solve the problem of state modification, page real-time rendering

React doesn’t like React. Let’s take a look at how React itself requires state changes.

analyse

React components can be used to create a class component that extends functions, functions, and functions from the React.component.functions class.

Boy, setState sounds like a little thing used to change the state

Quick try setState

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <! -- Get the container ready -->
    <div id="test"></div>
    <! Import dependencies, import dependencies, must follow this step -->
    <script type="text/javascript" src=".. /js/react.development.js"></script>
    <script type="text/javascript" src=".. /js/react-dom.development.js"></script>
    <script type="text/javascript" src=".. /js/babel.min.js"></script>
    
    <! -- JSX syntax is parsed with Babel
    <script type="text/babel">
        // 1. Create components
        class Weather extends React.Component{
            constructor(props){
                super(props)
                this.state={
                    isHot:true
                }
                this.changeWeather = this.changeWeather.bind(this)}render(){
                console.log(this)
                const {isHot} = this.state
                return (
                    <h1 id="span" onClick={this.changeWeather}>The weather isHot today. 'Hot ':' cool '}</h1>)}changeWeather(){
                console.log(this)
                const {isHot} = this.state
                // Note: the state cannot be changed directly and must be updated by setState and the update is a merge, not a replacement
                this.setState({isHot:! isHot}) } }// 2. Render. If there are multiple renders of the same container, the later ones will overwrite the previous ones
      ReactDOM.render(<Weather/>.document.getElementById('test'))
        
    </script>
</body>
</html>
Copy the code

Beef cattle

The state abbreviations

The constructor + property declaration +this points to a whole bunch of redundancy

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src=".. /js/react.development.js"></script>
    <script type="text/javascript" src=".. /js/react-dom.development.js"></script>
    <script type="text/javascript" src=".. /js/babel.min.js"></script>
    
    <script type="text/babel">
        // 1. Create components
        class Weather extends React.Component{
            // constructor(props){
            // super(props)
                // this.state={
                // isHot:true
                // }
                // this.changeWeather = this.changeWeather.bind(this)
            // }
            state={
                isHot:true
            }
            render(){
                const {isHot} = this.state
                return (
                    <h1 id="span" onClick={this.changeWeather}>The weather isHot today. 'Hot ':' cool '}</h1>)}// changeWeather(){
            // const {isHot} = this.state
            // this.setState({isHot:! isHot})
            // }

            // The custom method takes the form of an assignment statement + arrow function
            // Classes can write assignments directly instead of writing them in constructors
            // This does not exist in the arrow function. It looks for a Weather instance outside the function body instead of a bind
            changeWeather=() = >{
                const {isHot} = this.state
                this.setState({isHot:! isHot}) } } ReactDOM.render(<Weather/>.document.getElementById('test'))
    </script>
</body>
</html>
Copy the code

The assignment statement + arrow function replaces the constructor declaration +this pointing to + custom function, so that the constructor can pass, the assignment statement YYds

conclusion

  1. State is the most important attribute of a component object, and the value is the combination of multiple key-values that an object can contain
  2. Components are called ‘state machines’ and update the corresponding page display by updating the state of the component (re-rendering the component)
  3. This in the Render method of the component is the component’s power object
  4. The value of this in the component custom method is undefined. Force binding this: through the function object’s bind() b. arrow function + assignment statement
  5. Status data cannot be modified or updated directly