6、React路由及UI
SPA与路由 单页Web 应用（single page web application，SPA） 整个应用只有一个完整的页面 点击页面中的链接不会刷新页面, 本身也不会向服务器发请求 当点击路由链接时, 只会做页面的局部更新 数据都需要通过ajax 请求获取, 并在前端异步展现 路由 一个路由就是一个映射关系(key:value)，key 为路由路径, value 可能是function/component。 前端路由 后端路由 react-router基本使用 相关文档：http://react-guide.github.io/react-router-cn/index.html 英文原版：https://reactrouter.com/web/guides/quick-start 安装 yarn add react-router-dom 使用BrowserRouter组件包裹所有组件 import React from 'react'; import ReactDOM from 'react-dom'; import { Bro ...
5、React组件间通信
通过props 传递 共同的数据放在父组件上, 特有的数据放在自己组件内部(state) 通过props 可以传递一般数据和函数数据, 只能一层一层传递 一般数据–>父组件传递数据给子组件–>子组件读取数据 函数数据–>子组件传递数据给父组件–>子组件调用函数 使用消息订阅(subscribe)-发布(publish)机制 使用工具库PubSubJS工具库实现。 yarn add pubsub-js 使用 import PubSub from 'pubsub-js' //引入 PubSub.subscribe('delete', function(msg,data){ }); //订阅 PubSub.publish('delete', data) //发布消息 发布消息可以理解为触发事件，订阅消息可以理解为监听事件。 通过redux传递 待补充
4、React发送Ajax请求
Axios示例 class MostStart extends React.Component { state = { repoName: '', repoUrl: '' } async componentDidMount() { // 发送Ajax请求 const url = `https://api.github.com/search/repositories?q=r&sort=stars` const { data: res } = await axios.get(url) const { html_url, name } = res.items[0] this.state.repoUrl = html_url this.state.repoName = name this.setState({ html_url, name }) } render() ...
3、React脚手架
脚手架 npm install -g create-react-app create-react-app hello-react cd hello-react npm start 基于脚手架编写项目 入口文件./src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css' import App from './components/app' ReactDOM.render(<App />, document.getElementById('root')); 组件App import React,{Component} from 'react' import Logo from '../logo.svg' export default class App extends Component{ render(){ return( <div> <img ...
2、React模块与组件
模块与组件的理解 模块 向外提供特定功能的js 程序, 一般就是一个js 文件 复用js, 简化js 的编写, 提高js 运行效率 组件 用来实现特定(局部)功能效果的代码集合(html/css/js) 复用编码, 简化项目编码, 提高运行效率 组件的基本使用 创建组件有两种方式 工厂函数组件 简单组件，通过函数返回值即可。函数名就是组件(标签)名。 function MyComponent() { return <h2>工厂函数组件（简单组件）</h2> } ReactDOM.render(<MyComponent />, document.getElementById('test')) ES6类组件 复杂组件，通过ES6类中的render方法。 class MyComponent2 extends React.Component { render() { return <h2>ES6类组件（复杂组件）</h2> } } Rea ...
1、React基础用法及JSX
基本使用 <body> <div id="test"></div> <!-- 核心库 --> <script src="../../js/react.development.js"></script> <!-- 提供DOM操作的扩展库 --> <script src="../../js/react-dom.development.js"></script> <!-- 解析JSX语法代码转为纯JS --> <script src="../../js/babel.min.js"></script> <script type='text/babel'> // 告诉babel.js解析里面的jsx代码 // 1. 创建虚拟DOM元素对象 var vDom = <h1>Hello React!</h1> // 2. 将虚拟DOM渲染到真实的DOM容器中 ReactDOM.render(vDom, documen ...
7、VUEX
VUEX是什么 vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。 vuex的核心概念 state提供唯的公共数据源，所有共享的数据都要统一放到 Store的 State中进行存储。 export default new Vuex.Store({ // 共享数据 state: { count: 0 }, mutations: {}, actions: {}, modules: {} }) 使用方式 通过this.$store.state访问属性 <h3>当前最新的Count值为：{{ $store.state.count }}</h3> 在template模板中可以省略this 导入模式 通过计算属性 import { mapState } from 'vuex' export default { data () ...
7、项目优化及上线
项目仓库：https://github.com/changeclass/vue-shop 优化策略 生成打包报告 第三方库使用cdn ElementUI使用按需加载 路由懒加载 首页内容定制 添加进度条 安装nprogress依赖 导入包 import NProgress from 'nprogress' import 'nprogress/nprogress.css' 为请求添加进度条效果 // request拦截器(展示进度条) axios.interceptors.request.use(config => { NProgress.start() config.headers.Authorization = window.sessionStorage.getItem('token') return config }) // 相应拦截器 （隐藏进度条） axios.interceptors.response.use(config => { NProgress.done() return con ...
7、项目优化及上线
项目仓库：https://github.com/changeclass/vue-shop 优化策略 生成打包报告 第三方库使用cdn ElementUI使用按需加载 路由懒加载 首页内容定制 添加进度条 安装nprogress依赖 导入包 import NProgress from 'nprogress' import 'nprogress/nprogress.css' 为请求添加进度条效果 // request拦截器(展示进度条) axios.interceptors.request.use(config => { NProgress.start() config.headers.Authorization = window.sessionStorage.getItem('token') return config }) // 相应拦截器 （隐藏进度条） axios.interceptors.response.use(config => { NProgress.done() return con ...
