一、在项目中使用React:
https://blog.csdn.net/duansamve/article/details/104128357
二、虚拟DOM:
三、JSX:
在项目中使用JSX语法:
https://blog.csdn.net/duansamve/article/details/104127759
JSX语法的本质:
并不是直接把JSX渲染到页面中,而是内部先转换成了CreateElement形式再渲染。
在JSX中混合写入JS表达式:
在JSX语法中,要把JS代码写在{}中。
四、创建组件的两种方式:
render:
作用:用于将JSX渲染到页面中。
注意:
a、在组件中是必须要实现的;
b、只在state改变后触发。
1、构造函数:
2、class:
具体实现:
import React, { Component } from 'react'
// 如果使用 class 定义组件, 必须让自己的组件继承自
export default class 组件名 extends React.Component {
// 在组件内部必须有 render 函数
// render作用:渲染当前组件所对应的虚拟DOM
render() {
// 在 render 函数中必须返回合法的JSX虚拟DOM结构
return (
<div>
</div>
)
}
}
class 组件名 extends React.Component {
render() {
return (
<div>
{/* 这里的Movie标签,其实就是Movie类的一个实例对象 */}
<Movie/>
{/* 在class组件内部,this表示当前组件的实例对象 */}
这是Movie组件--{this.props.name}
</div>
)
}
}
补充:
class Animal {
constructor(n, a){
this.name = n; //name是实例属性
this.age = a; //age是实例属性
}
// 在class内部,通过static修饰的属性就是静态属性,用的不多(es6中没有,es7中才有)
static info = "eee";
// 这是动物类的静态方法,用的不多(es6中有)
static show(){
}
a = 1 // 注意!!这里定义的不是在原型上的属性,而是给实例初始化的
// 这是Animal的原型方法,会经常用到
call(){
console.log("动物的实例方法")
}
// render函数作用:渲染当前组件所对应的虚拟DOM元素
render() {
// return null
// 在class关键字中,如果想使用外界传递过来的props参数,不需接收,直接通过this.props.***访问即可
return (
<div>
</div>
)
}
}
console.log(Animal.info);
import React, { Component } from 'react'
export default class Animal extends Component {
// 这是类中的构造器
// 每个类中都有一个构造器,如果没有手动指定构造器,那么可以认为类内部有个隐形的、看不见的空构造器, 类似于constructor(){}
// 构造器的作用:每当new这个类的时候必然会优先执行构造器中的代码
constructor(name, age){
this.name = name;
this.age = age;
}
// render函数作用:渲染当前组件所对应的虚拟DOM元素
render() {
// return null
// 在class关键字中,如果想使用外界传递过来的props参数,不需接收,直接通过this.props.***访问即可
return (
<div>
</div>
)
}
}
class American extends Person{
constructor(name, age){
// 问题1:为什么一定要在constructor中调用super()
// 答案:因为如果一个子类通过extends关键字继承了父类,那么在子类的constructor构造函数中必先优先调用super()
// 问题2:super()是个什么东西?
// 答案:super是一个函数,而且它是父类的构造器,子类中的super其实就是父类中constructor构造函数的一个引用
super(name, age);
}
}
class Chinese extends Person{
constructor(name, age, IDNumber){
super(name, age);
this.IDNumber = IDNumber;
}
}
const c1 = new Chinese("张三", 22, "xxxxxxxxxxxxxxxxx");
class App extends Component {
// 定义在原型上
a() {
console.log(1)
}
// 定义在对象上
b = () => {
console.log(1)
}
}
两种创建方式的对比:
1、用构造函数创建的组件叫“无状态组件”;
2、用class关键字创建的组件叫“有状态组件”;
3、有状态组件和无状态组件的本质区别是:有无state属性和有无生命周期函数。
有状态组件有自己的私有数据和生命周期函数;
无状态组件只有props,没有自己的私有数据和生命周期函数;
4、什么情况下使用有状态组件,什么情况下使用无状态组件?
一个组件如果需要有自己的私有数据,则推荐使用有状态组件,反之则推荐使用无状态组件;
无状态组件因为没有自己state和生命周期函数,所以运行效率会比有状态组件稍高。
5、组件中props和state的区别:
props中的数据都是外界传递进来的,state中的数据都是组件私有的(一般是通过ajax取回来的);
props中的数据都是只读的,不能重新赋值,state中的数据是可读写的。
五、state(状态):
1、state在组件的constructor里外初始化是一样的,state都是挂载在组件实例上;
2、state只能使用setState()方法更新;
3、setState会导致render重新执行,渲染组件和子组件。
六、props:
七、事件处理:
React中事件处理时很容易出现this指向的问题,推荐使用以下标准写法避免此类问题:
class 类名 extends React.Component {
render() {
return (
<div>
<button onClick={ () => this.show("传参") }></button>
</div>
)
}
show = (arg1) => {
console.log("show方法" + agr1);
}
}
八、组件生命周期:
九、class组件内部的this:
class组件内部的this表示当前组件的实例对象。