React简介及基础用法

1、React简介

1.1、React概述

React 是用于构建用户界面的 javascript 库,具有声明式、组件化等特点。

1.2、MVC和MVVM模式

MVC(Model-View-Controller,模型-视图-控制器),Model指模型数据,View是显示的界面,Controller是控制层,控制层用于接收到用户的操作,然后进行一系列的处理后,发送给Model,接收到Model的响应后再交给View视图层。

MVVM(Model-View-ViewModel,模型-视图-视图模型),Model指模型数据,View是指浏览器渲染的网页,ViewMode是Model和View的桥梁,称为视图模型,由ViewModel完成数据的绑定。

在Vue中,JS对象就是Model,HTML标签就是View,Vue实例就是ViewModel。

2、React环境搭建

2.1、使用webpack搭建React开发环境

参考博客:https://blog.csdn.net/p445098355/article/details/104517094

2.2、使用create-react-app脚手架

安装脚手架

cnpm i -g create-react-app

创建项目

create-react-app  项目名称

3、JSX语法

jsx 全程是 javascript XML ,是一个 JavaScript 的语法扩展。jsx 要按照 xml 的编写规范,即:

  • 最外层只能有一个根标记;
  • 每个标记都必须要有闭合标签;

jsx 中可以使用 {...} 来编写 javascript 表达式。

4、React组件

4.1、函数组件

使用构造函数声明的组件被称为函数组件,因其内部没有 state 属性,所以又被称为无状态组件,代码如下:

import React from 'react';
import ReactDOM from 'react-dom';const App = () => {return (<div>函数组件</div>)
}ReactDOM.render(<App />,document.getElementById('root'));

可以通过 props 属性获取到组件标签上定义的属性值,例如:

import React from 'react';
import ReactDOM from 'react-dom';const App = (props) => {return (<div>函数组件,props值: {props.name}</div>)
}ReactDOM.render(<App name="Tom" />,document.getElementById('root'));

4.2、类组件

使用 class 关键字创建的组件,称为类组件,因其内部可以有 state 属性,又被称为有状态组件,代码如下:

import React from 'react';
import ReactDOM from 'react-dom';class App extends React.Component {render() {return (<div>类组件</div>)}
}ReactDOM.render(<App name="Tom" />,document.getElementById('root'));

在使用类组件的标签时,标签上定义的属性都会通过类组件的构造函数,传递到组件内部,然后在组件内容使用 this.props 获取到外界的传值,代码如下:

import React from 'react';
import ReactDOM from 'react-dom';class App extends React.Component {//构造函数constructor(props){super(props)console.log(props)}render() {return (<div>类组件,props值: {this.props.name}</div>)}
}ReactDOM.render(<App name="Tom" />,document.getElementById('root'));

每个类组件都有自己独享的内部状态,即 state 属性。如果要操作 state 必须要使用 setState() 函数,该函数是一个异步函数,对 state 修改后,会再次调用 render() 函数重新渲染页面。

class App extends React.Component {//构造函数constructor(props){super(props)this.state = {value: 'hello'}}//按钮点击事件,接收到视图层的指令,操作数据模型,最后在把操作结果返回给视图handleClick(str){this.setState({value: str})}render() {return (<div>{this.state.value}<button onClick={this.handleClick.bind(this,'world')}>修改state</button></div>)}
}ReactDOM.render(<App name="Tom" />,document.getElementById('root'));

4.3、函数组件和类组件的区别

在说明函数组件和类组件的区别时,要看3个方面:

  • 组件内是否有 this
  • 组件内是否有 state ;
  • 组件内是否有生命周期钩子;

只要符合上面的3点,就是一个有状态组件,即类组件。

4.4、组件通信

父组件向子组件传值

import React from 'react';
import ReactDOM from 'react-dom';
// import App from './App';class App extends React.Component {render(){return (<div>{/* 自定义组件,可以在组件上自定义属性 */}<Button text="百度一下" subText="点击提交数据" textColor="red"/></div>)}
}//无状态组件,只显示UI效果,没有太多的业务逻辑
const Button = (props) => {return (<button title={props.subText} style={{color: props.textColor}}>{props.text}</button>)
}ReactDOM.render(<App name="Tom" />,document.getElementById('root'));

