小多的博客

组件使用时将原来的,换成和即可import {

Redux Toolkit 有一个名为 createSlice 的函数，它负责生成 action 类型字符串、action creator 函数和 action 对象的工作。您所要做的就是为这个切片定义一个名称，编写一个包含 reducer 函数的对象，它会自动生成相应的 action 代码。来消除手写Redux逻辑中的“样板文件”,防止常见错误，并提供简化标准Redux任务的API.

Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。请谨慎使用，因为这会使得组件的复用性变差。

错误边界（Error boundary）：用来捕获后代组件的错误，渲染出备用页面特点：只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误使用方式state = { hasError: '', // 用于标识子组件是否产生错误}// 生命周期函数，一旦后台组件报错，就会触发static getDerivedStateFromError(error) { console,log(error) // 在render之前触发 // 返回新的st

向组件内部动态传入带内容的结构（标签）Vue中： 使用slot技术，也就是通过组件标签传入结构 <A><B/></A>React中： 1. 使用 children props：通过组件标签体传入结构 <A> <B>xxx</B> </A> {this.props.children} 局限：B组件拿不到A组件内的数据 2. 使用 render props：通过组件标签属性传入结构，而且可以携带数

Component的2个问题只要执行 setState()，即便不改变状态数据，组件也会重新render() ===> 效率低只当前组件重新 render()，就会自动重新渲染子组件，纵使子组件没有用到父组件的任何数据 ===> 效率低效率高的做法只有当组件的state或props数据发生改变时才重新render()原因Component 中的 shouldComponentUpdate() 总是返回 true解决方法方法一：重写 shouldComponentUpd

Context一种组件间通信的方式，常用于祖组件与后代组件间的通信使用1. 创建Context容器对象 const XxxContext = React.createContext()2. 渲染子组件时，外面包裹 XxxContext.Provider，通过value属性给后代组件传递数据： <XxxContext.Provider value={数据}> 子组件 </XxxContext.Provider>3. 后代组件获取数据： // 第一种方式：仅适用于类

在vue2或react中要求组件使用一个根标签包裹所有元素，但很多时候根标签存在的意义不大，页面也会出现过多的html结构，此时我们可以使用 Fragment标签包裹，它会被解析成空的被忽略Fragment使用<Fragment></Fragment>或<></>// 注意 <Fragment key={1}></Fragment> 可以接收一个key值作为唯一标识，遍历时可用，但是<></>不能接收

一、React Hook/HooksHook是React 16.8.0版本增加的新特性、新语法可以让你在函数组件中使用 state 以及其他的 React 特性二、三个常用的Hook1. State Hook：React.useState()2. Effect Hook：React.useEffect()3. Ref Hook：React.useRef()三、State Hook1. State Hook 让函数组件也可以有 state 状态, 并进行状态数据的读写操作2. 语法：c

路由组件的lazyLoad通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包通过指定在加载得到路由打包文件前会显示一个自定义loading界面import React, { Component, lazy, Suspense } from 'react'import { NavLink, Route } from 'react-router-dom'// import Home from '/Home'// import Abou

对象式的setStatesetState(stateChange,[callback])stateChange 为状态改变的对象（该对象可以体现出状态的更改）callback 是可选的回调函数，它在状态更新完毕后，界面也更新后（render调用后）才被调用import React, { Component } from 'react'export default class Demo extends Compontent { state = { count: 0 } add = () =

在项目目录下，运行 npm run build，进行打包，打包完成后会在目录下生成一个build文件夹，build生成的这些东西要放在服务器root下。可以不用手写服务器，全局安装：npm i serve -g在根目录终端输入 serve build 就可以打开访问打包的项目...

redux的使用在 src 文件夹下新建一个文件夹 redux 文件夹在 redux 文件夹下新建两个JS文件：store.js、count_reducer.js在 store.js 文件内写入以下代码/* 该文件专门用于暴露一个 store 对象，整个应用只有一个 store 对象 */// 引入 createStore，专门用于创建 redux 中最为核心的 store 对象import { createStore } from 'redux'// 引入为 Count 组件.

底层原理不一样：BrowserRouter 使用的是 H5 的 history API，不兼容IE9及以下的版本HashRouter 使用的是 URL 的哈希值path 表现形式不一样：BrowserRouter 的路径中没有#，例如：localhost:3000/demo/testHashRouter 的路径中包含#，例如：localhost:3000/#/demo/test刷新后对路由state参数的影响：BrowserRouter 没有任何影响，因为 sta..

TypeError:Cannot read property 'goBack' of undefined或者TypeError:Cannot read property 'push' of undefined等原因：在React中，一般组件没有history等方法，因为一般组件没有传值，props收到的是一个空对象，只有路由组件中才有解决方法：使用withRouter，withRouter是专门解决一般组件中使用路由组件中的API的情况在一般组件中引入import {withRouter} fro

## 编程式路由导航借助 `this.props.history` 对象上的API操作路由的跳转、前进、后退### push()方法```javascriptthis.props.history.push(path,state)```可以使用路由传递参数的三种方法，与 `replace()` 相比有历史记录，可以回退到上一次记录### replace()方法```javascriptthis.props.history.replace(path,state)```可以使用路由传递

state = { msgData: [ {id: '01', title: '标题1'}, {id: '02', title: '标题2'} ]}传递 params 参数{ msgData.map((msgObj) => { <div key={msgObj.id}> {/* 向路由组件传递 params 参数 */} <Link to={`/home/msg/${msgObj.id}/${msgObj.title}`}>{msgObj.

<NavLink to='/a/b'>跳转Home</NavLink>{/* 注册路由 */}<Route path='/a/b' component={Home}/>原因：由于引用样式使用的是 ./ 的相对路径例如引入的样式路径为：./css/style.css （http://localhost:3000/css/style.css）刷新时会变为 http://localhost:3000/a/css/style.css解决办法：引入样式时不写 ./

import React, { Component } from 'react'import { NavLink } from 'react-router-dom'export default class MyNavLink extends Component { render() { console.log(this.props) return ( // 其中标签体的是特殊的标签属性，以 children 接收 <NavLink activeClassName = '选中

方法一：只需请求一个服务器在 package.json 文件中添加一行代码："proxy": "服务器地址（到端口号就行）"// 例如"proxy": "http://localhost:5000"假设你处于3000的端口，服务器处于5000端口，此时你 axios 请求的应该是 3000 端口，才会发送成功axios.get('http://localhost:3000/students').then( res => { console.log('成功了', res.data)} e

对象中的中括号用法：传入变量let a = 'name'let obj = {}obj[a] = 'jack'console.log(obj); // {name: "jack"}在 react 中的使用，以 setState() 为例this.setState({a:b}) // 等同于 this.setState({'a':b}) 此时 a 是一个字符串，不变this.setState({[a]:b}) // 此时 a 是一个变量，由传入值决定...

var obj1 = { foo: 'bar', x: 42 };var obj2 = { foo: 'baz', y: 13 };var clonedObj = { ...obj1 };// 克隆后的对象: { foo: "bar", x: 42 }var mergedObj = { ...obj1, ...obj2 };// 合并后的对象: { foo: "baz", x: 42, y: 13 }const merge = ( ...objects ) => ( { ...obj

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

setState()更新数据setState()更新数据是异步的注意：使用该语法，后面的setState不要依赖前面setState的值多次调用setState，只会触发一次render推荐语法推荐：使用 setState((state,props) => {}) 语法参数state： 表示最新的state参数props： 表示最新的props第二个参数场景：在状态更新(页面完成重新渲染)后立即执行某个操作语法：setState(update[,callback])

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

需求分析渲染评论列表（列表渲染）没有评论数据时渲染：暂无评论（条件渲染）获取评论信息，包括评论人和评论内容（受控组件）发表评论，更新评论列表（setState()）搭建评论列表的模板结构import React from 'react'import ReactDOM from 'react-dom'/* 评论列表案例 comments: [ { id: 1, name: '图图', content: '真不错！！！' }, { id: 2, name

React组件介绍组件是 React 的一等公民，使用 React 就是在用组件组件表示页面中的部分功能组合多个组件实现完整的页面功能特点：可复用、独立、可组合组件的创建方式1. 函数创建组件函数组件：使用JS的函数创建组件函数名称必须以大写字母开头函数组件必须有返回值，表示该组件的结构如果返回值为null，表示不渲染任何内容编写函数组件function Hello() { return ( <div>这是第一个函数组件</div&g

JSXJSX产生的原因由于通过 createElement() 方法创建的 React 元素有一些问题，代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，用户体验不爽JSX的概述JSX 是JavaScript XML 的简写，表示在JavaScript代码中写HTML格式的代码优势：声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率简单入门使用使用步骤使用JSX语法创建 react 元素let h1 = <h1>我是通过JSX创建的元素</h

ReactReact是一个用于构建用户界面的 javaScript库起源于facebook的内部项目，后续在13年开源了出来特点声明式你只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI基于组件组件时React最重要的内容，组件表示页面中的部分内容学习一次，随处使用使用React可以开发Web应用，使用React可以开发移动端，可以开发VR应用React基本使用React的安装npm i react react-domreact 包是核心，