React

最新推荐文章于 2023-05-20 06:27:42 发布
最新推荐文章于 2023-05-20 06:27:42 发布
阅读量262 收藏
点赞数
分类专栏： react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smile_team/article/details/109728394
版权
本文全面介绍了React框架，从其声明式编码、组件化特性，到虚拟DOM、JSX语法，再到模块化和组件化的概念。详细阐述了React组件的state、props和refs，以及组件的生命周期和DOM Diff算法。此外，还涵盖了React应用的创建、评论管理和搜索功能，以及如何使用ajax。最后，文章探讨了React Router4和react-ui，以及Redux的状态管理，并介绍了纯函数和高阶函数在React开发中的应用。
摘要由CSDN通过智能技术生成

React

概述

特点

  • Declarative(声明式编码)
  • Component-Based(组件化编码)
  • Learn Once, Write Anywhere(支持客户端与服务器渲染)
  • 高效
  • 单向数据流

基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本使用</title>
</head>
<body>
    <div id="test"></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">
        //创建虚拟DOM元素对象
        var vDom = <h1>111</h1>
        //将虚拟DOM渲染到页面真实DOM容器中
        ReactDOM.render(vDom,document.getElementById('test'))
    </script>
</body>
</html>

在这里插入图片描述

相关js库

  • react.js: React的核心库
  • react-dom.js: 提供操作DOM的react扩展库
  • babel.min.js: 解析JSX语法代码转为纯JS语法代码的库
虚拟DOM
  • React提供了一些API来创建一种 特别 的一般js对象
    • var element = React.createElement(‘h1’, {id:‘myTitle’},‘hello’)
    • 上面创建的就是一个简单的虚拟DOM对象
  • 虚拟DOM对象最终都会被React转换为真实的DOM
  • 编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面
