React简介及基础用法

1、React简介

1.1、React概述

React 是用于构建用户界面的 javascript 库，具有声明式、组件化等特点。

1.2、MVC和MVVM模式

MVC（Model-View-Controller，模型-视图-控制器），Model指模型数据，View是显示的界面，Controller是控制层，控制层用于接收到用户的操作，然后进行一系列的处理后，发送给Model，接收到Model的响应后再交给View视图层。

MVVM（Model-View-ViewModel，模型-视图-视图模型），Model指模型数据，View是指浏览器渲染的网页，ViewMode是Model和View的桥梁，称为视图模型，由ViewModel完成数据的绑定。

在Vue中，JS对象就是Model，HTML标签就是View，Vue实例就是ViewModel。

2、React环境搭建

2.1、使用webpack搭建React开发环境

参考博客：https://blog.csdn.net/p445098355/article/details/104517094

2.2、使用create-react-app脚手架

安装脚手架

cnpm i -g create-react-app

创建项目

create-react-app  项目名称

3、JSX语法

jsx 全程是 javascript XML ，是一个 JavaScript 的语法扩展。jsx 要按照 xml 的编写规范，即：

• 最外层只能有一个根标记；
• 每个标记都必须要有闭合标签；

在 jsx 中可以使用 {...} 来编写 javascript 表达式。

4、React组件

4.1、函数组件

使用构造函数声明的组件被称为函数组件，因其内部没有 state 属性，所以又被称为无状态组件，代码如下：

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
    return (
        <div>
            函数组件
        </div>
    )
}

ReactDOM.render(<App />,document.getElementById('root'));

可以通过 props 属性获取到组件标签上定义的属性值，例如：

import React from 'react';
import ReactDOM from 'react-dom';

const App = (props) => {
    return (
        <div>
            函数组件，props值： {props.name}
        </div>
    )
}

ReactDOM.render(<App name="Tom" />,document.getElementById('root'));

4.2、类组件

使用 class 关键字创建的组件，称为类组件，因其内部可以有 state 属性，又被称为有状态组件，代码如下：

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    render() {
        return (
            <div>
                类组件
            </div>
        )
    }
}

ReactDOM.render(<App name="Tom" />,document.getElementById('root'));

在使用类组件的标签时，标签上定义的属性都会通过类组件的构造函数，传递到组件内部，然后在组件内容使用 this.props 获取到外界的传值，代码如下：

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {

    //构造函数
    constructor(props){
        super(props)
        console.log(props)
    }

    render() {
        return (
            <div>
                类组件，props值： {this.props.name}
            </div>
        )
    }
}

ReactDOM.render(<App name="Tom" />,document.getElementById('root'));

每个类组件都有自己独享的内部状态，即 state 属性。如果要操作 state 必须要使用 setState() 函数，该函数是一个异步函数，对 state 修改后，会再次调用 render() 函数重新渲染页面。