什巳

前端学习-React基础

一.React 概述

1.React 是什么？

React 是用于构建用户界面的 JavaScript 库，主要用来写 HTML 页面或者构建web应用

2.React 起源

由 FaceBook 在 2013 年开源的一个用于构建用户界面的 JavaScript 库。

二.React 特点

1.声明式编码

编码方式分为声明式和命令式两种，比如说：

声明式：每天上课都要带上电脑
命令式：带上电视，周一上课

命令式编码需要告诉浏览器怎么做，而声明式只需要告诉浏览器做什么就好了。

命令式编码特点：技术细节纯手写。需要告诉浏览器如何操作 DOM，以及如何激活事件。
声明式编码特点：技术细节黑盒化。在 React 中定义某个函数，无需直接接触 DOM 和事件系统。

2.不直接操作DOM

在 React 中我们不需要直接进行 DOM 操作，只需要通过 JSX 的语法完成 UI 的编写。原生 JS 操作 DOM 都是使用的 DOM-API，编写繁琐且执行效率低。而 React 避免了这些问题。

3.组件化思想

任何的页面都会被抽象成一棵组件树。树上的每一个节点，我们都可以开发出一个个独立可复用的小组件。

而在 React 中我们可以通过关键字 class 来定义一个组件，render 方法中返回的就是这个组件的 UI 视图。

4.一次学习、多段开发

React Native源自React，它是React在原生移动应用平台的衍生产物，支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSx，以及 CSS来开发移动应用，因此熟悉 Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

React VR 是一个用于创建在浏览器中运行的VR应用程序的框架。它将 WebGL和 WebVR 等现代 api 与 React 的声明能力结合在一起，产生可以通过各种设备消费的体验。利用网络技术和现有的 React 生态系统，ReactVR 旨在简化 360 体验的构建，并将VR内容的创造大众化。

三.React 脚本直引的使用

1.React 的安装

安装命令：npm i react react-dom

react 包是核心，提供创建元素、组件等功能
react-dom 包提供 DOM 相关功能

2.React 的使用

2.1 引入 react 和 react-dom 两个 js 文件

2.2 创建 React 元素

2.3 渲染 React 元素到页面中

3.常用方法说明

3.1 React.createElement(参数，参数，参数)

返回值：React 元素
第一个参数：要创建的 React 元素名称
第二个参数：该 React 元素的属性
第三个及其以后的参数：该 React 元素的子节点

3.2 ReactDOM.render()

第一个参数：要渲染的 React 元素
第二个参数：DOM对象，用于指定渲染到页面中的位置

四.React 脚手架工具的使用

1.脚手架工具的意义

脚手架时开发现代 Web 应用的必备。
充分利用 Webpack、Babel、ESLint 等工具辅助项目开发。
零配置，无需手动配置繁琐的工具即可使用。
关注业务，而不是工具配置

2.React 脚手架的使用

2.1 使用 React 脚手架初始化项目

初始化项目，命令：npx create-react-app my-app
启动项目，在项目根目录执行命令：npm start，如果安装了 yarn，可以执行 yarn start。

启动成功后，浏览器会自动跳到该页面：

2.2 在脚手架中使用 React

导入 react 和 react-dom 两个包。

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

调用 React.createElement() 方法创建 react 元素。
调用 ReactDOM.render() 方法渲染 react 元素到页面中。

五.React JSX的使用

1.JSX 的基本使用

1.1 createElement() 方法的问题

繁琐不简洁。
不直观，无法一眼看出所描述的结构。
不优雅，用户体验不爽。

1.2 JSX 简介

JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写 XML（HTML）格式的代码。

优势：声明式语法更加直观，与 HTML 结构相同，降低了学习成本、提升开发效率。

1.3 使用步骤

使用 JSX 语法创建 react 元素

// 使用 JSX 语法，创建 react 元素:
const title = Hello JSX

使用 ReactDOM.render() 方法渲染 react 元素到页面中

// 渲染创建好的 React 元素
ReactDOM.render(title, root)

1.4 注意点

