随笔分类 - React
摘要：redux库 向外暴露的几个函数 createStore():接收的参数为reducer函数，返回为store对象、 combineReducers():接收包含n个的reducer方法，返回一个新的reducer函数 store对象的内部结构 getState():返回值为内部保存的state数据
阅读全文
摘要：redux 一个专门用于做状态管理的JS库，基本上与react配合使用 作用：集中式管理react应用中多个组件共享的状态 使用场景： 某个组件的状态，需要让其他组件可以随时拿到（共享） 一个组件需要改变另一个组件的状态（通信） 总体原则：能不用就不用，如果不用比较吃力才考虑使用 使用案例 纯rea
阅读全文
摘要：1）简单的说：key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用。 2）详细的说：当状态中的数据发生变化时，react会根据“新数据”生成“新的虚拟DOM”，随后React进行“新虚拟DOM” 与“旧虚拟DOM”的Diff比较，比较规则如下 a.旧虚拟DOM中找到了与新虚拟DOM相同
阅读全文
摘要：问题描述：在路径上加上前缀，在访问页面之后，刷新一下页面，样式则会丢失。 原因：刷新页面之后，获取样式的URL中多了一个自己手动添加的路径前缀，而在获取样式的URL中并不存在这个前缀，从而导致样式丢失 正确情况下的样式路径： 错误情况下的样式路径 解决方案一： 在脚手架中的public文件夹内修改i
阅读全文
摘要：通过params传递 export default class Message extends Component { state = { messageArr: [ { id: '1', title: '消息1' }, { id: '2', title: '消息2' }, { id: '3', t
阅读全文
摘要：push和replace push是压入栈，留下访问痕迹，replace是代替，不留下访问痕迹 如果全部变为replace，那么就不会有后退功能了 goback:history中实现后退的函数 goForward:history中实现前进的函数 go：history中实现前进后退几步的函数，go(2
阅读全文
摘要：实例代码如下 import React, { Component } from 'react' import { withRouter } from 'react-router-dom' class Header extends Component { handeleForward = () =>
阅读全文
摘要：1.底层原理不一样： BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。 HashRouter使用的是URL的哈希值 2.path表现形式不一样 BrowserRouter的路径中没有#，例如：localhost：3000/demo/test HashRoute
阅读全文
摘要：采取一个插件 pubsub-js 安装 npm i pubsub-js 使用过程 import React from 'react' import Search from './components/Search' import List from './components/List' expor
阅读全文
摘要：方案一： 启动一个服务器，如果服务器的url为：http://localhost:5002,我们要获取服务器的students的信息 此时脚手架的localhost地址为http://localhost:3000 现在请求出现问题，客户端的3000端口可以向服务器的5002端口发送请求，但是数据返回
阅读全文
摘要：React路由 前端路由功能：让用户从一个视图导航到另一个视图 前端路由是一套映射规则，在React中，是URL和组件对应关系 使用React路由简单来说，就是配置路径和组件（配对） 路由的基本使用 import React from 'react'; import ReactDOM from 'r
阅读全文
摘要：setState原理 setState()是异步更新数据的 注意：使用该语法的时候，后面的 setState()不要依赖于前面的setState（） 可以多次调用setState()，只会触发一次重新渲染 import React from 'react'; import { createRoot
阅读全文
摘要：组件进阶 组件通讯 多个组件之间需要共享某些数据，为了实现这个功能，打破组件的独立封闭性，让其与外界沟通，这个过程就是组件通讯 组件的props 作用：接收传递给组件的数据 传递数据：给组件标签添加属性 接收数据：函数组件通过参数props接收数据，类组件通过this.props接收数据 //pro
阅读全文
摘要：React框架 用于构建用户界面的javascript库 发送请求获取数据 处理数据（过滤、整理格式等） 操作dom呈现页面 react是一个将数据渲染为HTML视图的开源javascript库 为什么要学react？ 原生js操作dom繁琐，效率低 使用js直接操作dom，浏览器会进行大量的重绘重
阅读全文
