React

于 2023-08-02 17:13:07 发布
阅读量298 收藏
点赞数
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51444308/article/details/131227557
版权

一、react 入门

1.什么是react

react用于构建用户界面的 JavaScript 库
在这里插入图片描述

2.为什么要使用react

在这里插入图片描述

3.react的特点

在这里插入图片描述
在这里插入图片描述

4.react高效的原因

  • 使用虚拟DOM，不总是直接操作页面真实DOM。
  • DOM Diffing 算法，最小化页面重绘。

5.react的基本使用

1.需要引入的文件

babel.min.js

  • ES6 => ES5
  • jsx => js

react.development.js

  • react核心库

react-dom.development.js

  • react扩展库
  • 扩展react操作dom功能
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 引入react-dom用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 引入babel用于ES6转ES5，jsx 转 js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<body>
    <!--准备一个容器-->
    <div id="test"></div>

</body>
<!-- 注意这里一定要添加babel，表示这里写的是jsx，用babel翻译为js-->
<script type="text/babel">
    // 1.创建虚拟DOM
    // 这里不要用引号，因为他不是字符串
    const VDOM = <h1>Hello,React</h1>
    // 2.渲染虚拟DOM到页面
    //             虚拟DOM，容器
    ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</html>

2.为什么要使用jsx

为了解决js中写虚拟DOM麻烦的问题

3.虚拟DOM和真实DOM

虚拟DOM本质是js中的一个Object类型的对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 引入react-dom用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 引入babel用于ES6转ES5，jsx 转 js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<body>
    <!--准备一个容器-->
    <div id="test"></div>
    <div id="real"></div>
</body>
<!-- 注意这里一定要添加babel，表示这里写的是jsx，用babel翻译为js-->
<script type="text/babel">
    // 1.创建虚拟DOM
    // 这里不要用引号，因为他不是字符串
    const VDOM = (<h1>Hello,React</h1>)
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
    const TDOM = document.getElementById('real')
    console.log('真实DOM',TDOM)
    console.log('虚拟DOM',VDOM)
    debugger
    /*
        关于虚拟DOM:
            1.本质是Object类型的对象
            2.虚拟DOM比较轻，真实DOM比较重，因为虚拟DOM是React内部在用，无需真实DOM上那么多属性
            3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上
    */
</script>
</html>

4.jsx语法

jsx语法规则:

  • 1.定义虚拟DOM时，不要写引号
  • 2.标签中混入JS表达式时要用{}
  • 3.样式的类名指定不要用class,要用className
  • 4.内联样式要用style={{key:value,key:value}}的形式去写，如果变量时多个单词使用驼峰命名法例如fontSize
  • 5.虚拟DOM中只能有一个根标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        .title{
            background-color: antiquewhite;
        }
    </style>
</head>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 引入react-dom用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 引入babel用于ES6转ES5，jsx 转 js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<body>
    <!--准备一个容器-->
    <div id="test"></div>
</body>
<!-- 注意这里一定要添加babel，表示这里写的是jsx，用babel翻译为js-->
<script type="text/babel">
    const myId = 'atu'
    const myData = 'hello,atus'
    // 1.创建虚拟DOM
    const VDOM = (
        <div>
            <h2 className="title" id="{myId}">
                <span style={{color:'red',fontSize:'30px'}}>{myData}</span>    
            </h2>
            <input/>
        </div>
    )
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))

    /*
        jsx语法规则:
            1.定义虚拟DOM时，不要写引号
            2.标签中混入JS表达式时要用{}
            3.样式的类名指定不要用class,要用className
            4.内联样式要用style={{key:value,key:value}}的形式去写，如果变量时多个单词使用驼峰命名法例如fontSize
            5.虚拟DOM中只能有一个根标签
    */
</script>
</html>

列表数据的渲染

  • 只能使用数组类型的，不能用对象的
  • 每个标签一定要有一个唯一key
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        .title{
            background-color: antiquewhite;
        }
    </style>
</head>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 引入react-dom用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 引入babel用于ES6转ES5，jsx 转 js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<body>
    <!--准备一个容器-->
    <div id="test"></div>
