react语法基础

# 前言

官网地址：https://reactjs.org/

中文官网：http://doc.react-china.org/ 【弃用】

官方脚手架： https://www.npmjs.com/package/create-react-app

react.js 是目前全球下载量，使用量最大最多的前端框架，由facebook研发并开源，react的诞生才算是真正意义上定义了前端开发行业存在的必要性和重要性，阿里盛传语录：“流量为王时代，谁掌握了前端就掌控了市场”，13年以后国内大量后端工程师，测试工程师，运维工程师转向前端开发，开启了真正意义上的移动互联网，前端工程化飞速的发展。

因react在全球的地位，国内一线大厂均将react 设置为前端御用技术栈。

react的厉害之处在于很多前端行业的概念都是由他们的团队进行首次提出，有非常多的概念在当时都是十分超前甚至是空前的。

react 首次提出了 数据响应式更新概念，首次提出了虚拟dom概念，首次提出了最小粒度更新（diff算法）概念，首次提出了前端的组件化开发概念。

话外：vue和react的区别是？

vue是尤雨溪参照react 和angular 的优点进行设计的，

vue的响应式 diff算法组件化开发概念均来自react

vue的指令来自于angular的内部指令

# 1. react 项目搭建

底层环境：node^16.x 版本

vscode 插件：

全局安装官方脚手架

yarn global add  create-react-app 
或
npm i create-react-app -g

1
2
3

通过脚手架创建项目

create-react-app 项目名

启动项目

yarn start

# 2.项目目录结构

demo
├── public                    #项目静态资源文件
│   ├── favicon.ico           #页面title 图标           
│   ├── index.html            #唯一页面
│   ├── logo192.png           #打包为app 或小程序时使用的 应用图标
│   ├── logo512.png           #打包为app 或小程序时使用的 应用图标
│   ├── manifest.json         #打包为app 或小程序 需要的配置文件  
│   └── robots.txt           
├── src                       #项目源代码文件夹
│   ├── App.css               #根组件 css代码 【后续一般放到views目录中】
│   ├── App.js                #根组件 js代码   【后续一般放到views目录中】
│   ├── App.test.js           #根组件测试js代码【可删除】
│   ├── index.css             #全局css文件
│   ├── index.js              #项目入口文件 项目主模块
│   ├── logo.svg              #参与打包的静态资源文件【后续一般放到 assets文件夹中】
│   ├── reportWebVitals.js    #测试文件【可删除】
│   └── setupTests.js         #测试文件【可删除】
├── README.md                 #项目文档
├── package-lock.json         #版本锁定器
└── package.json              #三方包说明文档

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

按照vue项目进行前端项目工程化整理

react 开发需要一定的前端基础，react脚手架搭建的项目只是一个初步的项目架构，具体的目录结构三方包等都需要自己一一搭建。

删除所有的测试相关的代码，创建部分项目管理的目录，把根组件APP移动到views目录下

demo
├── .vscode
│   └── settings.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── assets
│   │   └── logo.svg
│   ├── components
│   ├── router
│   ├── store
│   ├── utils
│   ├── views
│   │   ├── App.css
│   │   └── App.js
│   ├── index.css
│   └── index.js
├── README.md
├── package-lock.json
└── package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

vscode 插件安装 -对react语法的代码补全工具

安装：ES7+ React/Redux/React-Native snip

vscode-设置-搜索: emmet ---打开settings.json 文件【jsx语法代码补全】

添加如下配置：

"emmet.includeLanguages": {
        "javascript": "javascriptreact"
    }

1
2
3

# 3.react js组件

组件的后缀名可以为 js 也可以为 jsx ，两者都可以，语法上没有任何变化和冲突

函数式组件 app.jsx

//导入组件样式
import  './App.css'

//暴露一个函数给主模块（入口文件 index.js）
export default function App(){
    let name = '张三';
    //返回一段html代码
    return (
        <p>
            我是根组件
            {name}
        </p>
    )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

类组件 app.jsx

import { Component } from 'react';
import './App.css'
export default class App extends Component {
    userName = "张三";
    state = {
        color: '#fff',
    }
	//借助render 函数 返回 html代码
    render() {
        return (
            <p style={{ color:this.state.color,fontSize:'30px' }}>{this.userName}</p>
        )
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 4.jsx 语法

jsx 语法可以在js中写html代码

jsx语法的诞生也意味着可以在html代码中混着写入数组方法循环判断等等js语句，这样大大减少了js本身的代码逻辑。

注意：jsx 语法中有的单词不能出现

class 用 className 代替 for 用htmlfor 代替【防止jsx把class解析成类的定义】

使用jsx 语法注意 js中已经用过的关键字谨慎使用

js中的表达式通过字符串模板括起来 {}


import { useState } from 'react';
import './App.css'


export default function App(){

    let [userList] = useState([
        {name:'张麻子',age:40,like:['吃饭','睡觉']},
        {name:'黄四郎',age:33,like:['吃饭','挣钱']},
        {name:'六爷',age:33,like:['吃凉粉','挣钱']},
    ])
    
    return (
      <div>
        {userList.map(item=>{
            return  (
                <div className='item'>
                    <p>姓名: {item.name}</p>
                    <p>年龄: {item.age }</p>
                    <p>爱好:   
                       {item.like.map(item1=>{
                        return <span>--{item1}--</span>
                       })}    
                    </p>
                </div>
            )
        })}
      </div>
    )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 5.函数式组件与类组件的异同

# 5.1 函数式组件特点

只负责接收 props，渲染 DOM

没有 state

返回了一个 React 元素

不能访问生命周期方法

不需要声明类：可以避免 extends 或 constructor 之类的代码，语法上更加简洁。

不会被实例化：因此不能直接传 ref（可以使用 React.forwardRef 包装后再传 ref）。

不需要显示声明 this 关键字：在 ES6 的类声明中往往需要将函数的 this 关键字绑定到当前作用域，而因为函数式声明的特性，我们不需要再强制绑定。

更好的性能表现：因为函数式组件中并不需要进行生命周期的管理与状态管理，因此React并不需要进行某些特定的检查或者内存分配，从而保证了更好地性能表现。

# 5.2 类组件特点

为了避免代码冗余，提高代码利用率，组件可以重复调用

组件的属性props是只读的，调用者可以传递参数到props对象中定义属性，调用者可以直接将属性作为组件内的属性或方法直接调用。往往是组件调用方调用组件时指定props定义属性，往往定值后就不改边了，注意组件调用方可赋值被调用方。

通过props的方式进行父子组件交互,通过传递一个新的props属性值使得子组件重新render，从而达到父子组件通讯。

{...this.props}可以传递属性集合，...为属性扩展符

组件必须返回了一个 React 元素

组件中state为私有属性，是可变的，一般在construct()中定义，使用方法：不要直接修改 state(状态)

修改子组件还有一种方式，通过 ref属性，表示为对组件真正实例引用，其实就是ReactDOM.render()返回的组件实例

# 5.3 相同点

接收值：都一样接收了一个只读的 props

返回值：都是返回了一个 React 元素

编辑

上次更新: 2022/07/12, 11:33:06

← Vue datav实现数据大屏 react函数式组件语法→