[JavaScript知识库] React基础入门

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> React基础入门 -> 正文阅读

[JavaScript知识库]React基础入门

一.React 简介

1 .React 是什么？

一个用于构建用户界面的 JavaScript 库
中文手册：https://react.docschina.org/

2.官网

英文官网: https://reactjs.org/
中文官网: https://react.docschina.org/

3.介绍描述

用于动态构建用户界面的 JavaScript 库(只关注于视图)
由Facebook开源

二.声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。
以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

三.组件化

构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。
由于组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并保持状态与 DOM 分离。

四.React的特点

1.声明式编码
2.组件化编码
3.React Native 编写原生应用
4.高效（优秀的Diffing算法）

五.React高效的原因

1.使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
2.DOM Diffing算法, 最小化页面重绘。

六.如何使用 React

基于浏览器的模式

React.js 提供 React.js 核心功能代码，如：虚拟 dom，组件
- React.createElement(type,props,children);
ReactDOM 提供了与浏览器交互的 DOM 功能，如：dom 渲染
- ReactDOM.render(element, container[, callback])
  - element：要渲染的内容
  - container：要渲染的内容存放容器
  - callback：渲染后的回调函数

七.React基本使用

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

第一种使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        ReactDOM.render(
            React.createElement("h1",null,"哈哈哈"),
            document.querySelector("#root"),
            ()=>{
                console.log("渲染成功")
            }
        )
    </script>
</body>
</html>

第二种React创建视图

<script>
        let h1 = React.createElement("h1",null,"我是一个标题")
        let p = React.createElement("h1",null,"我是一个标签")
        let el = React.createElement(
            "header",
            {id:"header"},
            h1,
            p
        )
        ReactDOM.render(
            el,
            document.querySelector("#root"),
            ()=>{
                console.log("渲染成功")
            }
        )
    </script>

八.babel

babel-standalone.js：在浏览器中处理 JSX
https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js

九.JSX

什么是JSX?

全称: JavaScript XML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel">

        ReactDOM.render(
            <header>
                <h1>hello react</h1>
                <p>利用JSX来渲染</p>
            </header>,
            document.querySelector("#root"), () => {
                console.log("渲染成功");
            }
        );
    </script>
</body>

</html>

**注:** 它可以作为值使用,它并不是字符串,它也不是HTML, 它可以配合JavaScript 表达式一起使用

JSX的注意事项

JSX 基于javaScript 和 Xml 的扩展语法

可以作为值使用
它不是字符串
它不是html
它可以配合js 表达式一起使用
它不可以和Js语句一起使用
所有标签名必须小写
所有标签必须闭合哪怕单标签
class 要写作className
style 接收的是一个对象并不是字符串
每次只能输出一个标签

React为什么使用JSX?

JSX语法糖允许前端开发者使用我们最熟悉的类HTML标签语法来创建虚拟DOM在降低学习成本的同时，也提升了研发效率与研发体验。

插值表达式

在 JXS 中可以使用 {表达式} 嵌入表达式

表达式：产生值的一组代码的集合

变量
算术运算
函数调用
……

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel">
    // let data = "今天周一"   // 原样输出
    // let data = 1;    // 原样输出
    // let data = false    // 不输出
    // let data = undefined;    // 不输出
    // let data = null      // 不输出
    // let data = ["一","二","三"];     // 去掉, 原样输出
    let data = {
        name:"小明",
        age: 18
    }
        ReactDOM.render(
            <header>
                <h1>{data.name}</h1>
                <p>利用JSX来渲染</p>
            </header >,
            document.querySelector("#root"), () => {
                console.log("渲染成功");
            }
        );
    </script>
</body>

</html>

注意： 分清楚表达式与语句的区别，if、for、while 这些都是语句，JSX 不支持语句

条件输出

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel">

        // ? 类似  if...else
        // || 类似 if(!) 取反
        // && 类似 if()
        ReactDOM.render(
            <header>
                <h1>{false ? "成立" : "不成立"}</h1>
                <p>{true || "利用JSX来渲染"}</p>
                <div>{true && "正确"}</div>
            </header>,
            document.querySelector("#root"), () => {
                console.log("渲染成功");
            }
        );
    </script>
