React语法简单总结

duansamve

已于 2023-12-17 22:38:48 修改

阅读量577

点赞数

分类专栏： React 文章标签： react.js javascript 前端

于 2020-03-15 11:12:51 首次发布

本文链接：https://blog.csdn.net/duansamve/article/details/104873980

版权

React 专栏收录该内容

71 篇文章 3 订阅

订阅专栏

一、在项目中使用React：

在项目中使用React_实际开发中react用法-CSDN博客

二、虚拟DOM：

虚拟DOM本质是个一般对象，最终会被React转换成真实DOM呈现在页面上。

三、JSX：

在项目中使用JSX语法：

手动搭建React开发环境（不用脚手架来搭建React开发环境）_不使用脚手架创建react项目使用jsx-CSDN博客

JSX语法的本质：

并不是直接把JSX渲染到页面中，而是内部先转换成了CreateElement形式再渲染。

语法规则：

1、定义虚拟DOM时不要写引号；

2、标签中混入表达式时要用{}；

3、只有一个根标签；

4、标签必须闭合；

5、标签首字母：

a、若小写字母开头，则将该标签转换为html中的同名标签，若html中没有对应的同名标签，则报错；

b、若大写字母开头，React就去渲染对应的组件，若组件没有定义，则报错。

6、

四、创建组件的两种方式：

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>
        )
    }
}

补充：

ES6之class类-CSDN博客

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(){}
    // 类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写；
    // 如果A类继承了B类，且A类中写了构造器，则A类构造器中的super是必须写的；
    // 构造器的作用：每当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 {
  // 定义在原型上，供实例使用
  // 通过App实例调用a时，a中的this就是App实例
  a() {
    console.log(1);
    console.log(this);
  }

  // 定义在对象上
  b = () => {
    console.log(1)
  }
}

构造器中是否接收props，是否传递super，取决于是否希望在构造器中通过this访问props：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        class MyComponent extends React.Component{
            // 构造器中是否接收props，是否传递super，取决于是否希望在构造器中通过this访问props
            // constructor(props){
            //     super(props);
            //     console.log("constructor:", this.props); // constructor: {name: "React"}
            // }

            constructor(){
                super();
                console.log("constructor:", this.props); // constructor: undefined
            }

            handleClick(){
                console.log("React类的自定义方法中的this为：");
                console.log(this);
            }

            render(){
                return <h2 onClick={this.handleClick}>我是类定义的组件</h2>;
            }
        }

        ReactDOM.render(<MyComponent name="React"/>, document.getElementById("app"));


    </script>
</body>
</html>

两种创建方式的对比：

1、用构造函数创建的组件叫“无状态组件”；

2、用class关键字创建的组件叫“有状态组件”；

3、有状态组件和无状态组件的本质区别是：有无state属性和有无生命周期函数。

有状态组件有自己的私有数据和生命周期函数；

无状态组件只有props，没有自己的私有数据和生命周期函数；

4、什么情况下使用有状态组件，什么情况下使用无状态组件？

一个组件如果需要有自己的私有数据，则推荐使用有状态组件，反之则推荐使用无状态组件；

无状态组件因为没有自己state和生命周期函数，所以运行效率会比有状态组件稍高。

5、组件中props和state的区别：

props中的数据都是外界传递进来的，state中的数据都是组件私有的（一般是通过ajax取回来的）；

props中的数据都是只读的，不能重新赋值，state中的数据是可读写的。

React：构造函数和class关键字创建组件方式的对比

五、state（状态）：

1、state在组件的constructor里外初始化是一样的，state都是挂载在组件实例上；

2、state只能使用setState()方法更新；

3、setState会导致render重新执行，渲染组件和子组件。

六、props：

1、每个组件对象都有props（properties的简写）属性；

2、组件标签的所有属性都保存在props中。

作用：

1、通过标签属性从组件外向组件内传递变化的数据；

2、注意：组件内部不要修改props属性。

编码操作：

React：使用ES6的展开运算符简化传递props数据的过程

七、事件处理：

1、通过onXxx属性指定事件处理函数（注意大小写）：

a、React使用的是自定义（合成）事件，而不是使用的原生DOM事件——为了更好的兼容性；

b、React中的事件是通过事件委托的方式处理的（委托给组件最外层的元素）——为了高效；

2、通过event.target得到发生事件的DOM元素对象——不要过度使用ref。

React中事件处理时很容易出现this指向的问题，推荐使用以下标准写法避免此类问题：

class 类名 extends React.Component {
    render() {
        return (
            <div>
                <button onClick={ () => this.show("传参") }></button>
            </div>
        )
    }

    show = (arg1) => {
        console.log("show方法" + agr1);
    }
}

React类的自定义原型方法中的this指向为什么是undefined？如何解决？（绑定 this 的几种方式）