React 学习总结

在这里插入代码片

1. text/babel 将jsx - js
2. react 工作步骤
   a) 创建虚拟DOM
   b) 渲染虚拟DOM到页面
3. 虚拟DOM
   1）本质是object类型对象
   2）虚拟DOM 比较轻量级 因为虚拟DOM是react 内部在用，无需真实DOM上那么多属性
   3）虚拟DOM最终会被react渲染到真实DOM上
   ReactDOM.render(VDOM,document.getElementById(‘test’))
4. JSX 语法规则
   1. 定义虚拟DOM时，不需要写引号
      2）标签中混入JS表达式时候要用{}
   2. 样式类名不要用class ，用className
   3. 内联样式 要用style="{{key.value}}"的形式去写
      5）标签必须闭合
      6）只有一个根标签
      7）标签首字母
      a) 若小写字母开头，则将该标签转换成html中的同名元素，若html中无对应的同名元素报错
      b) 若大写字母开头，react就去渲染对应的组建
5. 模块与组建

1）函数式组建
       function Demo(){      //-->组建名称要大写
        console.log(this)    //此处this是undefined 因为babel编译后开启了严格模式
           return <h5>我是函数式组建</h5>
       }
       reactDom.render(<Demo/>,document.getElementById('test'))
     2）类式组建
        //创建类式组建
        class MyComponent extends React.MyComponent{
            //render 是放在哪里的？ -- 类的原型对象上，供实例使用
            render(){
                return <h2>哈哈</h2>
            } 
        }

        //渲染组建到页面
        ReactDOM.render(<MyComponent/>,document.getElementById('test'))
         --> 执行ReactDom.render() 之后 发生了什么
             React 解析了组建标签 找到了myComponent组建
             发现组建是使用类定义的，随后new出来该类的实例 调用原型上的render方法
             将render 返回的虚拟DOM转为真实DOM 随后呈现在页面中
          3）类-复习
      a）类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写
      b) 如果A类继承了B类 且A类写了构造器，那么A类构造器中的super是必须要调用的
      c) 类中所定义的方法，都是放在了类的原型对象上，供实例去使用
        class Person{
            //构造器方法
            constructor(name,age){
                //构造器中的this是谁--类的实例对象
                this.name=name
                this.age=age
            }
            //一般方法
            speak(){
                //speak 方法放在了哪里？ person类的原型对象上，供实例使用
                //通过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(){
                console.log(`我是$(this.name),我的年龄$(this.age)岁`,我正在读$(this.grade)年纪)
            }
        }
        const p1=new Person('tom',18)
        const s1=new Student('小米',15,'高一')