子组件向父组件传值

import React from 'react';
import ReactDOM from 'react-dom';
// import App from './App';class App extends React.Component {//自定义组件的点击事件,text为默认参数,即封装Button组件时传入的一个参数handleClick(text){console.log('自定义组件被点击了。。。。',text)}render(){return (<div>{/* 自定义组件,可以在组件上自定义属性,也可以自定义事件 */}<Button text="百度一下" subText="点击提交数据" textColor="red" onClick={this.handleClick.bind(this)}/></div>)}
}//无状态组件,只显示UI效果,没有太多的业务逻辑
const Button = (props) => {return (<button title={props.subText} style={{color: props.textColor}} onClick={()=>{props.onClick(props.text)}}>{props.text}</button>)
}ReactDOM.render(<App name="Tom" />,document.getElementById('root'));

4.5、封装自定义组件

自定义按钮组件

import React, { Component } from 'react'export default class Button extends Component {//HTML的button标签原生点击事件函数handleClick(){this.props.onClick()}render() {return (<div><button style={{color: this.props.fontColor}} onClick={this.handleClick.bind(this)}>{this.props.text}</button></div>)}
}

自定义输入框组件

import React, { Component } from 'react'export default class Input extends Component {//input标签原生键盘事件的函数handlePress(e){if(e.charCode === 13){this.props.onEnter(e.target.value)}}render() {return (<div><input onKeyPress={this.handlePress.bind(this)}></input></div>)}
}

在父组件中使用自定义组件

import React, { Component } from 'react'
import Button from './Button'
import Input from './Input'export default class App extends Component {handleClick(){console.log('click....')}//Input组件上的回车事件handleEnter(val){console.log('enter...',val)}render() {return (<div><Input onEnter={this.handleEnter.bind(this)}></Input><Button text="提交" fontColor="red" onClick={this.handleClick.bind(this)}></Button></div>)}
}

5、UI组件库

5.1、使用Element-React组件库

需要安装:

# 安装element-react
cnpm i element-react --save# 安装elementui的主题
cnpm install element-theme-default --save# 按钮react-hot-loader
cnpm install react-hot-loader@next -D

Button组件使用案例:

