一、在项目中使用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表示当前组件的实例对象。