1. setStatesetState 更新状态的2种写法 (1). setState(stateChange, [callback]) ------ 对象式的 setState 1.stateChange 为状态改变对象(该对象可以体现出状态的更改) 2.callback 是可选的回调函数, 它在状态更新完毕、界面也更新后(render 调用后)才被调用 (2). setState(updater, [callback]) ------ 函数式的 setState ...

npm run bulidnpm i serve -gserve bulid

npm i redux-devtools-extensionstore 文件中进行配置：import { composeWithDevTools } from 'redux-devtools-extension' export default createStore(countReducer, composeWithDevTools(applyMiddleware(thunk)))

纯函数一类特别的函数: 只要是同样的输入(实参)，必定得到同样的输出(返回)必须遵守以下一些约束不得改写参数数据不会产生任何副作用，例如网络请求，输入和输出设备不能调用 Date.now() 或者 Math.random() 等不纯的方法redux 的 reducer 函数必须是一个纯函数高阶函数理解: 一类特别的函数情况1: 参数是函数情况2: 返回是函数常见的高阶函数:定时器设置函数数组的 forEach()/map()/filter()/reduce()/find()/bind()promisereact-redux 中的 connect 函数作用: 能实现更加动态, 更加可扩展的功能

react-redux 基本使用明确两个概念UI 组件：不能使用任何 redux 的 api，只负责页面的呈现、交互等容器组件：负责和 redux 通信，将结果交给 UI 组件如何创建一个容器组件靠 react-redux 的 connect 函数connect(mapStateToProps, mapDispatchToProps)(UI组件)mapStateToProps：映射状态，返回值是一个对象mapDispatchToProps：映射操作状态的方法，返回值是一个对象容器组件中的 store 是靠 props 传进去的，而不是在容器组件中直接引入mapDispatchToProp...

redux 理解学习文档英文文档: https://redux.js.org/中文文档: http://www.redux.org.cn/Github: https://github.com/reactjs/reduxredux 是什么redux 是一个专门用于做状态管理的JS库(不是 react 插件库)。它可以用在 react, angular, vue 等项目中, 但基本与 react 配合使用。作用: 集中式管理 react 应用中多个组件共享的状态。什么情况下需要使用 redux某个组件的状态，需要让其他组件可以随时拿到（共享）。一个组件需要改变另一个组件的状态（通信）。总体原...

流行的开源React UI组件库material-ui(国外)官网: http://www.material-ui.com/#/Github: https://github.com/callemall/material-uiant-design(国内蚂蚁金服)官网: https://ant.design/index-cnGithub: https://github.com/ant-design/ant-design/ant-design 组件库使用安装 npm i antd引入需要使用的组件 import { Button } from 'antd'接着引入 css 文件 import ...

底层原理不一样BrowserRouter 使用的是 H5 的 history API，不兼容 IE9 及以下版本HasRouter 使用的是 URL 的哈希值url 表现形式不一样BrowserRouter 的路径中没有 #，例如：localhost:3000/dome/testHasRouter 的路径中包含 #，例如：localhost:3000/#/dome/test刷新后对路由的 state 参数的影响BrowserRouter 没有任何影响，因为 state 保存在 history 对象中HasRouter 刷新后会导致路由 state 参数的丢失HasRouter 可以用于解...

push 和 replace默认 push 模式，类似压栈// 开启 replace 模式 <Link repalce to={`/home/message/dateil/Joe/18`}>详情</Link>编程式路由导航借助 this.props.history 对象上的 API 对操作路由跳转、前进、后退this.props.history.push 跳转// push 跳转+携带 params 参数 this.props.history.push('/home/message/detail/Joe/18') // push 跳转+携带 search 参数 ...

params 参数 *路由链接（携带参数）：{/* 传递 params 参数 */} <Link to={`/home/message/dateil/Joe/18`}>详情</Link>注册路由（声明接收）：{/* 声明接收 params 参数 */} <Route to='/home/message/detail/:name/:age' component={Detail} />接收参数// 路由组件接收 params 参数 this.props.match.params // {name:'Joe', age: '18'}search 参数路由链接...

React 路由介绍现代前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）前端路由是一套映射规则，在 React 中，是 URL 与 组件 的对应关系使用 React 路由简单来说，就是配置 路径 和 组件（配对）路由的基本使用使用步骤1. 安装 react-router-domnpm i react-router-dom2. 导入路由的三个核心组件：Router、Route...

前置说明React本身只关注于界面, 并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互(json数据)react应用中需要集成第三方ajax库(或自己封装)常用的ajax请求库jQuery: 比较重, 如果需要另外引入不建议使用axios: 轻量级, 建议使用封装XmlHttpRequest对象的ajaxpromise风格可以用在浏览器端和node服务器端axiosaxios 中文文档相关APIGET 请求// 可用 async await 修饰 axios.get('/user?ID=12345') .then(function (response) { ...

