初始react和使用——事件处理、样式处理和组件

一、react官网

1、官网下载

官网分别有中英文两种：

中文官网：React 官方中文文档 – 用于构建用户界面的 JavaScript 库

英文官网：https://reactjs.org/

 2、react简介

react是用于构建用户界面的JavaScript库，起源于Facebook的内部项目

由于react的设计思想十分独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用它，认为它可能是将来web开发的主流工具。

react的好处：

  • 声明式设计: React使创建交互式UI变得轻而易举。为你应用的每一个状态
    设计简洁的视图,当数据变动时React能高效更新并渲染合适的组件
  • 组件化:构建管理自身状态的封装组件,然后对其组合以构成夏杂的UI。
  • 高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。
  • 灵活:无论你现在使用什么技术栈，在无需重写现有代码的前提下,通过引React来开发新功能。

注：在学习react之间我们所需要掌握的js知识有：es6语法、this发的指向、面向对象【原型、原型链、class类、继承】、模块化、柯里化函数等一些基础的js

3、需使用的JavaScript库

使用方法：

第一种：使用npm安装库

方法二：直接进行引入链接即可

需要值得注意的是建议是用18版本以前的版本，因为18以后的版本语法有一定变化。 

二、使用react

1、创建对象

创建虚拟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>
</head>
<body>
    <!-- 根标签 -->
    <div id="app"></div>

<!-- 引入的顺序不能乱 -1-引入react的核心库-->
    <script src="./js/react.development.js"></script>
    <!-- 引用react-dom，用于支持react操作DOM -->
    <script src="./js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx语法转换成js语法 -->
    <!-- <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> -->
  <!-- <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> -->
    <script src="./js/babel.min.js"></script>

    <script type="text/babel"> 
        /*
        vue：在html标签面写js
        react:大部分在js中写标签
        */

        // 第一个react
        console.log(ReactDOM);
        // 参数一：标签内容
        const VDOM=<div>
            <h1>HELLO WORLD</h1>
            <h2>HELLO WORLD</h2>
            </div>
        // 参数二：
        // ReactDOM.render(
        //     VDOM,
        //         document.getElementById('app')
            
        // );
        // react中是需要把单标签进行闭合，不然会出现报错
        ReactDOM.render(
            <div>
                {/* 单行注释的写法*/}
                {
                    // 
                }
                <h1>2333</h1>
                <h2>test333</h2>
                <input type="text"/>
                </div>,
                document.getElementById('app')
        );

    </script>




</body>
</html>

（1）jsx语法：全称JavaScript XML。是一种JavaScript的语法扩展，运用于react架构中，其格式比较像是模板语言，但事实上完全是在JavaScript内部实现的  。元素是其构成react应用的最小单位，jsx就是用来声明react当中的元素，react使用jsx来描述用户界面。

（2）插值符号：{}

插值符号内可以写的内容：

1、表达式

2、数组

3、字符串

4、即时函数

5、布尔值

6、三目表达式

（3）js语句和js表达式

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

js语句：

 2、样式处理

这里我不知道该如何组织我的语言咯，我就简单的说一下哈，剩下的自己理解哈哈哈~~~原谅我这小学语言水平组织能力

第一种方式：

样式放在head标签中写，和html+css写样式一样的，但不同在于引用样式的时候采用className属性进行引用。

第二种方式：

样式是在script中写以对象的形式，在引用时直接使用style={对象名}

另外一种我觉得差别不大，就和json一样，调用时采用对象.属性名

直接上代码哈哈：

