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