React 元素的属性名使用驼峰命名法。
特殊属性名：class → className、for → htmlFor、tabindex → tabIndex。
没有子节点的 React 元素可以用 /> 结束。
推荐使用小括号包裹 JSX，从而避免 JS 中自动插入分号陷阱。

2.JSX 中使用 JavaScript 表达式

2.1 嵌入 JS 表达式

数据存储在 JS 中
语法：{ JavaScript表达式 }
注意：语法中是单大括号，不是双大括号！

const hello = 'Hello';
const dv = ({hello}, World!
);

2.2 注意点

单大括号中可以使用任意的 JavaScript 表达式
JSX 自身也可以是 JS 表达式
注意：JS 中的对象是一个例外，一般只会出现在 style 属性中
注意：不能在 {} 中出现语句（比如：if / for 等）

3.JSX 的条件渲染

场景：loading效果
条件渲染：根据条件渲染特定的 JSX 结构
可以使用 if / else 或 三元运算符 或 逻辑与运算符 来实现

const loadData = () => {
    if(isLoading){
        return Loading...;
    }
    return complete !;
}

const dv = (
    
        {loadData()}
    
);

4.JSX 的列表渲染

如果要渲染一组数据，应该使用数组的 map() 方法
注意：渲染列表时应该添加 key 属性，key 属性的值要保证唯一
原则：map() 遍历谁，就给谁添加 key 属性
注意：尽量避免使用索引号作为 key

const users = {
    {id: 1, name: '许世鹏'},
    {id: 2, name: '张鹏'},
    {id: 3, name: '邹泽鹏'}
};

const list = (
    
        {users.map(item => {item.name})}
    
);

5.JSX 的样式处理

5.1 行内样式 —— style


    JSX的样式处理

5.2 类名 —— className


    JSX的样式处理

样式写在 .css 文件中，引入直接 import 'css文件路径' 即可。

六.React 组件基础

1.React 组件介绍

组件是 React 的一等公民，使用 React 就是在用组件
组件表示页面中的部分功能
组合多个组件实现完整的页面功能
特点：可复用、独立、可组合

2.React 组件的两种创建方式

2.1 使用函数创建组件

函数组件：使用 JS 的函数（或箭头函数）创建的组件
约定1：函数名称必须以大写字母开头
约定2：函数组件必须有返回值，表示该组件的结构
如果返回值为 null，表示不渲染任何内容
渲染函数组件：用函数名作为组件标签名
组件标签可以是单标签也可以是双标签
组件名称必须以大写字母开头，React 据此区分组件和普通的 React 元素
使用函数名作为组件标签名

// 函数组件
function Hello{
    return (
        这是我的第一个函数组件！
    );
}
// 渲染组件
ReactDOM.render(, document.getElementById('root'));

2.2 使用类创建组件

类组件：使用 ES6 的 class 创建的组件
约定1：类名称也必须以大写字母开头
约定2：类组件应该继承 React.Component 父类，从而可以使用父类中提供的方法或属性
约定3：类组件必须提供 render() 方法
约定4：render() 方法必须有返回值，表示该组件的结构

class Hello extends React.Component {
    render() {
        return Hello Class;
    }
}
ReactDOM.render(, document.getElementById('root'));

2.3 抽离为独立 JS 文件

创建 Hello.js
在 Hello.js 导入 React
创建组件（函数或类）
在 Hello.js 中导出该组件
在 index.js 中导入 Hello 组件
渲染组件

import React from 'react';

class Hello extends React.Component {
    render() {
        return Hello Class;
    }
}
export default Hello;

3.React 事件处理

3.1 事件绑定

React 事件绑定语法与 DOM 事件语法相似
语法：on + 事件名称 = {事件处理程序}，比如：onClick={() => {}}
注意：React 事件采用驼峰命名法，比如：onMouseEnter、onFocus
在函数组件中绑定事件

import React from 'react';

class Hello extends React.Component {

    handleClick() {
        alert('Hello');
    }

    render() {
        return Hello Class;
    }
}
export default Hello;

3.2 事件对象

可以通过事件处理程序的参数获取到事件对象
React 中的事件对象叫做：合成事件（对象）
合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题