</body>
<!-- 注意这里一定要添加babel，表示这里写的是jsx，用babel翻译为js-->
<script type="text/babel">
    // 模拟列表数据
    const data  = ['vue','react','angular']

    // 1.创建虚拟DOM
    const VDOM = (
        <div>
            <h1>
                前端框架    
            </h1>
            <ul>
                {
                    data.map((item,index)=>{
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
        </div>
    )
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</html>

5.模块与组件

  • 模块
    • 向外提供特定功能的js程序，一般为一个js文件
    • 随着业务逻辑增加，代码越来越杂，因而要拆分为模块
    • 作用就是复用js,简化js的编写，提高js运行效率
  • 组件
    • 用来实现局部功能效果的代码和资源的集合，html,css，js,image等
    • 界面的功能更复杂
    • 可以更高复用
  • 模块化
    • 当应用的js都以模块来编写，应用就是模块化的应用
  • 组件化
    • 当应用是以多组件的方式实现，这个应用就是一个组件化的应用

6.开发工具的安装

在chrome安装react开发者调试工具
在这里插入图片描述
在这里插入图片描述

二、react面向组件编程

1.组件基础理解和使用

  • 函数式组件
    执行了ReactDOM.render之后，
    1.react解析组件标签，找到了Demo组件
    2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转换为真实DOM，随后渲染真实DOM
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.5.0/umd/react.development.js"></script>
<!-- 引入react-dom用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.5.0/umd/react-dom.development.js"></script>
<!-- 引入babel用于ES6转ES5，jsx 转 js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<body>
    <!--准备一个容器-->
    <div id="test"></div>
</body>
<!-- 注意这里一定要添加babel，表示这里写的是jsx，用babel翻译为js-->
<script type="text/babel">
    // 1.创建函数式组件 函数名首字母必须大写
    function Demo(){
        // 此处的this是undefined,因为Babel编译后开启了严格模式
        console.log(this)
        return <h2>我是用函数定义的组件，我适用于简单组件的定义</h2>        
    }
    // 2.渲染组件到页面
    ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</html>

在这里插入图片描述

注意点：函数名一定要大写，小写的话他就去找html中的标签去了，而且标签一定要闭合

  • 类式组件

    执行了ReactDOM.render之后，
    1.react解析组件标签，找到了Demo组件
    2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法
    3.将render返回的虚拟DOM转换为真实DOM，渲染真实DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.5.0/umd/react.development.js"></script>
<!-- 引入react-dom用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.5.0/umd/react-dom.development.js"></script>
<!-- 引入babel用于ES6转ES5，jsx 转 js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<body>
    <!--准备一个容器-->
    <div id="test"></div>
</body>
<!-- 注意这里一定要添加babel，表示这里写的是jsx，用babel翻译为js-->
<script type="text/babel">
    // 1.创建类式组件
    class Demo extends React.Component{
        // render方法是放在Demo类的原型对象上，供实例使用
        render(){
            // render中的this是--Demo类的实例对象 也叫Demo组件实例对象
            console.log('render中的this',this)
            return <h2>我是用类定义的组件，我适用于复杂组件的定义</h2>
        }
    }
    // 2.渲染组件到页面
    ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</html>

在这里插入图片描述

有状态的是复杂组件，没有状态的是简单组件

2.组件实例的三大核心属性–state

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.5.0/umd/react.development.js"></script>
<!-- 引入react-dom用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.5.0/umd/react-dom.development.js"></script>
<!-- 引入babel用于ES6转ES5，jsx 转 js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<body>
    <!--准备一个容器-->
    <div id="test"></div>
</body>
<!-- 注意这里一定要添加babel，表示这里写的是jsx，用babel翻译为js-->
<script type="text/babel">
    // 1.创建类式组件
    class Demo extends React.Component{
        constructor(props){
            super(props)
            // 初始化状态
            this.state = {isHot:true,wind:'风'}
            // 解决changeWeather的this指向问题
            // this.changeWeather = this.changeWeather.bind(this)

        }
        render(){
            console.log(this.state)
            return <h2 onClick={this.changeWeather.bind(this)}>今天的天气很{this.state.isHot ? '炎热' : '不热'},没有{this.state.wind}</h2>
        }
        changeWeather(){
            // changeWeather在Demo类的原型对象上，供实例使用
            // 由于changeWeather是作为onclick的回调，所以this.changeWeather不是通过实例调用的，是直接调用
            // 类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
            // 需要使用.bind(this)
            console.log('点击成功',this)
            // 状态不可直接更改，需要借助一个内置的api去更改
            // this.state.isHot = !this.state.isHot
            this.setState({isHot:!this.state.isHot})

        }
    }
    
    // 2.渲染组件到页面
    ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</html>

3.state的简写方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.5.0/umd/react.development.js"></script>
<!-- 引入react-dom用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.5.0/umd/react-dom.development.js"></script>
<!-- 引入babel用于ES6转ES5，jsx 转 js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<body>
    <!--准备一个容器-->
    <div id="test"></div>
</body>
<!-- 注意这里一定要添加babel，表示这里写的是jsx，用babel翻译为js-->
<script type="text/babel">
    // 1.创建类式组件
    class Demo extends React.Component{
        // 初始化状态
        state = {isHot:true,wind:'风'}
        render(){
            return <h2 onClick={this.changeWeather}>今天的天气很{this.state.isHot ? '炎热' : '不热'},没有{this.state.wind}</h2>
        }
        // 自定义方法--要用赋值语句的形式+箭头函数
        changeWeather = ()=>{
            this.setState({isHot:!this.state.isHot})
        }
    }
    
    // 2.渲染组件到页面
    ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</html>

箭头函数的this指向他的外面一层

4.state总结

state是组件对象最重要的属性，组件被称为“状态机”，通过更新组件的state来更新对应页面显示，重新渲染组件

  • 组件中render方法中的this为组件实例对象
  • 组件自定义方法中this为undefined
    • 强制绑定this：通过函数对象的bind()
    • 箭头函数
  • state属性不能直接修改，需要使用setState()

5.组件实例的三大核心属性–props

简单使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.5.0/umd/react.development.js"></script>
<!-- 引入react-dom用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.5.0/umd/react-dom.development.js"></script>
<!-- 引入babel用于ES6转ES5，jsx 转 js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<body>
    <!--准备一个容器-->
    <div id="test"></div>
    <div id="test2"></div>
    <div id="test3"></div>
</body>
<!-- 注意这里一定要添加babel，表示这里写的是jsx，用babel翻译为js-->
<script type="text/babel">
    // 1.创建类式组件
    class Person extends React.Component{
        render(){
            console.log(this)
            const {name,sex,age} = this.props
            return (
                <ul>
                    <li>姓名:{name}</li>
                    <li>性别:{sex}</li>
                    <li>年龄:{age}</li>
                </ul>
            )
        }
    }
    
    // 2.渲染组件到页面
    ReactDOM.render(<Person name="atu" age="20" sex = "n"/>,document.getElementById('test'))
    ReactDOM.render(<Person name="w" age="20" sex = "n"/>,document.getElementById('test2'))
    ReactDOM.render(<Person name="p" age="20" sex = "n"/>,document.getElementById('test3'))
</script>
</html>

批量传递props

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.5.0/umd/react.development.js"></script>
<!-- 引入react-dom用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.5.0/umd/react-dom.development.js"></script>
<!-- 引入babel用于ES6转ES5，jsx 转 js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<body>
    <!--准备一个容器-->
    <div id="test"></div>
    <div id="test2"></div>
    <div id="test3"></div>
</body>
<!-- 注意这里一定要添加babel，表示这里写的是jsx，用babel翻译为js-->
<script type="text/babel">
    // 1.创建类式组件
    class Person extends React.Component{
        render(){
            console.log(this)
            const {name,sex,age} = this.props
            return (
                <ul>
                    <li>姓名:{name}</li>
                    <li>性别:{sex}</li>
                    <li>年龄:{age}</li>
                </ul>
            )
        }
    }
    
    // 2.渲染组件到页面
    ReactDOM.render(<Person name="atu" age="20" sex = "n"/>,document.getElementById('test'))
    ReactDOM.render(<Person name="w" age="20" sex = "n"/>,document.getElementById('test2'))
    const data = {name:'wawan',sex:'s',age:'23'}
    // ReactDOM.render(<Person name={data.name} age={data.age} sex = {data.sex}/>,document.getElementById('test3'))
    ReactDOM.render(<Person {...data}/>,document.getElementById('test3'))
</script>
</html>

对字符串进行限制

必要性限制
数据类型限制
默认值限制

霍志杰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
React简介、JSX语法详解
Darlingmi的博客
09-25 366
一、React简介 1、是一个JavaScript的库,目的是简化用户界面的开发。 2、是基于JSX(JavaScript Xml)语法,可以和html、js混合书写。 3、核心是组件,可以实现用户界面的模块化开发,代码的复用率高、可维护性好。 4、是Facebook公司开发,2013年发布。 二、React的开发过程 1、导入js文件 <script src="../js/react.development.js"></script> <!-- React的核心库 --&gt
在React中使用公共文件夹public，导入js （%PUBLIC_URL%）
Z_Wonderful的博客
06-19 2390
只有前缀public可以访问文件夹中的文件%PUBLIC_URL%。如果需要使用src或中的文件node_modules，则必须将其复制到那里以明确指定将此文件作为构建的一部分的意图。当运行npm run build，Create React App将替换%PUBLIC_URL%为正确的绝对路径，，项目也会正常工作。
react引入js文件
Sunraiseprice的博客
11-14 1735
react 引用本地js_react组件中如何引入一个外部的js文件？
weixin_33740988的博客
01-14 6206
推荐两种引入的方法，当然也可以自己编写一个JS类(ES6语法)实现动态插入JS到页面，然后在React项目引入。第一种：使用插件 react-load-script，如果没有安装可以使用 yarn add react-load-script 或者 npm install react-load-script，看你使用哪个包管理工具。然后你就可以像使用React组件那样插入JS，如下代码。import...
React——相关js库以及使用React开发者工具调试
weixin_52984349的博客
10-27 1027
React——相关js库以及使用React开发者工具调试
React中文文档.zip
04-23
React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。 很多人认为 React 是 MVC 中的 V（视图）。 我们创造 React 是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序。为了达到这...
React零基础自学手册.pdf
03-31
前端react零基础自学手册，包会，零基础自学手册，本人亲自编写的完整的，包会，非常详细，Lesson 1 - React.js 简介 Lesson 2 - 前端组件化（⼀）：从⼀个简单的例⼦讲起 Lesson 3 - 前端组件化（⼆）：优化 DOM ...
react-native-debugger
09-11
windows 0.12.1版本，兼容比较老的reactnative版本
react基本引入文件
08-04
里面有五个文件，如果用的是react15版本的就引入react.min.js，react-dom.min.js,browser.min.js;要是用react16版本的就引入react.production.min.js，react-dom.production.min.js,dom.min.js,browser.min.js三个文件
jquery和react的js文件
09-28
使用jquery和react框架需要导入的库，
react js基本文件.rar
08-24
开始学习react了，刚开始还没有使用脚手架搭建项目，想直接引入react核心文件来开始学习，上次备份至此。
React.js所需的三个js文件1--react.development.v17.js
11-24
React.js所需的三个js文件之1--react.development.v17.js，在head引入script即可使用。
React拆分窗格组件-React开发
05-27
React Split Pane Split-Pane React组件，可以垂直或水平嵌套或拆分！ 安装npm install react-split-pane＃，或者如果您使用纱线，则添加react-split-pane ##示例用法```j React Split Pane Split-Pane React组件，...
react-dom.development.js
11-01
babel.min.js下载，react相关的js包文件，助你快速入门react的hello world demo，省去找资料的时间，快人一步！
react基础
wlt_5079的博客
06-26 544
1.react基础 2.JSX语法 3.react渲染更新 4.react组件渲染
react项目所需的js文件：prop-types.js，react.development.js，react-dom.development.js，
M_SSY的博客
02-24 2398
https://unpkg.com/prop-types@15.6.2/prop-types.js https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js https://unpkg.com/babel-standalone@6.26.0/babel.min.js
React的基本使用&JSX的基本使用&React组件&事件处理State&setState&事件绑定this指向
fengzitaba的博客
08-05 1065
React的基本使用 React的安装 安装命令:npm i react react-dom react包是核心,提供创建元素,组件等功能 react-dom 提供DOM相关功能 React的使用 1.引入react和react-dom的两个js文件 <script src="./node_modules/react/umd/react.development.js"></script> <script src="./node_modules/react-dom/umd/rea
react versions
最新发布
06-08
React有多个版本，主要分为核心库（Core Library）和框架（React Framework），以及一些长期支持的次要版本。以下是React的一些重要版本： 1. **React 16.x**：这是第一个引入 Fiber 框架的版本，显著提高了性能和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霍志杰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值