2021-07-24

React学习第三天

1.类的相关知识

<script type="text/javascript">
    //创建一个Person类
    class Person{
        constructor(name,age){
            //构造器中的this指向实例对象
            this.name=name
            this.age=age
        }
        //一般方法
       speak(){
           //speak方法放在了哪里？--类的原型对象上，供实例使用
           //通过Person实例调用speak时，speak中的this指向Person实例
           console.log("我是"+this.name,"我今年"+this.age)
       }
    }  
    //创建一个Student类，继承Person类
    class Student extends Person{
        constructor(name,age,grade){
            super(name,age)
            this.grade=grade
        }
        //speak继承父类的方法，并可重写
       speak(){
        console.log("我是"+this.name,"我今年"+this.age,"我读的是"+this.grade)
       }
       study(){
           //study方法放在了哪里？--类的原型对象上，供实例使用
           //通过Student实例调用study时，study中的this就是Student实例
           console.log("我很努力的学习")
       }

    }
    //创建一个实例对象
    const p1 = new Person("tom",18)
    const p2 = new Person("Ann",19)
    const s1 = new Student("Bai",12,"高一")
    console.log(p1)
    console.log(p2)
    console.log(s1)
    p1.speak()
    s1.speak()
    s1.study()
    </script>
    <!-- 
        总结：
            1.类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性才写。
            2.如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。
            3.类中定义的方法，都是放在了类的原型对象了，供实例去使用。
     -->

2.类式组件

 //创建类式组件
   class MyComponent extends React.Component{
       //render放在哪里？ --类(MyComponent)的原型对象上，供实例使用
       //render中的this是谁？ --MyComponent的实例对象
        render(){
            console.log('render中的this：',this)//输出render中的this:MyComponent
            return(
                <h1>hello,我是类式组件！！</h1>
            );          
        }
    }

   //渲染组件到页面
   ReactDOM.render(<MyComponent />,document.getElementById('test'));
  /*
  执行了React.remder(<MyComponent />,document.getElementById('test'))之后发生了什么？
    1.React解析组件标签，找到了MyComponent组件。
    2.发现组件是使用类定义的，随后new出来该类实例，并通过该实例调用到原型上的render方法。
    3.将render返回的虚拟DOM转为真是DOM，随后呈现在页面中。
  */

注意：简单组件和复杂组件区别
一般类式组件主要用于复杂组件的定义，函数式组件用于简单组件的定义。主要区别在于，有状态（state）是复杂组件，无状态的是简单组件。
什么是状态：状态就是影响行为的描述，如你今天考试不好，你说今天状态不好，影响了你的考试。组件的状态则驱动（影响）了页面。React中数据就是放在了状态里，数据的改变就驱动了页面的变化。

3.组件实例的三大核心属性之一：state

//1.创建组件
    class Weather extends React.Component{
        constructor(props){
            super(props)
            this.state={isHot:true}
            //通过isHot判断输出炎热或者凉爽
        }
        render(){
            console.log(this)
            return <h1>今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h1>
        }
    }
    //2.渲染组件到页面
    ReactDOM.render(<Weather />,document.getElementById('test'))

复习原生事件绑定

 <!-- 事件绑定的三种方式 -->
    <button id="btn1">按钮1</button>
    <button id="btn2">按钮2</button>
    <button onclick="demo()">按钮3</button>
    
    <script type="text/javascript">
    const btn1=document.getElementById('btn1')
    btn1.addEventListener('click',()=>{
        alert('按钮1被点击了')
    })
    const btn2=document.getElementById('btn2')
    btn2.onclick=()=>{
        alert('按钮2被点击了')
    }
    function demo(){
        alert('按钮3被点击了 ')
    }
    </script>

4.实现state的动态变化

//1.创建组件
    class Weather extends React.Component{
        constructor(props){
            super(props)
            this.state={isHot:true}
            //解决changeWeather中this指向问题
            this.changeWeather=this.changeWeather.bind(this)
            //bind（）能够1.更改this的指向2.生成新的函数
        }
        render(){
            //读取状态
            const {isHot} = this.state
            //return <h1 id="title">今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h1
            //在React中onClick的C是大写的，并且不能写字符串类型的函数，去掉引号,不能直接调用函数，去掉（）
            return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h1>
        }
        changeWeather(){
        //changeWeather放在了哪里？   Weather的原型对象上，供实例使用
        //只有通过Weather实例调用changeWeather时，changeWeather中的this就是Weather
        //由于changeWeather是作为onClick的回调，所以不是通过实例直接调用的，是直接调用的。
        //类中的方法默认开启了局部的严格模式，所以changeWeather中的this为underfined
        
        //获取原来的isHot值
        const isHot = this.state.isHot
        //状态必须通过setState更改，且更新是一种合并
        this.setState({isHot:!isHot})


        //严重注意：状态(state)在React中不可以直接更改，要借助一个内置API更改。下面这行就是直接更改
        //this.state.isHot=!isHot  错误写法
        }
    }
    //2.渲染组件到页面
    ReactDOM.render(<Weather />,document.getElementById('test'))
    //第一种事件绑定
    const title = document.getElementById('title')
    /*title.addEventListener('click',()=>{
        console.log('标题被点击了')
    })*/

    //第二种事件绑定
   /*title.οnclick=()=>{
    console.log('标题被点击了')
   }*/console

5.state
理解：
1.state是组件对象最重要的属性，值是对象 （可以包含多个key-value的组合）
2.组件被称为"状态机"，通过更新组件的state来更新对应的页面显示（重新渲染组件）
强烈注意：
1.组件中render方法中的this为组件对象
2.组件自定义的方法中this为underfined，如何解决？
a.强制绑定this：通过函数bind改变this指向
b.箭头函数
3.状态数据，不能直接修改或更新

6.props基本传参方法：

 class Person extends React.Component{
        render(){
            const{name,sex,age} = this.props
            return(
                <ul>
                    <li>姓名:{name}</li>
                    <li>性别:{sex}</li>
                    <li>年龄:{age}</li>
                </ul>
            )
        }
    }

    //渲染组件到页面
    ReactDOM.render(<Person name="tom" sex="女" age="18" />,document.getElementById('test'))
    ReactDOM.render(<Person name="Aom" sex="男" age="20" />,document.getElementById('test1'))
    ReactDOM.render(<Person name="Bom" sex="女" age="28"/>,document.getElementById('test2'))
    </script>