React from entry to actual combat - three core attributes of components (1) state

State

1. state is the most important attribute of the component object, and the value is an object (can contain a combination of multiple Key-values)
2. The component is called a state machine, and the corresponding page display is updated by updating the state of the component (re-rendering the component)

    class MyComponent extends React.Component {
        render(){
            console.log(this)
            return <h1>今天天气很炎热</h1>
        }
    }
    // 渲染虚拟DOM到页面
    ReactDOM.render(<MyComponent/>,document.getElementById("test"))

stateful components

In addition to using external data (accessed via this.props), components can also maintain their internal state data (accessed via this.state). When the state data of the component changes, the component will call the render() method again to re-render the corresponding markup.

Binding event - solve the pointing problem of this in the class

The event bound in render is used as the callback of onClick, not called through the instance. The method in the class has enabled the local strict mode by default. If you directly print the this of the method in the class, it is undefined.

<script type="text/babel">
    class MyComponent extends React.Component {
       constructor(props){
        super(props)
        this.state = {
            content:'今天天气很炎热',
            flag:true
        }
        this.clickFn = this.clickFn.bind(this)
       }
        render(){
            console.log(this)
            return <h1 onClick={this.clickFn}>{this.state.content}</h1>
        }
        clickFn(){
            console.log(this.state)
        }
    }
    // 渲染虚拟DOM到页面
    ReactDOM.render(<MyComponent/>,document.getElementById("test"))
</script>

Use of setState

The state state cannot be changed directly, it needs to be modified with the help of setState

<script type="text/babel">
    class MyComponent extends React.Component {
    
    
       constructor(props){
    
    
        super(props)
        this.state = {
    
    
            content:'今天天气很炎热',
            isHot:true
        }
        this.clickFn = this.clickFn.bind(this)
       }
        render(){
    
    
            console.log(this)
            return <h1 onClick={
    
    this.clickFn}>{
    
    this.state.content}</h1>
        }
        clickFn(){
    
    
            let content = ''
            let isHot = this.state.isHot
          if(this.state.isHot){
    
    
                content = '今天天气很炎热'            
          }else{
    
    
            content= '今天天气很凉爽'
          }
          this.setState({
    
    
            content:content,
            isHot:!isHot
          })
        }
    }
    // 渲染虚拟DOM到页面
    ReactDOM.render(<MyComponent/>,document.getElementById("test"))
</script>

Simplify the code

1. Omit the constructor, you can directly write the assignment statement in the class

2. The function in the class is bound to the instance object using the arrow function

   • The arrow function does not have its own this, its this is inherited, and by default points to the object where it was defined, here refers to the parent scope
   • Custom method - use the form of assignment statement + arrow function

 class MyComponent extends React.Component {
      // 类中可以直接写赋值语句
        state={isHot:false,content:"今天天气很凉爽"}
        render(){
            return <h1 onClick={this.changeWeather}>{this.state.content}</h1>
        }
        // 使用箭头函数将方法绑定在实例对象上，箭头函数没有自己的this
        // 自定义方法
        changeWeather = ()=>{
          let content = ''
            let isHot = this.state.isHot // 此处的this是父级作用域
          if(this.state.isHot){
                content = '今天天气很炎热'            
          }else{
            content= '今天天气很凉爽'
          }
          this.setState({
            isHot:!isHot,
            content:content
          })
        }
    }
    // 渲染虚拟DOM到页面
    ReactDOM.render(<MyComponent/>,document.getElementById("test"))				

Summarize

1. The this in the render method of the component is the component instance object
2. This is undefined in the component's custom method:
   • Mandatory binding of this, through the bind() of the function object
   • arrow function
3. State data, which cannot be modified or updated directly, can be modified through this.setState()