<!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>2-样式处理</title>
    <style>
        .con{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="app">   </div>
        <script src="./js/react.development.js"></script>
        <script src="./js/react-dom.development.js"></script>
        <script src="./js/babel.min.js"></script>

        <script type="text/babel">
        const title=<h2>我是标签内容</h2>
        const arr=['大胡子','小胡须','佩奇',"浩浩"]

        const person={
            name:'雨哥',
            age:20,
            house:'false',
            car:'false',
            wife:'false'
        }
        // 样式处理：
        const sty={
           backgroundColor:"#f90",
        }
        const style1={
            bgc1:{backgroundColor:"#f90",},
            bgc2:{backgroundColor:"#90f",}
        }
        const element=<div className='con'>
            <h1 className='col'>`hello react`</h1>
            {
 /* <h2 style={background-color:red}>`hello react`</h2>*/
            }
            <h2 style={sty}>`hello react`</h2>
            {/*外面那个{}是插值*/}
            <h2 style={{"background-color":"red"}}>`hello react`</h2>
            <h2 style={style1.bgc2}>hello react22</h2>

            </div>
            ReactDOM.render(element,document.getElementById("app"))
</script>
</body>
</html>

3、事件处理

react元素的事件处理和DOM元素类似，知识在语法上有所不同：

  • react事件绑定属性的命名采用驼峰式写法，而不是小写
  • 如果采用jsx语法你需要传入一个函数作为事件处理函数，而不是一个字符串（DOM元素的写法）
  <script type="text/babel">
        // obj.onclick=function(){

        // }
        // function fn(){}
        // function handleClick(a,b,c){
        function handleClick(a){
        // alert(666)
        // alert(a)
        // console.log(a);
        // console.log(b);
        // console.log(c);
        console.log(this);
        /*
            参数的n+1是属于事件对象event
        */
        }
        function handleKeyDown(){
        // console.log(11);
        console.log(this);
        }

        // obj.onclick=function(event){}
// function fn(){}
// obj.addEventListener("click",fn)
        let element=(
            <div>
                {/*react事件处理*/}
                <input 
                type="button" 
                value="点击事件1" 
                onClick={handleClick}/>
                <input 
                type="button" 
                value="点击事件2" 
                onClick={function handleClick(){
                    alert(888)
                }}
                />
                <input 
                type="button" 
                value="点击事件3" 
                onClick={()=>{
                    alert(999)
                }}
                />
                <input 
                type="text" 
               
               onKeyDown={handleKeyDown}
                />
                <input 
                type="button" 
               value="传参"
               onClick={handleClick.bind(null,"参数一","参数二")}
            //    onClick={handleClick.bind(null)}
                />
                {/*babel开启严格模式，函数的指向为undefined*/}
                <input type="button"
                value="this"
                onClick={handleClick.bind(this)}/>
                </div>
        )
        // call,apply,bind()

        ReactDOM.render(element,document.getElementById('app'))
</script>
</body>

三、组件及三大属性

组件的核心属性：state、props、prop-types、refs

state：React把组件看成是一个状态机(State Machines) 通过与用户的交互，实现不同状态，然后渲染ul,让用户界面和数据保持一致。React里，只需更新组件的 state，然后根据新的state重新渲染用户界面(不要操作DOM)

props:通过标签属性从组件外向组件内传递变化的数据,每个组件对象都会有props,组件标签的所有属性都保存在props中


prop-types:对props中的属性值进行类型限制和必要性限制

refs:用来绑定到render()输出的任何组件上。
当组件插入到DOM后,ref属性添加—个组件的引用于到this.refs

setState:设定状态

在开始上代码之前我们来简单回顾一下在JavaScript中ES5和ES6的面向对象

1、复习ES5/ES6

 还有一个是关于继承的问题（es6）：

2、组件的使用

关于组件的使用有三种写法：

  • 函数式写法
  • 双标签
  • 单标签

组件的使用原理在于把各个代码块单独进行抽出，最终进行挂载；组件又分为有状态和无状态两种。

<!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>组件</title>
</head>
<body>
    <!-- <div>
        <ul>
            <li></li>
        </ul>
    </div> -->
    <div id="app"></div>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">

// 把各个代码块单独进行抽出，最终进行挂载

// 组件：无状态组件
function Sect(){
    return <section>我是内容部分</section>
}

// 组件：有状态组件
class Foot extends React.Component{
    // 构造器
    constructor(){
        super();
    }
// 钩子函数、生命周期：

    // 渲染：
    render(){
      return  <footer>我是底部内容</footer>
    }
}

let element=<div>
        <h1>hello world!</h1>
        <header>我是头部内容</header>
        {/* <section>我是内容部分</section> */}
        {/*<footer>我是底部内容</footer>*/}

        {/*函数式写法*/}
        {/*Sect()*/}

        {/*组件：双标签组件*/}
        {/*<Sect></Sect>*/}

        {/*单标签写法：*/}
        {<Sect/>}
        {/*<Sect/>*/}
        {/*<Sect/>*/}
        {/*<Sect/>*/}
        <Foot/>
        </div>
ReactDOM.render(
        element,
        document.getElementById('app')
)

// console.log(ReactDOM);

    </script>
</body>
</html>

3、如何改变值

如果直接通过赋值的情况下是无法改变的，也就是说无状态是没办法进行值的修改

<!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>组件-改变值</title>
</head>
<body>
    <div id="app"></div>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">
function Sect(){
    return <section>我是内容部分</section>
}
let str=`回`
let element=<div>
        <h1>hello world!</h1>
        <header>今年{str}家过年吗？</header>
        <Foot/>
        </div>

        // 把回改为不回-无状态是不能该的
        setTimeout(() => {
            str=`不回`
            console.log(str);
        }, 2000);

ReactDOM.render(
        element,
        document.getElementById('app')
)

// console.log(ReactDOM);

    </script>
</body>
</html>

所以需要通过有状态组件来改变值：这里所要使用的属性就是state和setstate两个，因为setstate是用来改变state值的属性。

<!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>组件-改变值</title>
</head>
<body>
    <div id="app"></div>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">

// 组件：有状态组件
class Foot extends React.Component{

    constructor(){
        super();
        // console.log(this);
        // 状态仓库
        this.state={
            data:`不回`,
            data1:"马上要回家过年了！！！"
        }
        setTimeout(() => {
            console.log(666);
            // str='不回' 
            // this.state.data=`不回` //此方法行不通的
            // 改变state的值使用this.setstate
            this.setState({data:`回`})
            
        }, 2000);
    }

    // 渲染：
    render(){
        // 测试能否取到state的值
        console.log(this.state);
    //   return  <footer><b>今年{this.state.data}家过年</b></footer>
    // 测试data1
    return (
        <div>
            <b>今年{this.state.data}家过年</b>
            {this.state.data1}
            </div>
    )
    }
}

let str=`回`
let element=<div>
        <h1>今年{str}家过年吗？</h1>
        <header>hello world！</header>
        <Foot/>
        </div>

        /*
        直接通过重新赋值的情况下，无法改变
        */
        // 把回改为不回-无状态是不能该的
        
ReactDOM.render(
        element,
        document.getElementById('app')
)

// 改值方法如同下面一样
// let json={
//     data:"123"
// }
// json.data="456"
// console.log(ReactDOM);

    </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>组件-改变值</title>
</head>
<body>
    <div id="app"></div>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">
const sty={
    backgroundColor:"pink",
    // 两种形式：不加引号不写单位，或者加引号加单位

    width:"500px",
    height:200,
}

class Foot extends React.Component{
    constructor(){
        super();
        // console.log(this.handleChange());
    }

    state={
           str:"有",
           str1:false

    }
    // 如何改变原型中this的指向问题：
    // 1.通过绑定bind改变，点击事件中

handleChange(){
    //用bind改变this的指向，使handlechange的this指向foot 
    console.log("handlechange");
    // 看一下这里的this指向谁--undefined
    //在jsx语法中，由于babel开启严格模式，函数的this指向undefined;
    // console.log(this,`111`);
    let {str1}=this.state
    // this.setState({str:"没有",str1:true})
    this.setState({str1:!str1})

}
    // 渲染：
    render(){
// onClick={handleChange}
        // console.log(this.handleChange());
        return (
        <div style={sty}>
            <h1 
            onClick={this.handleChange.bind(this)}
            style={{backgroundColor:"#46B400"}} >你现在有没有女朋友？ {this.state.str}</h1>
            <b
            style={{backgroundColor:"#46B406"}}
            onClick={this.handleChange.bind(this)}>
            你现在有没有女朋友？ {this.state.str1?"true":"false"}</b>

            </div>
    )
    }
}
        
ReactDOM.render(
       <Foot/>,
        document.getElementById('app')
)



    </script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/97278.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【【STM32分析IO该设置什么模式的问题】】

【【STM32分析IO该设置什么模式的问题】】

STM32分析IO该设置什么模式的问题 我们分析而言 我们对于PA0 的设计就从此而来 对于边沿触发的选择我们已经有所了解了 我们下拉&#xff0c;但是当我们摁下开关的时候 从0到1 导通了 所以这个是下拉 上升沿触发 而对于KEY0 我们摁下是使得电路从原来悬空高阻态到地就是0 所以…
阅读更多...
WordPress（3）会员插件安装

WordPress（3）会员插件安装

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、服务器中上传插件二、使用步骤1.启动插件前言 提示：会员插件的安装不能在网站后台插件中心中直接安装原因我还没有排查 原因：会导致网站停止运行 一、服务器中上传插件 二、使用步骤 …
阅读更多...
Servlet的使用（JavaEE初阶系列17）

Servlet的使用（JavaEE初阶系列17）

目录 前言&#xff1a; 1.Servlet API的使用 1.1HttpServlet 1.2HttpServletRequest 1.3HttpServletResponse 2.表白墙的更新 2.1表白墙存在的问题 2.2前后端交互接口 2.3环境准备 2.4代码的编写 2.5数据的持久化 2.5.1引入JDBC依赖 2.5.2创建数据库 2.5.3编写数…
阅读更多...
根据身高重建队列【贪心算法】

根据身高重建队列【贪心算法】

根据身高重建队列 假设有打乱顺序的一群人站成一个队列&#xff0c;数组 people 表示队列中一些人的属性&#xff08;不一定按顺序&#xff09;。每个 people[i] [hi, ki] 表示第 i 个人的身高为 hi &#xff0c;前面 正好 有 ki 个身高大于或等于 hi 的人。 请你重新构造并返…
阅读更多...
设计模式的使用——模板方法模式+动态代理模式

设计模式的使用——模板方法模式+动态代理模式

一、需求介绍 现有自己写的的一套审批流程逻辑&#xff0c;由于代码重构&#xff0c;需要把以前的很多业务加上审批的功能&#xff0c;再执行完审批与原有业务之后&#xff0c;生成一个任务&#xff0c;然后再统一处理一个任务&#xff08;本来是通过数据库作业去处理的&#x…
阅读更多...
项目开发尺寸像素问题

项目开发尺寸像素问题

一般来说 项目开发开始会固定页面尺寸 一般都是1920x1080像素 那这样开发是最简单的我们直接用设计图的像素来开发就行 不用管有什么滚动条 一般浏览器都会有边框什么的 所以会出现滚动条 当我们全屏状态下其实才是我们想要页面结果 如果我们想没有滚动条开发 首先我们要知道…
阅读更多...
rke安装k8s

rke安装k8s

1、修改集群中各物理机主机名hostname文件 # 查看 cat /etc/hostname # 命令修改 hostnamectl set-hostname k8s-master2、实现主机名与ip地址解析 # 查看cat /etc/hosts # 修改 vi /etc/hosts3、配置ip_forward过滤机制 # 修改 vi /etc/sysctl.conf net.ipv4.ip_forward1…
阅读更多...
使用element-ui中的el-table回显已选中数据时toggleRowSelection报错

使用element-ui中的el-table回显已选中数据时toggleRowSelection报错

最近在写一个后台&#xff0c;需要在表格中多选&#xff0c;然后点击编辑按钮的时候&#xff0c;需要回显已经选中的表单项 <el-table v-loading"loading" :data"discountList" :row-key"(row) > row.id" refmultipleTable selection-cha…
阅读更多...
【pyqt5界面化工具开发-11】界面化显示检测信息

【pyqt5界面化工具开发-11】界面化显示检测信息

目录 0x00 前言&#xff1a; 一、布局的设置 二、消息的显示 0x00 前言&#xff1a; 我们在10讲的基础上&#xff0c;需要将其输出到界面上 思路&#xff1a; 1、消息的传递 2、布局的设置 先考虑好消息的传递&#xff0c;再来完善布局 其实先完善布局&#xff0c;再来设置消…
阅读更多...
树多选搜索查询，搜索后选中状态仍保留

树多选搜索查询，搜索后选中状态仍保留

<template><div class"half-transfer"><div class"el-transfer-panel"><div><el-checkbox v-model"selectAll" change"handleSelectAll">全部</el-checkbox></div><el-input v-model&qu…
阅读更多...
Breakpad交叉编译aarch64

Breakpad交叉编译aarch64

原本是在mac os上编译的&#xff0c;但是会出现一些问题&#xff0c;因此还是开了台linux容器进行编译&#xff0c;本文可结合之前的linux下编译breakpad共同查看。 Linux下Breakpad编译_Edward.W的博客-CSDN博客https://blog.csdn.net/u013379032/article/details/130754480?…
阅读更多...
北京985学校，交叉学科考英一数三408

北京985学校，交叉学科考英一数三408

北京师范大学(B) 考研难度&#xff08;☆☆☆&#xff09; 内容&#xff1a;23考情概况&#xff08;拟录取和复试分析&#xff09;、院校概况、23专业目录、23复试详情、各专业考情分析、各科目考情分析。 正文1096字&#xff0c;预计阅读&#xff1a;3分钟 2023考情概况 北…
阅读更多...
Gradio使用介绍

Gradio使用介绍

与他人分享你的机器学习模型、API或数据科学工作流的最佳方式之一&#xff0c;就是创建一个交互式应用程序&#xff0c;让用户或同事可以在他们的浏览器中尝试演示,Gradio是创建提供了用非常方便的方式快速创建一个前端交互应用&#xff0c;那如何使用Gradio呢&#xff1f;因为…
阅读更多...
OLED透明屏显示技术：未来显示科技的领航者

OLED透明屏显示技术：未来显示科技的领航者

OLED透明屏显示技术是一种创新性的显示技术&#xff0c;它的特殊性质使其成为未来显示科技的领航者。 OLED透明屏具有高对比度、快速响应时间、广视角和低功耗等优势&#xff0c;同时&#xff0c;其透明度、柔性和薄型设计使其成为创新设计的理想选择。 本文将深入探讨OLED透…
阅读更多...
YII项目在Docker中运行缓慢

YII项目在Docker中运行缓慢

缓慢问题分析 请求YII的api时间请求原生查询时间win10 上运行docker上的php api异常慢ubuntu 中拉代码git报错 请求YII的api时间 请求原生查询时间 win10 上运行docker上的php api异常慢 链接阿里数据的 入口直接返回的 网上有说是docker的dns解析慢&#xff1b; 也有说是…
阅读更多...
【报错记录】疯狂踩坑之RockyLinux创建Raid1镜像分区，Raid分区在重启后消失了！外加华硕主板使用Raid模式后，硬盘在系统中无法找到问题

【报错记录】疯狂踩坑之RockyLinux创建Raid1镜像分区，Raid分区在重启后消失了！外加华硕主板使用Raid模式后，硬盘在系统中无法找到问题

前言 为了摆脱对于专业NAS的依赖&#xff0c;我决定专门使用一台Linux服务器安装NAS程序的方式实现NAS功能&#xff0c;这里就需要用到Raid功能&#xff0c;由于目前我只有3块SSD&#xff08;256G500G500G&#xff09;&#xff0c;在ChatGPT的推荐下还是使用一个256G系统盘2块…
阅读更多...
等保测评各个级别的详细内容

等保测评各个级别的详细内容

等保测评是指信息系统安全等级保护测评&#xff0c;是我国信息安全领域中的一项重要工作。根据国家标准《信息系统安全等级保护基本要求》(GB/T 22239-2008)和《信息系统安全等级保护测评技术要求》(GB/T 25070-2010)。 等保测评分为五个级别&#xff0c;分别是&#xff1a;一级…
阅读更多...
LLM推理部署（一）：LLM七种推理服务框架总结

LLM推理部署（一）：LLM七种推理服务框架总结

自从ChatGPT发布以来&#xff0c;国内外的开源大模型如雨后春笋般成长&#xff0c;但是对于很多企业和个人从头训练预训练模型不太现实&#xff0c;即使微调开源大模型也捉襟见肘&#xff0c;那么直接部署这些开源大模型服务于企业业务将会有很大的前景&#xff0c;本文将介绍七…
阅读更多...
WebGPT VS WebGPU

WebGPT VS WebGPU

推荐&#xff1a;使用 NSDT编辑器 快速搭建3D应用场景 随着WebGPU的引入&#xff0c;Web开发发生了有趣的转变&#xff0c;WebGPU是一种新的API&#xff0c;允许Web应用程序直接访问设备的图形处理单元&#xff08;GPU&#xff09;。这种发展意义重大&#xff0c;因为 GPU 擅长…
阅读更多...
浅析token

浅析token

上一章节我们学习了cookie和session机制&#xff0c;但是他们都有一些缺点&#xff0c;所有这次我们来了解一个机制---token。 一、cookie和session的缺点 cookie信息存储在客户端浏览器上&#xff0c;安全性较低&#xff0c;所以浏览器加入了一些限制确保cookie不会被恶意使用…
阅读更多...
最新文章

Copyright @ 2022~2023