medusee的博客

文章目录React-Router路由的简单使用安装路由在最外层的节点上:路由的实现 Route | Switch | Redirect使用Route实现路由使用Redirect实现路由重定向使用Switch导航声明式导航编程式导航动态路由路由的常用api方法render函数link的参数传递withRouterReact-Routergithub最新的路由的版本是5.2的版本。里面提供了一些包用于创建管理路由所以在做web端开发的时候只需要安装react-router-dom就可以了，因为内部已经包

中间件通常情况下，action只是一个对象，不能包含异步操作，这导致了很多创建action的逻辑只能写在组件中，代码量较多也不便于复用，同时对该部分代码测试的时候也比较困难，组件的业务逻辑也不清晰，使用中间件了之后，可以通过actionCreator异步编写action，这样代码就会拆分到actionCreator中，可维护性大大提高，可以方便于测试、复用，同时actionCreator还集成了异步操作中不同的action派发机制，减少编码过程中的代码量。通过redux-thunk | redux-pr

react-reduxreact-redux 针对性解决了redux的几个使用上的问题:每次使用redux都要引入store数据更新需要手动调用store.subscribe()来订阅actionCreator中要进行手动的派发action，这样他就不够纯粹。安装npm install react-redux -S或者yarn add react-reduxreact-redux的核心组件import {Provider,connect} from "react-redux"P

文章目录redux 的使用1.安装redux2.创建store3.创建reducer4.获取redux的状态，并渲染到dom5. 更改redux的状态如下，想要进行新的数据的添加6.store的三个重要方法7.组件的优化（针对组件type写错了不会弹出错误的问题）reducer的总结redux的思路整理1. redux有三部分组成 **store、reducer、actionCreators**2. redux有三个重要的方法3. 基本流程：拆分reducer1. 将reducer.js 和 actionC

文章目录React框架React的起源React的出发点React与传统MVC的关系React的高性能的体现： 虚拟DOMReact高性能的原理React FiberReact的特点和优势1. 虚拟DOM --- > 高性能2. 组件系统 --- > 高效率3. 单向数据流4. JSX语法React框架React的起源起初facebook在建设instagram（图片分享）的时候，因为牵扯到一个东西叫数据流，那为了处理数据流并且还要考虑好性能方面的问题，Facebook开始对市场上的各种

文章目录构建React简易环境基础知识模板语法{}事件绑定React中常用的'遍历'元素与组件函数式组件/无状态组件类组件/class组件组件的组合嵌套JSX语法糖组件dom添加样式React Event / 事件构建React简易环境react开发需要引入多个依赖文件：react.js、react-dom.js，分别又有开发版本和生产版本react.js中有React对象，帮助我们创建组件等功能react-dom.js中有ReactDOM对象，渲染组件的虚拟dom为真实dom的爆发功能在编写re

文章目录react 中的数据承载--- state/propsprops 属性使组件拥有属性的方式：1. 在装载组件的时候传入2. 父组件给子组件传入3. 逻辑判断状态（state）两种setState的比较函数式组件定义状态扩充--> 关于constructor中的super()属性和状态的对比react 中的数据承载— state/props任意的视图变化都应该是由数据来控制的React也是基于数据驱动（声明式）的框架，组件中必然要承载一些数据，在react助攻起到这个作用的是属性(prop

文章目录受控组件与非受控组件ref属性ref的 callback回调函数形式受控组件与非受控组件表单元素的value值完全来只与state，这个组件就是受控组件，否则就是非受控组件受控组件：在HTML中，表单元素通常自己维护state，并根据用户输入进行更新。而在React中，可变状态通常保存在组件的State属性中，并且只能通过setState()来更新我们可以把两者结合起来，使得react得state成为“唯一数据源”。渲染表单的react组件还控制着用户输入过程中表单发生的操作。被Rea

creat-react-appCreate React App 是一个官方支持的创建 React 单页应用程序的方法。它提供了一个零配置的现代构建设置。安装脚手架使用npm安装npm install -g create-react-app【注意】目录名为了严谨不能用大写，以为在Linux中是严格区分大小写的使用yarn安装yarn add create-react-app初始化一个新的应用npx是npm5.2以后更新的npx create-react-app my-app

es7-react插件如果你使用vscode，可以安装这个插件，以简化工作rcc快速创建类组件rfc快速创建函数式组件jsx注意事项https://react.docschina.org/docs/dom-elements.html对于input元素的value值，必须要配合onChange事件，其实就是为了写成受控组件<input type="text" value={this.state.a} onChange={(e)=>{this.setState({a:e.targe

React中的组件通信父子通信 | 子父通信 | 兄弟通信父子通信父组件调用子组件，传参给子组件<Son list={this.state.list}/>子组件通过this.props获取到父组件传递来的属性，可以使用，但是不能修改从属性中解构出listlet {list} = this.props 子父组件通信父组件定义改变自身状态的方法父组件调用子组件时把方法传递给子组件子组件通过this.props.xx方法调用，一旦调用，相当于在父组件更改自身状态的方

mock 数据工具https://gitee.com/rh_hg/json-server?_from=gitee_search全局安装json-server ，在本地构建数据接口npm install -g json-server (json-server --version 查看版本号)找到mock文件夹目录 ： json-server .\data.json --port 4000 -w(-w 实时检查文件更改)json-server的常用命令前后端并行开发的痛点前端需要等待后端开发

文章目录React 生命周期挂载阶段更新阶段卸载阶段各生命周期的详解1.constructor()2.static getDerivedStateFromProps(newProps,prevState)3.render()4. componentDidMount()5. shouldComponentUpdate(nextProps,nextState)6. getSnapshotBeforeUpdate(prevProps, prevState)7.componentDidUpdate(prevProp

Props属性验证Props属性验证—> 高级指引 -----> 使用PropsTypes 类型检查导入插件import PropTypes from ‘prop-types’;import PropTypes from 'prop-types';MyComponent.propTypes = { // 你可以将属性声明为 JS 原生类型，默认情况下 // 这些属性都是可选的。 optionalArray: PropTypes.array, optionalBool: