![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 66
React学习笔记
Doe
这个作者很懒,什么都没留下…
展开
-
项目打包部署和错误边界
1、如何把写完的项目打包①npm run build执行完毕以后会在根文件夹生成一个build文件夹②怎么运行打包完的文件?这个时候需要部署到服务器上才能运行 可以用express(Node里面快速搭建服务器的框架)或者第三方的库以指定的文件夹作为服务器的根目录快速帮你开启一台服务器帮你部署这些资源,比如serve库。 1、全局安装库 npm i serve -g 2、然后输入你想以哪个文件夹(生成的build文件夹)作...原创 2021-11-07 16:30:17 · 91 阅读 · 0 评论 -
render props
如何向组件内部动态传入带内容的结构(标签)?Vue中: 使用slot技术, 也就是通过组件标签体传入结构 <A><B/></A>React中:①使用children props: 通过组件标签体传入结构②使用render props: 通过组件标签属性传入结构,而且可以携带数据,一般用render函数属性①children props格式:(在A组件的标签体里面放B,这样在A的class里面,可以把this.props.children放...原创 2021-11-07 16:01:13 · 430 阅读 · 0 评论 -
组件优化-PureComponent
Component的2个问题 只要执行setState(),即使不改变状态数据, 组件也会重新render() ==> 效率低 只当前组件重新render(), 就会自动重新render子组件,纵使子组件没有用到父组件的任何数据 ==> 效率低 效率高的做法只有当组件的state或props数据发生改变时才重新render()原因Component中的shouldComponentUpdate()总是返回true解决办法1: 重...转载 2021-11-07 14:58:16 · 254 阅读 · 0 评论 -
Context
一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信之前的父组件和子孙组件通信,可以通过逐层传递props,但是假设这个数据是A传递给B由B传递给C使用,B不需要这个数据,那就对B来说是负担了,这个时候我们就可以使用Context1、创建Context假设是组件A需要向它的子孙组件D传递信息,这个信息中间的BC组件都不要,则可以使用Context①在组件A外创建Context容器对象const XxxContext = React.createContext(...原创 2021-11-07 14:41:08 · 169 阅读 · 0 评论 -
Hooks
1、React Hook/Hooks是什么?(1). Hook是React 16.8.0版本增加的新特性/新语法(2). 可以让你在函数组件中使用 state 以及其他的 React 特性2、State Hook(1). State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作(2). 语法: const [xxx, setXxx] = React.useState(initValue) (3). useState()说明: 参数: 第一次初...原创 2021-11-07 02:06:29 · 119 阅读 · 0 评论 -
路由组件的lazyLoad
1、lazyLoad 1.引入lazy和Suspenseimport React, { Component,lazy,Suspense} from 'react' 2.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包 const Login = lazy(()=>import('@/pages/Login')) 3.通过<Suspense>指定在加载得到...原创 2021-11-07 01:11:09 · 102 阅读 · 0 评论 -
setState更新状态的2种写法
1、对象式的setStatesetState(stateChange, [callback])------对象式的setState 1.stateChange为状态改变对象(该对象可以体现出状态的更改) 2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用 //对象式的setState /* //1.获取原来的count值 const {count} = this.state //原来状态为0 //2.更新状态 ...原创 2021-11-07 00:44:03 · 376 阅读 · 0 评论 -
react-redux
1、原理图用react-redux的话必须要向redux一样更新需要在最外层订阅,它不需要订阅会自动更新2、容器组件首先,假设我希望在Count这个UI组件中用到一个redux的对象count,是不能直接使用的。需要在Count这个UI组件外包裹一个容器组件Count,容器组件才能操作state里面的数据和发布action,然后Count的容器组件通过props把state的数据和改变数据的方法也就是action传给UI组件。那么首先要知道,怎么把Count的UI组件和Count.原创 2021-11-06 22:23:46 · 211 阅读 · 0 评论 -
Redux
1、原理2、文件格式.src下建立: -redux -store.js -count_reducer.js -count_action.js3、store.js/* 该文件专门用于暴露一个store对象,整个应用只有一个store对象*///引入createStore,专门用于创建redux中最为核心的store对象import {createSto...原创 2021-11-06 21:20:10 · 105 阅读 · 0 评论 -
antd的按需引入+自定主题
1.安装依赖:yarn add react-app-rewired customize-cra babel-plugin-import less less-loader 2.修改package.json .... "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired bu...转载 2021-11-02 21:22:36 · 209 阅读 · 0 评论 -
BrowserRouter与HashRouter的区别
1.底层原理不一样: BrowserRouter使用的是H5的history API,不兼容IE9及以下版本。 HashRouter使用的是URL的哈希值。 2.path表现形式不一样 BrowserRouter的路径中没有#,例如:localhost:3000/demo/test HashRouter的路径包含#,例如:localhost:3000/#/demo/test...原创 2021-11-02 19:36:59 · 193 阅读 · 0 评论 -
编程式路由导航和withRouter
如果想使用按钮实现路由跳转,有两种形式,可回退和不可回退两种:由于history被放在props中,可以直接通过this.props.history的push和replace改变可回退:this.props.history.replace(`/home/message/detail`) 不可回退:this.props.history.push(`/home/message/detail`)如果是想携带参数,有三种方式:①params②search③state...原创 2021-11-02 16:22:00 · 205 阅读 · 0 评论 -
向路由组件传递参数的三种方式
一、params参数具体步骤: ①路由链接(携带参数):<Link to='/demo/test/tom/18'}>详情</Link> ②注册路由(声明接收):<Route path="/demo/test/:name/:age" component={Test}/> ③接收参数:const {name,age}=this.props.match.params二、search参数...原创 2021-11-01 22:17:14 · 1167 阅读 · 0 评论 -
嵌套路由的使用
如果页面中首先进入/home路由下的Home组件然后再Home组件中通过二级路由选择是Home下的Message组件还是News组件具体写法如下:首先地址进入http://localhost:3000/然后因为App.js中先注册的路由(标号①)去模糊匹配到Home组件,路径重定向成功http://localhost:3000/home,然后进渲染好Home组件后,通过第二次注册的路由(标号②),发现现在的路径是http://localhost:3000/home/news,然后渲染Ne..原创 2021-11-01 18:19:21 · 210 阅读 · 0 评论 -
严格匹配和Redirect和Replace
1、严格匹配1、react默认是模糊匹配什么是模糊匹配,我们来看下面两个小例子2、怎么开启严格匹配添加exact或者exact={true}1.默认使用的是模糊匹配(简单记:【输入的路径】必须包含要【匹配的路径】,且顺序要一致)2.开启严格匹配:<Route exact={true} path="/about" component={About}/>3.严格匹配不要随便开启,需要再开,有些时候开启会导致无法继续匹配二级路由2、Redirect.原创 2021-11-01 17:17:23 · 357 阅读 · 0 评论 -
资源丢失的情况
1、问题是什么?假设现在网页的所有路径,我希望它前面加一个/Test/,那就变成了这样:如果这个时候,我们对页面直接强制刷新,会变成这样:为什么样式丢失了呢?2、问题的原因首先我们得知道一个知识点:当我们在url中输入不存在的资源的时候,React会帮我们请求public下的index.html,就是说,当资源不存在的时候,有public下的index.html兜底可以看到,丢失样式的页面请求的css的资源的路径和没有丢失的样式页面请求的资源相比多了一个刚刚加的..原创 2021-11-01 16:35:21 · 133 阅读 · 0 评论 -
Switch的使用
当一个路由匹配了两个组件会怎么样呢?你会发现,这两个组件会按照先后顺序都渲染出来,不是覆盖的关系那如果是希望,不要重复,匹配到了一个就不要继续匹配后面的,怎么办呢?可以通过引入Switch,把注册路由的代码放在Switch中,来自上而下匹配,当匹配到了一个组件,就不会继续匹配后面的组件了。参考链接:尚硅谷2021版React技术全家桶全套完整版(零基础入门到精通/男神天禹老师亲授)_哔哩哔哩_bilibili...原创 2021-10-31 19:06:14 · 106 阅读 · 0 评论 -
NavLink
1、NavLink的基本使用在前面一个笔记中,我们使用的Link这个组件,它有一个缺点是,如果我们需要给选中的路由设置高亮怎么办?这个时候我么可以用比Link更加方便的NavLink引入NvaLinkimport { NavLink } from 'react-router-dom'但是如果想自定义高亮的css怎么办呢?添加activeClassName,并且定义样式2、普通组件和路由组件区别 1.写法不同: 一般组件:<De...原创 2021-10-31 18:44:29 · 2707 阅读 · 0 评论 -
react-router-dom的基本使用
1、下载react-router-dom库在命令行输入npm i react-router-domreact-router分为web、native和any,具体用法可以参考这个文档:https://react-router.docschina.org/web/example/basicreact-router-dom是web版本的2、基本使用1、 填写路由链接(就是写导航栏)引入import {Link} from 'react-router-dom' 编写路由链接原创 2021-10-29 22:02:51 · 847 阅读 · 0 评论 -
消息订阅-发布机制(PubSubJs)
用法:工具库: PubSubJS 下载: npm install pubsub-js --save 使用: import PubSub from 'pubsub-js' //引入 PubSub.subscribe('delete', function(data){ }); //订阅 PubSub.publish('delete', data) //发布消息 例子可以实现任意组件的通信比如A组件想给B组件发送消息,B组件用PubSub.subscribe订阅一个名为Up原创 2021-10-29 16:27:54 · 702 阅读 · 0 评论 -
react脚手架配置代理总结
一、为什么会出现跨域问题出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)二、什么是跨域当一个请求url的协议、域名原创 2021-10-28 16:01:44 · 217 阅读 · 0 评论 -
TodoList
1、静态页面转React注意事项:class变成className,style用{{}}表示2、React中的render中写js变量或者style或者函数的时候需要用{}3、动态初始化列表,如何确定将数据放在哪个组件的state中 ——某个组件使用:放在其自身的state中 ——某些组件使用:放在他们共同的父组件state中(官方称此操作为:状态提升)4、关于父子之间通信 1.【父组件】给【子组件...原创 2021-10-27 22:53:50 · 106 阅读 · 0 评论 -
React快捷键
安装下面这个插件1、rcc+tabrcc是react class componentimport React, { Component } from 'react'export default class index extends Component { render() { return ( <div> </div> ) }}2、rfc+tabrfc是react funct.原创 2021-10-27 08:52:01 · 1331 阅读 · 0 评论 -
React脚手架安装及使用
1、创建项目并启动首先在cmd中全局安装脚手架通过npm或者yarn:npm i -g create-react-app切换到想创项目的目录,使用命令:create-react-app xiangmumingcheng进入项目文件夹cd xiangmumingcheng启动项目npm start2、react脚手架项目结构1、public ---- 静态资源文件夹其中index.html是react配置好的,内容如下:2、src ---..原创 2021-10-25 21:00:27 · 444 阅读 · 0 评论 -
react的diff算法中key的作用
经典面试题: 1). react/vue中的key有什么作用?(key的内部原理是什么?) 2). 为什么遍历列表时,key最好不要用index? 1. 虚拟DOM中key的作用: 1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。 2). 详细的说: 当状态中的数据发生变化时,react会根据【新数据】生成【新的虚拟DOM】, ...转载 2021-10-25 19:15:19 · 467 阅读 · 0 评论 -
react生命周期(新)
react新旧生命周期区别①旧生命周期删除三个钩子:componentWillMount、componentWillUpdate、componentWillReceiveProps这三个钩子在17.版本使用时要加上前缀UNSAFE_,即UNSAFE_componentWillMoun否则会有警告甚至报错。增加使用成本,减少程序员使用。这是因为这些生命周期方法经常被误解和滥用,UNSAFE_不是指不安全,而是在未来版本中(maybe 18.)可能出现bug,特别是异步渲染中。实际很少使用这三个钩子,基本.原创 2021-10-25 17:08:31 · 1762 阅读 · 0 评论 -
react生命周期(旧)
1. 初始化阶段: 由ReactDOM.render()触发---初次渲染 1. constructor() 2. componentWillMount() 3. render() 4. componentDidMount() =====> 常用一般在这个钩子中做一些初始化的事,例如:开启定时器、发送网络请求、订阅消息对应于下面红色框...原创 2021-10-24 23:24:47 · 90 阅读 · 0 评论 -
受控组件和非受控组件和函数柯里化应用
1、非受控组件(不推荐)就是只有当提交表单的时候,才会需要使用到表单内的提交的数据,当不提交的时候更新表单内的数据的时候不会用到,这个时候表单内的控件就是非受控组件//创建组件class Login extends React.Component{ handleSubmit = (event)=>{ event.preventDefault() //阻止表单提交 const {username,password} = this alert(`你输入的用户名是:${user.原创 2021-10-24 17:13:47 · 157 阅读 · 0 评论 -
React中的事件处理
1、不使用ref就可以拿到正在操作的Dom元素通过event.target得到发生事件的DOM元素对象 ——————————不要过度使用ref代码<script type="text/babel"> //创建组件 class Demo extends React.Component{ /* (1).通过onXxx属性指定事件处理函数(注意大小写) a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性.原创 2021-10-22 14:10:55 · 126 阅读 · 0 评论 -
React组件实例的三大属性
1、React组件1、函数式组件(只能使用props) function Demo(){ console.log(this) return <h2> 函数式组件</h2> } ReactDOM.render(<Demo />, document.getElementById('test'))函数式组件使用props属性//创建组件function Person (props){ const原创 2021-10-21 22:20:15 · 311 阅读 · 0 评论