使用 create-react-app 创建 React 应用React 脚手架xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置（语法检查、jsx编译、devServer...）下载好了所有相关的依赖可以直接运行一个简单效果react提供了一个用于创建react项目的脚手架库: create-react-app项目的整体技术架构为: react + webpack + es6 + eslint使用脚手架开发的项目的特点: 模块化, 组件化, 工程化创建项目并启动第一步，全局安装：npm i -g create-react-app第二步，切换到想创项目...

setState() 说明更新数据setState() 是异步更新数据的可以多次调用 setState()，之后触发一次重新渲染（render）使用下面这种语法时，后面的 setState() 不要依赖于前面的 setState()this.state = { count: 1 } this.setState({ count: this.state.count + 1 }) console.log(this.state.count) // 1 this.setState({ count: this.state.count + 1 // 1 + 1 }) conso...

refs组件内的标签可以定义 ref 属性来标识自己字符串形式的 ref我们不建议使用它，因为 string 类型的 refs 存在 一些问题。它已过时并可能会在未来的版本被移除。<input type="text" ref="input1" />回调形式的 ref<input type="text" ref={ (currentNode) => { this.input1 = currentNode } } />如果 ref 回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入...

组件通讯介绍组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，将一个完整的功能拆分成多个组件，以更好地完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯组件的 props组件是封闭的，要接收外部数据应该通过 props 来实现props 的作用：接收传递给组件的数据传递数据：给组件标签添加属性接收数据：函数组件通过参数 props 接收数据，类组件通过 this.props 接收数据// 函数组件 // 接收数据 function Hello(props) ...

React 组件介绍组件是 React 的一等公民，使用 React 就是在用组件组件表示页面中的部分功能组合多个组件实现完整的页面功能可复用、独立、可组合React 组件的两种创建方式使用函数创建组件使用 JS 的函数（或箭头函数）创建的组件函数名必须以大写字母开头函数组件必须有返回值，表示该组件的结构，如果返回值为 null，表示不渲染任何内容function Hello() { retunr ( <div>这是一个函数组件！</div> ) } const Hello = () =>　<div>这是一个函数...

JSX 基本使用JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写 XML（HTML）格式的代码声明式雨打更加直观、与HTML结构相同，降低了学习成本、提升开发效率<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l...

React 概述用于构建用户界面的 JavaScript 库是一个将数据渲染为 HTML 视图的开源 JavaScript 库React 特点声明式只需要描述 UI（HTML）看起来是什么样子，就像写 HTML 一样,React 负责渲染 UI，并在数据变化时更新 UIconst jsx = <div clssName="app"> <h1>Hello React! 动态变化数据：{ count }</h1> </div>基于组件采用组件化模式、声明式编码，提高开发...

安装 SassSass 中文网sass有两种后缀名文件一种后缀名为 sass，不使用大括号和分号另一种后缀名为 scss，这种和我们平时写的css文件格式差不多，使用大括号和分号。编译 Sass命令行编译#sass 要编译的sass文件路径:编译完成后放到那里叫什么 sass sass/style.sass:css/style.css自动编译#sass --watch 要监听的文件:放到那个文件 sass --watch sass:css编译格式nested 嵌套compact 紧凑expanded 扩展compressed 压缩更改编译格式sass --watch sass:css -...

Vue3快速上手1.Vue3简介2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.02.Vue3带来了什么1.性能的提升打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%......2.源码的升级使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking......3.拥抱TypeScr...

vue-cilvue-cli（俗称：vue脚手架）是 vue 官方提供的。快速生成 vue 工程化项目的工具特点：开箱即用基于 webpack功能丰富且易于开发支持创建 vue2 和 vue3 的项目创建项目vue-cli 提供了创建项目的两种方式：// 基于 【命令行】的方式创建 vue 项目 vue create 项目名称 // 基于 【可视化面板】 创建 vue 项目 vue ui组件库常用的组件库PC 端Element UIView UI移动端Mint UIVant UIElement UIElement UI 是饿了么前端团队开源的一套 PC 端 vue 组件库。支持在 vu...

导航守卫可以控制路由的访问权限声明全局导航守卫全局导航守卫会拦截每个路由规则，从而对每个路由进行访问权限的控制：// 在 router.js 中 // 创建路由实例对象 const router = creteRouter({ ... }) // 调用路由实例对象的 beforeEach 函数，声明 “全局前置守卫” // fn 必须是一个函数，每次拦截到的路由请求，都会调用 fn 进行处理 // 因此 fn 叫做 “守卫方法” router.beforeEach(fn)守卫方法的 3 个形参// 创建路由实例对象 const router = creteRouter({ ... })...