import React, { Component } from 'react'
import {Button
} from 'element-react'
import 'element-theme-default'export default class App extends Component {constructor(){super()this.state = {isLoading: false,btnText: '点击下载'}}handleLoading = ()=>{this.setState({btnText: '下载中',isLoading: true},()=>{//模拟下载过程setTimeout(()=>{this.setState({btnText: '下载完成',isLoading: false})},2000)})}render() {return (<div><Button type="info" loading={this.state.isLoading} onClick={this.handleLoading}>{this.state.btnText}</Button><Button>上传<i className="el-icon-upload2"></i></Button></div>)}
}

Menu和Table组件的使用案例:

import React, { Component } from 'react'
import {Button,Menu,Table
} from 'element-react'
import 'element-theme-default'export default class App extends Component {constructor(){super()this.state = {column: [{label: '姓名',prop: 'name'},{label: '年龄',prop: 'age'},{label: '电话',prop: 'phone'},{label: '操作',render: (obj,e,index)=>{ //渲染函数的默认参数为当前点击的数据对象return (<React.Fragment><Button type="info" size="small">修改</Button> &nbsp;&nbsp;<Button type="danger" size="small">删除</Button></React.Fragment>)}}],data: [{name: '张三',age: 20,phone: '13099998888'},{name: '李四',age: 21,phone: '13099998888'},{name: '王五',age: 22,phone: '13099998888'}]}}render() {return (<div><Menu mode="horizontal" theme="dark" defaultActive="1" style={{marginBottom: '20px'}}><Menu.Item index="1">首页</Menu.Item><Menu.SubMenu index="2" title="新闻"><Menu.Item index="2-1">国内新闻</Menu.Item><Menu.Item index="2-2">国际新闻</Menu.Item><Menu.Item index="2-3">社会新闻</Menu.Item></Menu.SubMenu></Menu><Table style={{width: '100%'}} columns={this.state.column} data={this.state.data}></Table></div>)}
}

5.2、Ant Design UI库

安装

cnpm i antd --save

引入组件

# 按需引入
import { DatePicker } from 'antd';# 引入样式
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

6、路由

BrowserRouter

<BrowserRouter> 使用 HTML5 提供的 history API (pushState, replaceStatepopstate 事件) 来保持 UI 和 URL 的同步。一个应用程序中只需要有一个 <BrowserRouter> 即可。

index.js 中使用:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {BrowserRouter} from 'react-router-dom'ReactDOM.render(<BrowserRouter><App /></BrowserRouter>,document.getElementById('root'));

HashRouter

<HashRouter> 使用 URL 的 hash 部分(即 window.location.hash)来保持 UI 和 URL 的同步。与 <BrowserRouter> 用法类似,但是 <HashRouter> 在页面中显示的路由地址里有 # 符号。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {HashRouter} from 'react-router-dom'ReactDOM.render(<HashRouter><App /></HashRouter>,document.getElementById('root'));

Link

为你的应用提供声明式的、可访问的导航链接。

import { Link } from 'react-router-dom';<Link to="/about">About</Link>

配合 Route 使用。

Route

<Route> 可能是 React Router 中最重要的组件,它可以帮助你理解和学习如何更好的使用 React Router。它最基本的职责是在其 path 属性与某个 location 匹配时呈现一些 UI。

import { BrowserRouter as Router, Route } from 'react-router-dom';<Router><div><Route exact path="/" component={Home} /><Route path="/news" component={News} /></div>
</Router>

Link、Route配合使用案例:

import React, { Component } from 'react'
import {Menu} from 'element-react'
import 'element-theme-default'
import {Link,Route,Switch} from 'react-router-dom'export default class App extends Component {render() {return (<div><Menu mode="horizontal" theme="dark" defaultActive="1" style={{marginBottom: '20px'}}><Menu.Item index="1">首页</Menu.Item><Menu.SubMenu index="2" title="新闻"><Menu.Item index="2-1"><Link to="/guonei">国内新闻</Link></Menu.Item><Menu.Item index="2-2"><Link to="/guoji">国际新闻</Link></Menu.Item><Menu.Item index="2-3"><Link to="/shehui">社会新闻</Link></Menu.Item></Menu.SubMenu></Menu><Switch><Route path="/guonei" component={GuoneiNews}></Route><Route path="/guoji" component={GuojiNews}></Route><Route path="/shehui" component={ShehuiNews}></Route></Switch></div>)}
}

参考博客:https://www.jianshu.com/p/97e4af32811a

7、Redux状态管理

Store

用于连接 actionreducer 重要对象,一个redux应用程序中只能有一个 store 对象。

import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp)

Reducer

Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的,记住 actions 只是描述了有事情发生了这一事实,并没有描述应用如何更新 state。

Action

Action 是把数据从应用(译者注:这里之所以不叫 view 是因为这些数据有可能是服务器响应,用户输入或其它非 view 的数据 )传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。

const action = {type: "ADD_TODO",text: 'Build my first Redux app'
}

核心API

在使用redux时,需要掌握的核心API:

  • store.getState() :用于获取最新的store对象
  • store.subscrbe() :用于监听store中的数据变化
  • store.dispatch() :用于向reducer派发action对象

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SAP与阿里云的深度合作 为企业提供领先的SaaS 服务

云栖号案例库&#xff1a;【点击查看更多上云案例】 不知道怎么上云&#xff1f;看云栖号案例库&#xff0c;了解不同行业不同发展阶段的上云方案&#xff0c;助力你上云决策&#xff01; 什么是企业IT治理&#xff1f; 企业IT治理是对企业中IT资源的合理规划和分配&#xff0…

Docker JFrog Artifactory 7.27.10 maven私服(搭建篇)

文章目录一、docker 准备1. 安装docker2. 启动docker3. 监控docker状态二、docker 镜像2.1. 搜索JFrog Artifactory镜像2.2. 拉取镜像2.3. 开放对应端口2.4. 浏览器验证2.5. 登录一、docker 准备 1. 安装docker yum install docker2. 启动docker systemctl start docker3. 监…

阿里妈妈数据字化营销与MaxCompute的不解之缘

摘要&#xff1a; 大数据计算服务&#xff08;MaxCompute&#xff09;是一种快速、完全托管的 GB/TB/PB 级数据仓库解决方案&#xff0c;目前已在阿里巴巴内部得到大规模应用。来自阿里妈妈基础平台大规模数据处理技术专家向大家分享了MaxCompute在阿里妈妈数据字化营销解决方案…

年薪201万的华为“天才少年”曾是三本复读生,逆袭就是抓住每一次提升自己的机会 | AI大赛报名开启

当我们看到“华为最高档天才少年年薪201万的话题”冲上热搜时&#xff0c;大多数人一辈子也无法企及的数字让我们羡慕不已。而入选的大部分是计算机、软件工程、模式识别与智能系统专业&#xff0c;尽管我们知道这些专业很火&#xff0c;薪资很高&#xff0c;但对于百万年薪来说…

redux中间件原理-讲义

1、redux中间件简介 1.1、什么是redux中间件 redux 提供了类似后端 Express 的中间件概念&#xff0c;本质的目的是提供第三方插件的模式&#xff0c;自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流&…

MySQL8.0.26 开启bin_log日志 linux

binlog日志&#xff0c;即binary log&#xff0c;是二进制日志文件。它有两个作用&#xff0c;一是增量备份&#xff0c;即只备份新增的内容&#xff1b;二是用于主从复制等&#xff0c;即主节点维护了一个binlog日志文件&#xff0c;从节点从binlog中同步数据。我们可以通过bi…

基于阿里云 MaxCompute 构建企业云数据仓库CDW

在本文中阿里云资深产品专家云郎分享了基于阿里云 MaxCompute 构建企业云数据仓库CDW的最佳实践建议。 本文内容根据演讲视频以及PPT整理而成。 大家下午好&#xff0c;我是云郎&#xff0c;之前在甲骨文做企业架构师8年&#xff0c;目前是MaxCompute产品经理。 在这么长的客户…

大咖说中台 | 建设数据中台系列(五)——中台架构详解(下)

作者 | 耿立超来源 | 《大数据平台架构与原型实现&#xff1a;数据中台建设实战》本质上&#xff0c;中台是一种中心化、平台化的企业组织架构和业务形态&#xff0c;当这样的组织和业务架构投射到IT 系统上时会自然地形成我们今天讨论的IT 意义上的“中台”。笔者曾经参与过不…

阿里风控大脑如何应用大数据来构建风控体系?

简介&#xff1a; 2019年双11阿里风控保护了约388亿消费者的操作行为&#xff0c;同时挡住了约22亿次恶意攻击。在首席技术官大数据专享会&#xff0c;阿里巴巴新零售技术事业群高级数据技术专家丁明峰为大家介绍了阿里风控大脑关于大数据应用的探索与实践&#xff0c;即风控领…

Hooks操作步骤

使用useState 第1步&#xff1a;引入useState import React,{ useState} from react;第2步&#xff1a;获取useState中的数据 const App ()>{let [value,setValue] useState(hello)//修改的函数const update ()>{setValue(world)}return (<div>{value}<bu…

canal本地运行异常:class com.alibaba.druid.pool.DruidDataSource cannot be cast to

文章目录1. 现象2. 原因3. 解决方案1. 现象 启动时出现异常 class com.alibaba.druid.pool.DruidDataSource cannot be cast to class com.alibaba.druid.pool.DruidDataSource 2. 原因 项目中多模块中的druid jar包冲突导致。 3. 解决方案 修改client-adapter下escore的…

DataWorks 如何撑起阿里99%的数据开发?

阿里妹导读&#xff1a; DataWorks是阿里巴巴自主研发&#xff0c;支撑阿里巴巴经济体99%数据业务建设和治理&#xff0c;每天数万名数据开发和算法开发工程师在使用。从2010年起步到目前的版本&#xff0c;经历了多次技术变革和架构升级&#xff0c;也遗留了大量的历史包袱。…

实用小技能 | 用 Word 和 Excel 自制一个题库自判断答题系统!

作者 | 杨秀璋责编 | 夕颜来源 | CSDN博客 如果你需要做题库&#xff0c;并且喜欢电子答题的方法&#xff0c;这篇文章或许会对你有所帮助。反正李老师班级的平均成绩高出其他班级的14分&#xff0c;这就是它的好处&#xff0c;希望这篇文章对我今后的学生有所帮助吧&#xff0…

git commit -m 提交时报错husky pre-commit (node v12.18.2)

git commit -m ""提交时报错husky > pre-commit (node v12.18.2) husky > pre-commit (node v12.18.2) Stashing changes... [started] Stashing changes... [skipped] 鈫?No partially staged files found... Running linters... [started] Running tasks f…

使用canal实现MySQL 8 全量同步数据到 ElasticSearch 7.15.2中 linux

文章目录一、软件安装1. jdk 安装2. ES7.15.2 安装3. Mysql 8.0 安装4. canal下载二、Mysql 配置2.1. 开启binlog2.2. 验证binlog状态2.3. 创建账号2.4. 权限赋予2.5. 刷新权限2.6. 创建数据库2.7. 初始化表结构2.8. 初始化数据三、canal-deployer的配置与使用3.1. 解压deploye…

“数据驱动、智能引领”,打造未来智能小镇“样板间”

云栖号案例库&#xff1a;【点击查看更多上云案例】 不知道怎么上云&#xff1f;看云栖号案例库&#xff0c;了解不同行业不同发展阶段的上云方案&#xff0c;助力你上云决策&#xff01; 云栖小镇位于浙江杭州西湖区南部&#xff0c;属杭州之江国家旅游度假区核心区块&#xf…

探索中国广电“智慧城市”未来转型路径

云栖号案例库&#xff1a;【点击查看更多上云案例】 不知道怎么上云&#xff1f;看云栖号案例库&#xff0c;了解不同行业不同发展阶段的上云方案&#xff0c;助力你上云决策&#xff01; 引言 东方明珠是上海的传媒旗舰&#xff0c;在文娱领域拓展的同时&#xff0c;也被广电…

设置网页右键点击,并阻止右键点击默认事件

设置网页右键点击&#xff0c;并阻止右键点击默认事件 //为当前文档添加鼠标右击事件&#xff0c;防止默认的右击菜单弹出 document.oncontextmenuYouji; function Youji(){alert("右击成功&#xff01;");return false; }

使用canal实现MySQL 8 增量同步数据到 ElasticSearch 7.15.2中 linux

文章目录一、清空控制台1. 清空控制台2. 修改数据3. 监控数据4. 数据变化5. 索引查询6. 预期性能评估7. 增量同步分析二、验证方案2.1. 把shop索引删除2.2. 重建shop索引2.3. 修改id取得数据2.4. 查看shop索引数据2.4. 修改分类表数据2.6. 监控2.7. 查看shop索引数据2.8. 总结2…

30岁,真的是程序员迈不过去的坎吗?

经常听到有人在说&#xff1a;“现在技术迭代越来越快&#xff0c;程序员的压力更大了&#xff0c;30岁之后的程序员就不好找工作了......”&#xff0c;这不乏很多人在故意贩卖焦虑&#xff0c;但是也会引起我们对自己发展的思考。尤其刚入行的程序员会迷茫&#xff0c;会思考…