</body>

</html>

列表循环

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
</head>

<body>
    <div id="root">
        <!-- <ul v-for="item in arr">
            <li>{{item}}</li>
        </ul> -->
    </div>

    <script type="text/babel">

        let data = [
            "内容1",
            "内容2",
            "内容3"
        ]
        function toData() {
            let arr = [];
            data.forEach(item => {
                arr.push(<li>{item}</li>)
            });
            return arr;
        }
        // ReactDOM.render(
        //     <header>
        //         {toData()}
        //     </header>,
        //     document.querySelector("#root"), () => {
        //         console.log("渲染成功");
        //     }
        // );


        ReactDOM.render(
            <ul>
                {
                    data.map(item => {
                        return <li>{item}</li>
                    })
                }
            </ul>,
            document.querySelector("#root"), () => {
                console.log("渲染成功");
            }
        );
    </script>
</body>

</html>

十.基于自动化的集成环境模式 - create-react-app - 脚手架

介绍

通过前面 script 的方式虽然也能完成 React.js 的开发，但是有一个现在前端很重要的特性 - 模块化，无法使用。

Create React App 是一个使用 Node.js 编写的命令行工具，通过它可以帮助我们快速生成 React.js 项目，并内置了 Babel、Webpack 等工具帮助我们实现 ES6+ 解析、模块化解析打包，也就是通过它，我们可以使用模块化以及 ES6+ 等更新的一些特性。同时它还内置 ESLint 语法检测工具、Jest 单元测试工具。还有一个基于 Node.js 的 WebServer 帮助我们更好的在本地预览应用，其实还有更多。

这些都通过 Create React App 帮助我们安装并配置好了，开箱即用

安装与使用

通过 npm、yarn、npx 都可以

安装

npm

npm i -g create-react-app

yarn

yarn global add create-react-app

使用

安装完成以后，即可使用 create-react-app 命令

create-react-app <项目名称>

或者通过 npx 的方式

npx

npx create-react-app <项目名称>

运行命令以后，就会在运行命令所在目录下面创建一个以项目名称为名的目录

然后我们进入创建的项目

npm start
启动一个内置的本地 WebServer，根目录映射到 ‘./public’ 目录，默认端口：3000

npm run test
运行 Jest 测试

npm run build

打包应用（准备上线）

组件

对具有一定独立功能的数据与方法的封装，对外暴露接口，有利于代码功能的复用，且不用担心冲突问题。

函数式组件

函数的名称就是组件的名称
函数的返回值就是组件要渲染的内容

class类式组件

组件类必须继承 React.Component
组件类必须有 render 方法

创建一个FriendList.js组件

import React, { Component } from "react";
export default class FriendList extends Component {
  render() {
  	return (
		<div className="friend-list">
                <div className="friend-group">
                    <dt>家人</dt>
                    <dd>爸爸</dd>
                    <dd>妈妈</dd>
                </div>
                <div className="friend-group">
                    <dt>朋友</dt>
                    <dd>张三</dd>
                    <dd>李四</dd>
                    <dd>王五</dd>
                </div>
                <div className="friend-group">
                    <dt>客户</dt>
                    <dd>阿里</dd>
                    <dd>腾讯</dd>
                    <dd>头条</dd>
                </div>
            </div>
	);
  }
}

组件复用 - 数据抽取

为了提高组件的复用性，通常会把组件中的一些可变数据提取出来

let datas = {
    family: {
        title: '家人',
        list: [
            {name: '爸爸'},
            {name: '妈妈'}
        ]
    },
    friend: {
        title: '朋友',
        list: [
            {name: '张三'},
            {name: '李四'},
            {name: '王五'}
        ]
    },
    customer: {
        title: '客户',
        list: [
            {name: '阿里'},
            {name: '腾讯'},
            {name: '头条'}
        ]
    }
};