REACT路由
摘要：现代的前端应用大多数是SPA（单页应用程序），也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器压力更小，所以更受欢迎。为了有效的使用单个页面来管理多页面的功能，前端路由应运而生。 前端路由功能：让用户从一个视图(组件)导航到另一个视图(组件) 前端路由是一套映射规则，在React
阅读全文
posted @
2021-04-30 11:47
Tsunami黄嵩粟
阅读(81)
推荐(0) 编辑
redux中间件
摘要：redux默认支持同步操作，异步操作怎么办？Action发出以后，Reducer立即算出 State，这叫做同步；Action 发出以后，过一段时间再执行 Reducer，这就是异步。怎么才能Reducer 在异步操作结束后自动执行呢？这就要用到新的工具：中间件。中间件有很多，这里使用一个 Redu
阅读全文
posted @
2021-04-30 11:41
Tsunami黄嵩粟
阅读(51)
推荐(0) 编辑
react-redux
摘要：网址：https://react-redux.js.org/ React-Redux是Redux的官方针对React开发的扩展库，默认没有在React项目中安装，需要手动来安装。react-redux是依赖于redux所以你必须安装redux 你可以理解为react-redux就是redux给我们提
阅读全文
posted @
2021-04-30 11:37
Tsunami黄嵩粟
阅读(42)
推荐(0) 编辑
状态管理(redux)
摘要：https://www.redux.org.cn/ 2013年 Facebook 提出了 Flux 架构的思想，引发了很多的实现。2015年，Redux 出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构。 简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不必
阅读全文
posted @
2021-04-29 15:24
Tsunami黄嵩粟
阅读(163)
推荐(0) 编辑
memo(自带)
摘要：React.memo()是一个高阶函数，它与 React.PureComponent类似，但是一个函数组件而非一个类。如果你的组件在相同 props的情况下渲染相同的结果，那么你可以通过将其包装在 React.memo 中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下
阅读全文
posted @
2021-04-29 15:06
Tsunami黄嵩粟
阅读(59)
推荐(0) 编辑
memoization(计算属性-记忆组件)
摘要：连续两次相同传参，第二次会直接返回上次的结果，每次传参不一样，就直接调用函数返回新的结果，会丢失之前的记录，并不是完全记忆，可以在它的参数中传入state数据从而实现了类似Vue中的计算属性功能 # 安装 npm i -S memoize-one # 引入 import memoizeOne fro
阅读全文
posted @
2021-04-29 15:04
Tsunami黄嵩粟
阅读(102)
推荐(0) 编辑
react 装饰器
摘要：使用装饰器定义 装饰器是一种函数，写成 @函数名。它可以放在类和类方法的定义前面。react脚手架创建的项目默认是不支持装饰器，需要手动安装相关模块和添加配置文件。 安装相关模块 npm i -D customize-cra react-app-rewired 修改package.json文件中sc
阅读全文
posted @
2021-04-29 11:49
Tsunami黄嵩粟
阅读(273)
推荐(0) 编辑
react 高阶函数
摘要：HOC(Higher Order Components)就是一个函数，传给它一个组件，它返回一个新的组件。 高阶组件：就相当于手机壳，通过包装组件，增强组件功能。 实现步骤： 首先创建一个函数 指定函数参数，参数应该以大写字母开头 在函数内部创建一个类组件，提供复用的状态逻辑代码并返回 在该组件中，
阅读全文
posted @
2021-04-28 16:44
Tsunami黄嵩粟
阅读(285)
推荐(0) 编辑
REACT 前端界面提交
摘要：在react项目中安装代理中间件 setupProxy.js文件 const { createProxyMiddleware: proxy } = require('http-proxy-middleware') module.exports = app => { app.use('/v1', pr
阅读全文
posted @
2021-04-28 16:21
Tsunami黄嵩粟
阅读(72)
推荐(0) 编辑
node写接受
摘要：选择数据库类型:mongodb 定义用户集合的字段(域): 用户名 密码 性别 爱好(多选) 简介 npm i -S express mongoose 在项目中连接mongodb服务 index.js文件 const mongoose = require('mongoose') const HOST
阅读全文
posted @
2021-04-28 15:45
Tsunami黄嵩粟
阅读(47)
推荐(0) 编辑
react的反向代理
摘要：在配置在src文件夹中setupProxy.js文件，并通过npm安装http-proxy-middleware,代理中间件模块 npm i -S http-proxy-middleware 配置反向代理 // 模块化环境是commonjs规范 webpack devServer配置环境 // 此文
阅读全文
posted @
2021-04-28 15:19
Tsunami黄嵩粟
阅读(200)
推荐(0) 编辑
react 网络请求 axios
摘要：react中通过npm来安装axios扩展 cnpm i -S axios 发起请求 import React, { Component } from 'react' import axios from 'axios' export default class App2 extends Compon
阅读全文
posted @
2021-04-28 15:17
Tsunami黄嵩粟
阅读(76)
推荐(0) 编辑
react祖先与子孙多层传值
摘要：先做数据源store.js文件 // 状态 store 统一数据源 import React, { createContext } from 'react' // Provider 发布消息 // Consumer 对于发布的消息进行消费(接受) let { Provider, Consumer }
阅读全文
posted @
2021-04-22 18:09
Tsunami黄嵩粟
阅读(203)
推荐(0) 编辑
react兄弟之间通信
摘要：写入组件 import React, { Component } from 'react'//下面二个就是兄弟关系的组件 import Cmp1 from '../Child/Cmp1' import Cmp2 from '../Child/Cmp2' import MyContext, { db
阅读全文
posted @
2021-04-22 18:00
Tsunami黄嵩粟
阅读(82)
推荐(0) 编辑
react跨组件通信
摘要：在react没有类似vue中的事件总线来解决这个问题，一是我们借助它们共同的父级组件通过代理的方式来实现，但过程会相当繁锁。react提供了Context来实现跨组件通信, 而不必显式地通过组件树的逐层传递 props。 import React, { Component, createContex
阅读全文
posted @
2021-04-22 17:49
Tsunami黄嵩粟
阅读(197)
推荐(0) 编辑
react组件通信 父组件与子组件互相通信
摘要：父组件将自己的状态传递给子组件，子组件当做属性来接收，当父组件更改自己状态的时候，子组件接收到的属性就会发生改变 父组件利用ref对子组件做标记，通过调用子组件的方法以更改子组件的状态,也可以调用子组件的方法 父组件将自己的某个方法传递给子组件，在方法里可以做任意操作，比如可以更改状态，子组件通过t
阅读全文
posted @
2021-04-22 17:16
Tsunami黄嵩粟
阅读(143)
推荐(0) 编辑
react减少组件渲染
摘要：当this.setState()修改了state中的数据后，当前组件将重新渲染，同时也会重新渲染子组件，但只会渲染当前组件子树（当前组件以其所有子组件） shouldComponentUpdate 当父组件更新会引起子组件也被更新，问题是此时子组件没有任何变化时也会重新渲染，我们就要避免不必要的重新
阅读全文
posted @
2021-04-16 17:48
Tsunami黄嵩粟
阅读(105)
推荐(0) 编辑
react生命周期比较常用的几个
摘要：import React, { Component } from 'react' // 只有在类组件中才有生命周期 export default class App extends Component { // 组件初始化 只执行一次 constructor(props) { super(props
阅读全文
posted @
2021-04-16 17:37
Tsunami黄嵩粟
阅读(63)
推荐(0) 编辑
react做购物车的功能
摘要：父组件 import React, { Component } from 'react' import Lists from '../components/Lists' export default class Cart extends Component { // 数据 状态 state = {
阅读全文
posted @
2021-04-16 17:31
Tsunami黄嵩粟
阅读(210)
推荐(0) 编辑
react表单处理 非受控组件
摘要：没有和state数据源进行关联的表单项，而是借助ref，使用元素DOM方式获取表单元素值 使用步骤 调用 React.createRef() 方法创建ref对象 将创建好的 ref 对象添加到文本框中 通过ref对象获取到文本框的值 class App extends React.Component
阅读全文
posted @
2021-04-16 17:18
Tsunami黄嵩粟
阅读(49)
推荐(0) 编辑
react表单处理 受控组件
摘要：将state与表单项中的value值绑定在一起，有state的值来控制表单元素的值，称为受控组件。 绑定步骤： 在state中添加一个状态，作为表单元素的value值 给表单元素绑定change事件，将表单元素的值设置为state的值 <input type="text" value={this.s
阅读全文
posted @
2021-04-16 17:08
Tsunami黄嵩粟
阅读(62)
推荐(0) 编辑
react props-type
摘要：对于组件来说，props是外部传入的，无法保证组件使用者传入什么格式的数据，简单来说就是组件调用者可能不知道组件封装着需要什么样的数据，如果传入的数据不对，可能会导致程序异常，所以必须要对于props传入的数据类型进行校验。 安装校验包 npm i -S prop-types # 在组件中导入 im
阅读全文
posted @
2021-04-16 16:37
Tsunami黄嵩粟
阅读(305)
推荐(0) 编辑
react props进阶 children属性
摘要：children属性，表示组件标签的子节点，当组件标签有子节点时，props就会有该属性，与与普通的props一样，其值可以使任意类型。 # 父组件 class App extends React.Component { render() { return ( <div> <Cmp>我是childr
阅读全文
posted @
2021-04-16 16:19
Tsunami黄嵩粟
阅读(404)
推荐(0) 编辑
React State状态
摘要：state状态只在class类组件才有，函数组件没有此功能 状态(state)即数据，是组件内部的私有数据，只能在组件内部使用 state的值是对象，表示一个组件中可以有多个数据 通过this.state来获取状态 state数据值可以修改 this.setState state可以定义在类的构造方
阅读全文
posted @
2021-04-16 15:49
Tsunami黄嵩粟
阅读(44)
推荐(0) 编辑
react this指向问题
摘要：在JSX事件函数方法中的 this，默认不会绑定 this指向。如果你忘记绑定，当你调用这个函数的时候 this 的值为 undefined。所以使用时一定要绑定好this的指向。 构造方法中绑定 constructor(props){ super(props) // 在构造方法中指定this指向
阅读全文
posted @
2021-04-16 15:41
Tsunami黄嵩粟
阅读(39)
推荐(0) 编辑
React事件处理 事件绑定 事件对象
摘要：React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同: React 事件的命名采用小驼峰式，而不是纯小写。 onClick onChange 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。 onClick={this.fn} 类组件与函数组件绑定事件
阅读全文
posted @
2021-04-16 15:28
Tsunami黄嵩粟
阅读(113)
推荐(0) 编辑
react类组件 组件传值
摘要：class Cmp1 extends React.Component{ render(){ return ( <div>{ this.props.name } -- 我是一个类</div> ); }} 父组件 // react根组件 import React, { Component } from
阅读全文
posted @
2021-04-16 15:22
Tsunami黄嵩粟
阅读(91)
推荐(0) 编辑
react组件传值(props[只读属性]) 函数组件
摘要：组件间传值，在React中是通过只读属性 props 来完成数据传递的。 props：接受任意的入参，并返回用于描述页面展示内容的 React 元素。 function Cmp1(props) { return ( <div> <h3>{ props.name } -- 你好世界</h3> </di
阅读全文
posted @
2021-04-16 15:10
Tsunami黄嵩粟
阅读(486)
推荐(0) 编辑
react类组件
摘要：使用ES6语法的class创建的组件(有状态组件) 类名称必须要大写字母开头 类组件要继承React.Component父类，从而可以使用父类中提供的方法或者属性 类组件必须提供 render 方法，用于页面结构渲染，结构必须要有顶级元素，且必须return去返回 import React from
阅读全文
posted @
2021-04-16 11:45
Tsunami黄嵩粟
阅读(41)
推荐(0) 编辑
组件的创建方式 函数创建组件
摘要：函数组件(无状态组件)：使用JS的函数创建组件 函数名称必须以大写字母开头， 函数组件必须有返回值，表示该组件的结构，且内容必须有顶级元素 import React from 'react' // 函数名首字母必须大写 function Hello() { return ( <div>这是第一个函数
阅读全文
posted @
2021-04-16 11:31
Tsunami黄嵩粟
阅读(108)
推荐(0) 编辑
React脚手架 创建React项目
摘要：React团队主要推荐使用create-react-app来创建React新的单页应用项目的最佳方式。 React脚手架(create-react-app)意义 脚手架是官方提供，零配置，无需手动配置繁琐的工具即可使用 充分利用 Webpack，Babel，ESLint等工具辅助项目开发 关注业务，
阅读全文
posted @
2021-04-16 11:25
Tsunami黄嵩粟
阅读(58)
推荐(0) 编辑
通过Webpack搭建react
摘要：安装解析react的相关babel和插件 nmp i -D babel-loader @babel/core @babel/preset-react @babel/preset-env 进行loader相关配置 // node运行环境 // 开发环境webpack配置 const path = re
阅读全文
posted @
2021-04-16 11:21
Tsunami黄嵩粟
阅读(63)
推荐(0) 编辑
