React基础讲解

2023-11-13

文章目录

前言
一、React是什么？
二、如何使用
基于自动化的集成环境模式 - create-react-app - 脚手架
总结

前言

今天我们一起来学习react的内容，简单的学习一下。

一、React是什么？

是一个用于构建用户界面的 JavaScript 库。

二、如何使用

1.基于浏览器的模式

React.js 提供 React.js 核心功能代码，如：虚拟 dom，组件

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

babel

babel-standalone.js：在浏览器中处理 JSX

react.development.js提供了核心代码
react-dom.development.js提供了与浏览器交互的Dom功能

代码如下：

<!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>
</head>
<body>
    <div id="root"></div>

    <script>


/* 
`react.development.js 提供了核心代码
react-dom.development.js提供了与浏览器交互的Dom功能


	基础格式
	
*/
        ReactDOM.render(
            "今天天气",
            document.querySelector("#root"),
            ()=>{
                console.log("渲染成功");
            }
        );
    </script>
</body>
</html>

2.利用react 创建视图

<!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>
</head>
<body>
    <div id="root"></div>

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

3.JSX

是一个基于 JavaScript + XML 的一个扩展语法

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

不可以和js语句一起使用
所有的标签名必须是小写
所有标签必须闭合，哪怕单标签

class 要写做 className
style 接收的是一个对象，并不是字符串
每次只能输出一个标签（或者说必须要有一个容器）
唯一父级唯一容器

JSX 使用注意事项

必须有,且只有一个顶层的包含元素 - React.Fragment
JSX 不是html，很多属性在编写时不一样
- className
- style
列表渲染时，必须有 key 值
在 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">
        /* 
         JSX ：javascript 和 xml的扩展语法
         */
        ReactDOM.render(
            <header>
                <h1> hello react</h1>
                <p>利用JSX来渲染</p>
            </header>,
            document.querySelector("#root"),
            () => {
                console.log("渲染成功");
            }
        );
    </script>
</body>

</html>

4.插值表达式

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

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

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

注意：分清楚表达式与语句的区别，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">

    // 各种数据的插值状态
        // let str = "天气" //原样输出
        // let str = 1; //原样输出
        // let str = false; //不输出
        // let str = undefined;//不输出
        // let str = null;//不输出
        // let str = ["内容1","内容2"];//去掉，原样输出
        let str ={

            name: "拜拜",
            age:18
        } //报错  要单独去找某个属性
        ReactDOM.render(
            <header>
                <h1>  {str.name}不错</h1>
                <p>利用JSX来渲染</p>
            </header>,
            document.querySelector("#root"),
            () => {
                console.log("渲染成功");
            }
        );
    </script>
</body>

</html>

5.条件输出

输出数据类型

字符串、数字：原样输出
布尔值、空、未定义会被忽略

列表渲染

数组
对象
扩展：虚拟 DOM （virtualDOM）和 diff

条件渲染

三元运算符
与或运算符

<!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>{true?"成立":"不成立"}</h1>
                <p>{false||"利用JSX来渲染"}</p>
                <div>{true&&"正确"}</div>
            </header>,
            document.querySelector("#root"),
            () => {
                console.log("渲染成功");
            }
        );
    </script>
</body>

</html>

6.列表循环

<!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",
            "ddd"
        ]
        
        function toData(){
            let arr=[];
            data.forEach(item=>{
                return 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 帮助我们更好的在本地预览应用，其实还有更多。

安装与使用

通过 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 <项目名称>

项目目录结构说明

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

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

命令脚本

create-react-app 同时也提供了其它一些命令来帮助我们进行开发

npm start

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

类式组件

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

代码示例

import React,{Component} from "react";
import './FriendList.css';
import data from './data';
import Dl from './dL'
export default class Friendlist extends Component {
    render(){
        return (
            <div className="friend-list">
              {
                Object.keys(data).map(item=>{
                    return (<Dl
                        name = {item}
                        value ={data[item]}
                    />)
                })
              }
            </div>
        )
    }
}

props 和 state

props 父组件传递过来的参数
state 组件自身状态
- setState
- 多个 setState 合并‘

import React,{Component} from "react";

export default class Dl extends Component {


    state ={
            isOpen:true
        }
    render() {
        let {title,list} = this.props.value;
        let {isOpen} = this.state;   
        return(
            <div className={"friend-group" +(isOpen ? "expanded":"")}>
                <dt onClick={
                    ()=>{
                        this.setState({isOpen:!isOpen})
                    }
                    
                    
                }>{title}</dt>
                {
                    list.map((item,index)=>{
                        return <dd key={index}>{item.name}</dd>
                    })
                }
            </div>
        )
    }
}

props 与 state 的区别

state 的主要作用是用于组件保存、控制、修改自己的可变状态，在组件内部进行初始化，也可以在组件内部进行修改，但是组件外部不能修改组件的 state
props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件，它是外部传进来的配置参数，组件内部无法控制也无法修改
state 和 props 都可以决定组件的外观和显示状态。通常，props 做为不变数据或者初始化数据传递给组件，可变状态使用 state

组件通信与数据流

在 React.js 中，数据是从上自下流动（传递）的，也就是一个父组件可以把它的 state / props 通过 props 传递给它的子组件，但是子组件不能修改 props - React.js 是单向数据流，如果子组件需要修改父组件状态（数据），是通过回调函数方式来完成的。

父级向子级通信
子级向父级通信

数据代码

let datas = {
    family:{
        title:"家人",
        list:[
            {name: "爸爸"},
            {name: "妈妈"}
        ]
    },
    friend:{
        title:"朋友",
        list:[
            {name: "张三"},
            {name: "李四"},
            {name: "王五"},

        ]
    }
}

export default datas;

React 中的事件注意问题

大小写问题

onClick 必须用大写，否则会报错

<button onClick={()=>{
                this.setState({nub:nub+1})
              }}>长一岁</button>

this 问题

总结

今天我们主要学习了react 的一些基础内容，它包含了一些注意的地方，比如渲染时要包含的数据要用单{}去包裹。
所有标签必须闭合，哪怕单标签，这和我们之前学习的内容是一个很大的不同点。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

React