React基础知识2
3.React应用（基于react脚手架）
3.1 react脚手架
1.xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
a.包含了所有需要的配置
b.指定好了所有的依赖
c.可以直接安装/编译/运行一个简单效果
2.react提供了一个用于创建react项目的脚手架库: create-react-app
3.项目的整体技术架构为: react + webpack + es6 + eslint
4.使用脚手架开发的项目的特点: 模块化, 组件化, 工程化
3.2 创建项目并启动
1.cnpm install -g create-react-app --全局安装
2.create-react-app hello-react ---进入到目的路径后开始创建项目
3.cd hello-react --进入到项目目录
4.npm start ---启动项目
执行第二条指令时,可能会非常慢,这是因为creact-react-app默认调用npm,把npm的register给永久设置过来即可，这样使用cnpm或者npm就没差别了
解决方法如下:
npm config set registry https://registry.npm.taobao.org
-- 配置后可通过下面方式来验证是否成功
npm config get registry
3.3 react脚手架项目结构
npm root -g 查看全局的下载根目录
4. react ajax
1.React本身只关注于界面, 并不包含发送ajax请求的代码
2.前端应用需要通过ajax请求与后台进行交互(json数据)
3.react应用中需要集成第三方ajax库(或自己封装)
---常用的ajax库---
1.jQuery: 比较重, 如果需要另外引入不建议使用
2.axios: 轻量级, 建议使用
a.封装XmlHttpRequest对象的ajax
b. promise风格
c.可以用在浏览器端和node服务器端
3.fetch: 原生函数, 但老版本浏览器不支持
a.不再使用XmlHttpRequest对象提交ajax请求
b.为了兼容低版本的浏览器, 可以引入兼容库fetch.js
axios发送ajax请求
文档链接:link
<body>
<div id="example"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script type="text/babel">
//1.定义组件
class Angle extends React.Component {
state = {
repoName: '',
repoUrl: ''
}
componentDidMount() {
//使用axios发送异步的ajax请求
const url = 'https://api.github.com/search/repositories?q=re&sort=stars'
axios.get(url)
.then(response => {
const result = response.data
//得到数据
const {name,html_url} =result.items[0]
//更新状态
this.setState({repoName:name,repoUrl:html_url})
})
//打印错误信息
.catch((error)=>{alert(error.message)})
}
render() {
const { repoName, repoUrl } = this.state
if (!repoName) {
return <h2>Loading...</h2>
} else {
return <h2>前端框架:<a href='javascript:void(0)'>{repoName}</a></h2>
}
}
}
//2.渲染组件标签
ReactDOM.render(<Angle />, document.getElementById('example'))
</script>
</body>
fetch函数发送ajax请求
<body>
<div id="example"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script type="text/babel">
//1.定义组件
class Angle extends React.Component {
state = {
repoName: '',
repoUrl: ''
}
componentDidMount() {
const url = 'https://api.github.com/search/repositories?q=re&sort=stars'
//2.使用fetch发送异步的ajax请求
fetch(url).then(response=>{return response.json()})
.then(data=>{
//得到数据
const {name,html_url}=data.items[0]
//更新状态
this.setState({repoName:name,repoUrl:html_url})
})
}
render() {
const { repoName, repoUrl } = this.state
if (!repoName) {
return <h2>Loading...</h2>
} else {
return <h2>前端框架:<a href='javascript:void(0)'>{repoName}</a></h2>
}
}
}
//2.渲染组件标签
ReactDOM.render(<Angle />, document.getElementById('example'))
</script>
</body>
5.组件间通信
方式1: 通过props传递
1.共同的数据放在父组件上, 特有的数据放在自己组件内部(state)
2.通过props可以传递一般数据和函数数据, 只能一层一层传递
3.一般数据-->父组件传递数据给子组件-->子组件读取数据
4.函数数据-->子组件传递数据给父组件-->子组件调用函数
方式2: 使用消息订阅(subscribe)-发布(publish)机制
1.工具库: PubSubJS
2.下载: npm install pubsub-js --save
3.使用:
import PubSub from 'pubsub-js' //引入
PubSub.subscribe('delete', function(data){ }); //订阅
PubSub.publish('delete', data) //发布消息
方式3: redux（详情见下）
6.事件监听
-----6.1 原生DOM事件
1--绑定事件监听
a.事件名(类型): 只有有限的几个, 不能随便写
b.回调函数
2- 触发事件
a.用户操作界面
b.事件名(类型)
c.数据()
-----6.2 自定义事件(消息机制)
1-绑定事件监听
a.事件名(类型): 任意
b.回调函数: 通过形参接收数据, 在函数体处理事件
2-触发事件(编码)
a.事件名(类型): 与绑定的事件监听的事件名一致
b.数据: 会自动传递给回调函数
6.3 ES6常用新语法
1.定义常量/变量: const/let
2.解构赋值: let {a, b} = this.props import {aa} from 'xxx'
3.对象的简洁表达: {a, b}
4.箭头函数:
a.常用场景
* 组件的自定义方法: xxx = () => {}
* 参数匿名函数
b.优点:
* 简洁
* 没有自己的this,使用引用this查找的是外部this
5)扩展(三点)运算符: 拆解对象(const MyProps = {}, <Xxx {...MyProps}>)
6)类: class/extends/constructor/super
7)ES6模块化: export default | import
7.react-router4
--------------7.1 react-router的理解------------
1.react的一个插件库
2.专门用来实现一个SPA应用
3.基于react的项目基本都会用到此库
-------------7.2 SPA的理解----------------------
1. 单页Web应用（single page web application，SPA）
2. 整个应用只有一个完整的页面
3. 点击页面中的链接不会刷新页面, 本身也不会向服务器发请求
4. 当点击路由链接时, 只会做页面的局部更新
5. 数据都需要通过ajax请求获取, 并在前端异步展现
------------7.3 路由的理解---------------------
-----1-什么是路由?
a.一个路由就是一个映射关系(key:value)
b.key为路由路径, value可能是function/component
-----2-路由的分类
a.后台路由: node服务器端路由, value是function, 用来处理客户端提交的请求并返回一个响应数据
b.前台路由: 浏览器端路由, value是component, 当请求的是路由path时, 浏览器端前没有发送http请求, 但界面会更新显示对应的组件
------2-1 后台路由
a.注册路由: router.get(path, function(req, res))
b.当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
------2-2 前端路由
a.注册路由: <Route path="/about" component={About}>
b.当浏览器的hash变为#about时, 当前路由组件就会变为About组件
前端路由的实现
1.history库
a.网址: https://github.com/ReactTraining/history
b.管理浏览器会话历史(history)的工具库
c.包装的是原生BOM中window.history和window.location.hash
2.history API
a.History.createBrowserHistory(): 得到封装window.history的管理对象
b.History.createHashHistory(): 得到封装window.location.hash的管理对象
c.history.push(): 添加一个新的历史记录
d.history.replace(): 用一个新的历史记录替换当前的记录
e.history.goBack(): 回退到上一个历史记录
f.history.goForword(): 前进到下一个历史记录
g.history.listen(function(location){}): 监视历史记录的变化
<body>
<p><input type="text"></p>
<a href="/test1" onclick="return push('/test1')">test1</a><br><br>
<button onClick="push('/test2')">push test2</button><br><br>
<button onClick="back()">回退</button><br><br>
<button onClick="forword()">前进</button><br><br>
<button onClick="replace('/test3')">replace test3</button><br><br>
<script type="text/javascript" src="https://cdn.bootcss.com/history/4.7.2/history.js"></script>
<script type="text/javascript">
let history = History.createBrowserHistory() // 方式一
// history = History.createHashHistory() // 方式二
// console.log(history)
function push (to) {
history.push(to)
return false
}
function back() {
history.goBack()
}
function forword() {
history.goForward()
}
function replace (to) {
history.replace(to)
}
history.listen((location) => {
console.log('请求路由路径发生变动', location)
})
</script>
</body>
8.react-router基本使用及相关API
----组件
1)<BrowserRouter>
2)<HashRouter>
3)<Route>
4)<Redirect>
5)<Link>
6)<NavLink>
7)<Switch>
----其它
1)history对象
2)match对象
3)withRouter函数
准备:
1)下载react-router: npm install --save react-router@4
2)引入bootstrap.css: <link rel="stylesheet" href="/css/bootstrap.css">
代码:
----路由组件: views/about.jsx-----
import React from 'react'
export default function About() {
return <div>About组件内容</div>
}
-----路由组件: views/home.jsx------
import React from 'react'
export default function About() {
return <div>Home组件内容</div>
}
------包装NavLink组件: components/my-nav-link.jsx------
import React from 'react'
import {NavLink} from 'react-router-dom'
export default function MyNavLink(props) {
return <NavLink {...props} activeClassName='activeClass'/>
}
-------应用组件: components/app.jsx------
import React from 'react'
import {Route, Switch, Redirect} from 'react-router-dom'
import MyNavLink from './components/my-nav-link'
import About from './views/about'
import Home from './views/home'
export default class App extends React.Component {
render () {
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<div className="page-header">
<h2>React Router Demo</h2>
</div>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
{/*导航路由链接*/}
<MyNavLink className="list-group-item" to='/about' >About</MyNavLink>
<MyNavLink className="list-group-item" to='/home'>Home</MyNavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
{/*可切换的路由组件*/}
<Switch>
<Route path='/about' component={About} />
<Route path='/home' component={Home} />
<Redirect to='/about' />
</Switch>
</div>
</div>
</div>
</div>
</div>
)
}
}
------自定义样式: index.css------
.activeClass {
color: red !important;
}
------入口JS: index.js------
import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter, HashRouter} from 'react-router-dom'
import App from './components/app'
import './index.css'
ReactDOM.render(
(
<BrowserRouter>
<App />
</BrowserRouter>
/*<HashRouter>
<App />
</HashRouter>*/
),
document.getElementById('root')
)
9. 嵌套路由使用
二级路由组件: views/news.jsx
import React from 'react'
export default class News extends React.Component {
state = {
newsArr: ['news001', 'news002', 'news003']
}
render () {
return (
<div>
<ul>
{
this.state.newsArr.map((news, index) => <li key={index}>{news}</li>)
}
</ul>
</div>
)
}
}
二级路由组件: views/message.jsx
import React from 'react'
import {Link, Route} from 'react-router-dom'
export default class Message extends React.Component {
state = {
messages: []
}
componentDidMount () {
// 模拟发送ajax请求
setTimeout(() => {
const data = [
{id: 1, title: 'Message001'},
{id: 3, title: 'Message003'},
{id: 6, title: 'Message006'},
]
this.setState({
messages: data
})
}, 1000)
}
render () {
const path = this.props.match.path
return (
<div>
<ul>
{
this.state.messages.map((m, index) => {
return (
<li key={index}>
<Link to='???'>{m.title}</Link>
</li>
)
})
}
</ul>
</div>
)
}
}
一级路由组件: views/home.jsx
import React from 'react'
import {Switch, Route, Redirect} from 'react-router-dom'
import MyNavLink from './components/my-nav-link'
import News from './views/news'
import Message from './views/message'
export default function Home() {
return (
<div>
<h2>Home组件内容</h2>
<div>
<ul className="nav nav-tabs">
<li>
<MyNavLink to='/home/news'>News</MyNavLink>
</li>
<li>
<MyNavLink to="/home/message">Message</MyNavLink>
</li>
</ul>
<Switch>
<Route path='/home/news' component={News} />
<Route path='/home/message' component={Message} />
<Redirect to='/home/news'/>
</Switch>
</div>
</div>
)
}
10. 向路由组件传递参数数据
三级路由组件: views/message-detail.jsx
import React from 'react'
const messageDetails = [
{id: 1, title: 'Message001', content: '戴沐白-朱竹清 幽冥白虎'},
{id: 3, title: 'Message003', content: '奥斯卡-宁荣荣 复活神光'},
{id: 6, title: 'Message006', content: '马红俊 白沉香 无'},
]
export default function MessageDetail(props) {
const id = props.match.params.id
const md = messageDetails.find(md => md.id===id*1)
return (
<ul>
<li>ID: {md.id}</li>
<li>TITLE: {md.title}</li>
<li>CONTENT: {md.content}</li>
</ul>
)
}
二级路由组件: views/message.jsx
import React from 'react'
import {Link, Route} from 'react-router-dom'
import MessageDetail from "./views/message-detail"
export default class Message extends React.Component {
state = {
messages: []
}
componentDidMount () {
// 模拟发送ajax请求
setTimeout(() => {
const data = [
{id: 1, title: 'Message001'},
{id: 3, title: 'Message003'},
{id: 6, title: 'Message006'},
]
this.setState({
messages: data
})
}, 1000)
}
render () {
const path = this.props.match.path
return (
<div>
<ul>
{
this.state.messages.map((m, index) => {
return (
<li key={index}>
<Link to={`${path}/${m.id}`}>{m.title}</Link>
</li>
)
})
}
</ul>
<hr/>
<Route path={`${path}/:id`} component={MessageDetail}></Route>
</div>
)
}
}
11.多种路由跳转方式
二级路由: views/message.jsx
import React from 'react'
import {Link, Route} from 'react-router-dom'
import MessageDetail from "./views/message-detail"
export default class Message extends React.Component {
state = {
messages: []
}
componentDidMount () {
// 模拟发送ajax请求
setTimeout(() => {
const data = [
{id: 1, title: 'Message001'},
{id: 3, title: 'Message003'},
{id: 6, title: 'Message006'},
]
this.setState({
messages: data
})
}, 1000)
}
ShowDetail = (id) => {
this.props.history.push(`/home/message/${id}`)
}
ShowDetail2 = (id) => {
this.props.history.replace(`/home/message/${id}`)
}
back = () => {
this.props.history.goBack()
}
forward = () => {
this.props.history.goForward()
}
render () {
const path = this.props.match.path
return (
<div>
<ul>
{
this.state.messages.map((m, index) => {
return (
<li key={index}>
<Link to={`${path}/${m.id}`}>{m.title}</Link>
<button onClick={() => this.ShowDetail(m.id)}>查看详情(push)</button>
<button onClick={() => this.ShowDetail2(m.id)}>查看详情(replace)</button>
</li>
)
})
}
</ul>
<p>
<button onClick={this.back}>返回</button>
<button onClick={this.forward}>前进</button>
</p>
<hr/>
<Route path={`${path}/:id`} component={MessageDetail}></Route>
</div>
)
}
}
扫一扫
1527
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