import React from 'react';

class Hello extends React.Component {

    handleClick(e) {
        //阻止浏览器的默认行为
        e.preventDefault();
        alert('Hello');
    }

    render() {
        return Hello Class;
    }
}
export default Hello;

4.有状态组件和无状态组件

函数组件又叫做无状态组件，类组件又叫做有状态组件
状态（state）即数据
函数组件没有自己的转态，只负责数据展示（静）
类组件有自己的转态，负责更新 UI，让页面 “动” 起来

5.组件中的 state 和 setState()

5.1 state 的基本使用

状态（state）即数据，是组件内部的私有数据，只能在组件内部使用
state 的值是对象，表示一个组件中可以有多个数据
通过 this.state 来获取状态

5.2 setState() 修改状态

状态是可变的
语法：this.setState({要修改的数据})
注意：不要直接修改 state 中的值，这是错误的！！！
setState() 作用：修改 state 和 更新 UI
思想：数据驱动视图

使用 state 来每秒增加一个斐波那契数列的值：

import React from "react";
import './index.css';

class HelloWorld extends React.Component {
    
    static defaultProps = {
        a: 0,
        b: 1
    }
    state = {
        list: [0, 1],
    };

    render() {
        return {this.state.list.join(', ')};
    }

    componentDidMount() {
        setInterval(() => {
            const [a, b] = this.state.list.slice(-2);
            this.setState({list: [...this.state.list, a + b]});
        }, 1000);
    }
}
export default HelloWorld;

6.事件绑定 this 指向

JSX 中掺杂过多 JS 逻辑代码，会显得非常混乱，推荐将逻辑抽离到单独的方法中，保证 JSX 结构清晰，但是分到方法中后，this 的值会变为 undefined，导致运行报错，因此我们希望 this 能够指向组件示例。

6.1 箭头函数

利用箭头函数自身不绑定 this 的特点
render() 方法中的 this 为组件实例，可以获取到 setState()

import React from 'react';

class Hello extends React.Component {

    state = {
        a: 0
    };

    onIncrement(){
        this.setState({a: this.state.a + 1});
        alert(this.state.a);
    }

    render() {
        return ;
    }
}
export default Hello;

6.2 Function.prototype.bind()

利用 ES5 中的 bind 方法，将事件处理程序中的 this 与组件实例绑定到一起

import React from 'react';

class Hello extends React.Component {

    state = {
        a: 0
    };

    onIncrement(){
        this.setState({a: this.state.a + 1});
        alert(this.state.a);
    }

    constructor(){
        super();
        this.onIncrement = this.onIncrement.bind(this);
    }

    render() {
        return ;
    }
}
export default Hello;

6.3 class 的实例方法

利用箭头函数形式的 class 实例方法
注意：该语法是实验性语法，但是，由于 babel 的存在可以直接使用

import React from 'react';

class Hello extends React.Component {

    state = {
        a: 0
    };

    onIncrement = () => {
        this.setState({a: this.state.a + 1});
        alert(this.state.a);
    }

    render() {
        return ;
    }
}
export default Hello;

7.表单处理

7.1 受控组件

HTML 中的表单元素是可输入的，也就是有自己的可变状态
而 React 中可变状态通常保存在 state 中，并且只能通过 setState() 方法来修改
React 将 state 与表单元素值 value 绑定到一起，由 state 的值来控制表单元素的值
受控组件：其值受到 React 控制的表单元素

使用步骤：

在 state 中添加一个状态，作为表单元素的 value 值（控制表单元素值的来源）
给表单元素绑定 change 事件，将表单元素的值设置为 state 的值（控制表单元素值的变化）

state = {txt: ''};

 this.setState({ txt: e.target.value})}/>

多表单元素优化步骤：

给表单元素添加 name 属性，名称与 state 相同
根据表单元素类型获取对应值
在 change 事件处理程序中通过 [name] 来修改对应的 state

//根据表单元素类型获取值
const value = target.type === 'checkbox'? target.checked: target.value;

//根据 name 设置对应 state
this.setState({
    [name]: value
});

7.2 非受控组件（DOM方式）