React语法简单总结

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