JSX

  • react定义的一种类似于XML的JS扩展语法: XML+JS

  • 作用: 用来创建react虚拟DOM(元素)对象

    • var ele =

      Hello JSX!

    • 注意1: 它不是字符串, 也不是HTML/XML标签
    • 注意2: 它最终产生的就是一个JS对象

  • 标签名任意: HTML标签或其它标签

  • 标签属性任意: HTML标签属性或其它

  • 基本语法规则

  • 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析

  • 遇到以 { 开头的代码，以JS语法解析: 标签中的js代码必须用{ }包含

  • babel.js的作用

  • 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行

  • 只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理

 <h1>jsx练习</h1>
    <div id="test"></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 names = ['111','222','333','444']
        //创建虚拟DOM元素对象
        const ul = (
            <ul>
                {
                names.map((name,index) => <li key={index}>{name}</li>)
                }
            </ul>
        )
        //将虚拟DOM渲染到页面真实DOM容器中
        ReactDOM.render(ul,document.getElementById('test'))
    </script>

在这里插入图片描述

模块与组件和模块化与组件化的理解

模块
  • 理解- 向外提供特定功能的js程序, 一般就是一个js文件
  • 作用 - 复用js, 简化js的编写, 提高js运行效率
组件
  • 理解 - 用来实现特定(局部)功能效果的代码集合(html/css/js)
  • 作用 - 复用编码, 简化项目编码, 提高运行效率
模块化

当应用的js都以模块来编写的，这个应用就是一个模块化的应用

组件化

当应用是以多组件的方式实现，这个应用就是一个组件化的应用

React面向组件编程

基本理解和使用
 <div id="test"></div>
    <div id="test1"></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">
        //定义组件
        //方式1 - 工厂函数组件（简单组件）
        function MyComponent(){
            return <h2>1111</h2>
        }

        //方式2 - ES6组件（复杂组件）
        class MyComponent2 extends React.Component{
            render(){
                return <h2>2222</h2>
            }
        }

        //进行组件渲染
        ReactDOM.render(<MyComponent />,document.getElementById('test'))
        ReactDOM.render(<MyComponent2 />,document.getElementById("test1"))
    </script>

在这里插入图片描述

  • 注意
    • 组件名必须首字母大写
    • 虚拟DOM元素只能有一个根元素
    • 虚拟DOM元素必须有结束标签
  • render()渲染组件标签的基本流程
    • React内部会创建组件实例对象
    • 得到包含的虚拟DOM并解析为真实DOM
    • 插入到指定的页面元素内部
组件三大属性state
<div id="test"></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 Like extends React.Component{
            constructor(prop){
                super(prop)
                //初始化状态
                this.state = {
                    isLikeME:false
                }

                //将新增方法中的this强制绑定为数组对象
                this.handleClick = this.handleClick.bind(this)
            }
            //新增加方法 - 内部的this默认不是组件对象，而是undefined
            handleClick(){
                //得到状态并取反
                const isLikeME = !this.isLikeME
                //更新状态
                this.setState({isLikeME})
            }
            //重写组件类的方法
            render(){
                //读取状态
                const {isLikeME} = this.state
                //绑定时间
                return <h2 onClick={this.handleClick}>{isLikeME? '1111':'2222'}</h2>
            }
        }
        //渲染组件标签
        ReactDOM.render(<Like />,document.getElementById('test'))
    </script>
  • 理解
    • state是组件对象最重要的属性, 值是对象(可以包含多个数据)
    • 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
组件三大属性props
    <div id="test"></div>
    <div id="test1"></div>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/prop-types.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">
        //定义组件
        function Person(props){
            return(
                <ul>
                    <li>姓名:{props.name}</li>
                    <li>年龄:{props.age}</li>
                    <li>性别:{props.sex}</li>    
                </ul>
            )
        }
        //指定默认值
        Person.defaultProps = {
            sex:'男',
            age:20
        }

        //指定属性值的类型的必要性
        Person.propTypes = {
            name:PropTypes.string.isRequired,
            age:PropTypes.number
        }

        //渲染组件标签
        const p1 = {
            name:'Tom',
            age:10,
            sex:'女'
        }
        // ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex}/>,document.getElementById('test'))
        ReactDOM.render(<Person {...p1}/>,document.getElementById('test'))

        const p2 = {
            name:'Jack'
        }
        ReactDOM.render(<Person name={p2.name} age={30}/>,document.getElementById('test1'))
    </script>

在这里插入图片描述

  • 理解
    • 每个组件对象都会有props(properties的简写)属性
    • 组件标签的所有属性都保存在props中
  • 作用
    • 通过标签属性从组件外向组件内传递变化的数据
    • 注意: 组件内部不要修改props数据
组件三大属性refs属性
 <div id="test"></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 MyDemo extends React.Component{
            constructor(props){
                super(props)
                this.showInput = this.showInput.bind(this)
                this.handleBluer = this.handleBluer.bind(this)
            }

            showInput(){
                const input = this.refs.content
                //alert(input.value)
                alert(this.input.value)
            }

            handleBluer(event){
                alert(event.target.value)
            }

            render(){
                return(
                    <div>
                        <input type="text" ref="content" />
                        <input type="text" ref={input => this.input = input} />
                        <button onClick={this.showInput}>提示输出</button>
                        <input type="text" placeholder="失去焦点" onBlur={this.handleBluer}/>
                    </div>
                )
            }
        }

        //渲染组件标签
        ReactDOM.render(<MyDemo />,document.getElementById('test'))
    </script>

  • 组件内的标签都可以定义ref属性来标识自己

  • <input type=“text” ref={input => this.msgInput = input}/>

  • 回调函数在组件初始化渲染完或卸载时自动调用

  • 在组件中可以通过this.msgInput来得到对应的真实DOM元素

  • 作用: 通过ref获取组件内容特定标签对象, 进行读取其相关数据

  • 注意事项

    • 组件内置的方法中的this为组件对象
    • 在组件类中自定义的方法中this为null
      • 强制绑定this: 通过函数对象的bind()
      • 箭头函数(ES6模块化编码时才能使用)
组件的组合

  • 拆分组件: 拆分界面,抽取组件

  • 实现静态组件: 使用组件实现静态页面效果

  • 实现动态组件

    • 动态显示初始化数据
    • 交互功能(从绑定事件监听开始)
    <div id="test"></div>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/prop-types.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">
        class App extends React.Component{
            constructor(props){
                super(props)
                //初始化状态
                this.state = {
                    todos:['你好','下午好','晚上好']
                }
                this.addTodo = this.addTodo.bind(this)
            }
            addTodo(todo){
                //this.state.todos.unshift(todo)
                const {todos} = this.state
                todos.unshift(todo)
                //更新状态
                this.setState({todos})
            }
            render(){
                const {todos} = this.state
                return(
                    <div>
                        <h1>Simple TODO List</h1>
                        <Add count={todos.length} addTodo={this.addTodo}/>
                        <List todos={todos}/>
                    </div>
                )
            }
        }

        class Add extends React.Component{
            constructor(props){
                super(props)
                this.add = this.add.bind(this)
            }
            add(){
                //读取输入的数据
                const todo = this.todoTnput.value.trim()
                //检查合法性
                if(!todo){
                    return
                }
                //添加
                this.props.addTodo(todo)
                //清除输入
                this.todoTnput.value
最低0.47元/天 解锁文章
smile_team
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React四种监听dom元素大小的方法
ujjhuhu的博客
05-30 8668
1.原生方法 2.resizeObserver方法 3.给dom添加窗口resize方法 4.ahooks中useSize
React事件
fyw1789的博客
10-03 441
关于React事件挂载，React事件参数e，及其注意事项
Scheme 程序语言介绍
ao1227的博客
03-29 606
简介 Scheme 是差不多三十年前诞生在 MIT 人工智能实验室的一门程序语言。它是 Lisp 语言的发展。今天的 Scheme 在程序语言的理论研究和工程应用两方面都发挥着持久和越来越重要的影响。本文作者在 IBM developerWorks 中国网站 Linux 技术专区上的另一个系列，专门介绍 Scheme 在 UNIX 上的应用。本文介绍 Scheme 的语言特性，不涉及具...
PLisp: 集成在Python中的LISP语言实现 (1)
cloverprince的恶搞空间
04-20 1864
看了一点LISP的书，猛然觉得，LISP的原理很简单。LISP里面只有1种数据结构：Symbolic Expression，简称sexp。程序本身也是sexp，处理的数据也是sexp。也就是，如果你能解释用sexp写成的程序，你就制成了LISP解释器。 LISP里面，sexp分为两种：表和原子。list（表），内部有序地包含0个或多个sexp。除此之外，其他东西都是atom（原子），比如sy...
react 移动端h5 监听滚动document.documentElement.scrollTop取值总取上一次滚动触发结束的值
hzxOnlineOk的博客
05-25 1081
react 移动端h5 监听滚动document.documentElement.scrollTop取值总取上一次滚动触发结束的值，也就是上一次滚动到700，这一次滚动到900，那么在touchmove事件回调中打印出的是700 一个不够精确的解决办法是，为处理逻辑增加一个定时器延时获取，给一定的延时，可以获得接近正确的数据，同时又能及时的触发逻辑去渲染UI componentDidMount() { document.documentElement.addEventListener(..
React中文文档.zip
04-23
React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。 很多人认为 React 是 MVC 中的 V（视图）。 我们创造 React 是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序。为了达到这...
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下的react.min.js和react-dom.js
04-24
React是Facebook开发的一个用于构建用户界面的JavaScript库，尤其适合构建单页应用（SPA）。它主要关注视图层，但也可以与其他库或框架配合使用，形成完整的MVC（模型-视图-控制器）架构。在React生态系统中，`react...
React资料配合B站尚硅谷教程
04-19
React是Facebook推出的一款开源JavaScript库，用于构建用户界面，尤其是单页应用（SPA）。它采用组件化开发方式，使得UI的构建更为模块化，易于维护和扩展。尚硅谷是一家知名的在线教育平台，提供了丰富的编程教程，...
React Quickly
04-19
React Quickly is for anyone who wants to learn React.js fast. This hands-on book teaches you the concepts you need with lots of examples, tutorials, and a large main project that gets built throughout...
react核心文件和中文文档.rar
04-19
react的核心库文件，前端开发的利器。用于构建用户界面的 JavaScript 库，声明式 React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。组件化 创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。
4、React对组件的DOM事件监听
热门推荐
大前端程序猿
01-17 1万+
下面的代码展示了在React中如何对按钮的点击事件和输入框的输入事件做监听： State var HelloWorld = React.createClass({ handleClick: function() { alert('you click me!'); }, handleChange: function(event){
React 事件踩坑（一）
WANGLEI20116527的专栏
04-27 9636
问题描述今天想要用react实现一个对话框的功能，这个对话框有一个特点就是在点击这个对话框的时候直接就能够使它隐藏，并且在对话框之外的任何东西都是可以点击的，并且能够及时的响应。
React-监听事件
kelly0721的博客
11-22 7506
事件的监听与移除 addEventListener removeEventListener
Python之error: subprocess-exited-with-error : sexpdata解决(二十四)
最新发布
Android系统攻城狮
05-20 655
本篇目的: 解决: pip install sexpdata安装报错问题.
Rcpp cannot convert ‘SEXP‘ {aka ‘SEXPREC*‘} to ‘###‘ in return
weixin_43217641的博客
03-09 551
本篇博客分析了Rcpp cannot convert ‘SEXP‘ {aka ‘SEXPREC*‘} to ‘###‘ in return报错的原因以及bug的解决方法，强调了as函数与wrap函数在R与Rcpp之间的数据转换.
甲级PAT 2019年3月 Sexy Primes （20 分)
Joyceyang_999的博客
03-23 1317
7-1Sexy Primes（20分) Sexy primes are pairs of primes of the form (p,p+6), so-named since "sex" is the Latin word for "six". (Quoted fromhttp://mathworld.wolfram.com/SexyPrimes.html) Now given an...
Python_类
ZZPHG的博客
08-05 238
面向对象的介绍 世界万物，皆可分类 。世界万物，皆为对象。是要是对象，就肯定是属于某种品种。只要是对象，就肯定有属性 特性 类 class ：对一类拥有相同属性的对象的抽象 object：对象 #class Person： #经典类 class Role(object）： #新式类 n = 1 #类变量 存在类的内存里 先找实例本身n 再找类的n 类变量：大家共有的属性 def __init__(self, name, role, weapon, life_value=100, m
react个人笔记---引入那三个必须使用的库（附链接） -- 引入react库等简单操作
qq_52138438的博客
03-26 1781
react个人笔记 – 引入react库等简单操作 萌新作者在线卑微记录自己学习React的历程 代码及笔记 来自 尚硅谷学习视频 学习React首先要引入react库,库可在react官方网站下载,具体操作如下： 1.先进入官网(百度搜索react就行) React官网 2.点文档，再点右边的CDN链接 复制这几段地址 https://unpkg.com/react@16/umd/react.development.js https://unpkg.com/react-dom@16/umd/react
React入门指南
"《Introduction to React》是由Cory Gackenheimer编写的关于React技术的PDF文档，旨在向读者介绍JavaScript库React的基础知识和核心概念。该资源涵盖React的使用、开发技巧以及与之相关的JavaScript编程实践。" 本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值