gercke的博客

第一步：进入service中进行数据请求的封装函数其中的request函数是之前进行封装过的函数在service中找到请求数据对应的组件所在的位置第二步：在pages中找到recommend中的redux（store），修改其中的actionCreator…数据统一在redux中进行管理在使用redux之前可以进行测试请求是不是可以正常的使用测试成功然后在组件中使用hooks进行使用在常量中进行添加constant在dispatch中传的是对象的时候。执行reducer

在进行页面初始进入的时候 ，总会有些默认的路径默认的路径如下所示：或者是通过render函数进行修改路径，Redirect 通过重定向进行新地址设置通常情况下Route中的页面初始需要向上面所描述那样，性能才会更加好...

准备工作1.保证电脑上有node.js和npm2.下载yarn，通过npm install -g yarn 下载好之后查看yarn -v搭建react开发环境必须安装node.js稳定版本,Node> = 6和npm> = 5.2创建项目（可创建多次）找到项目要创建的目录位置 eg E:/reactnpx create-react-app my-ap...

jsx学习JSX 其实会被转化为普通的 JavaScript 对象。function getGreeting(user) { if (user) { return <h1>Hello, {formatName(user)}!</h1>; } return <h1>Hello, Stranger.</h1>;}其中jsx中可以含有双标签也可以含有单标签jsx顶层只能有一个根元素，很多时候我们会在外层包裹一个divr

一. 网络请求的选择目前前端中发送网络请求的方式有很多种：选择一:传统的Ajax是基于XMLHttpReques(XHR)为什么不用它呢?非常好解释, 配置和调用方式等非常混乱.编码起来看起来就非常麻烦.所以真实开发中很少直接使用, 而是使用jQuery-Ajax选择二: Fetch API选择或者不选择它?Fetch是AJAX的替换方案，基于Promise设计，很好的进行了关注分离，有很大一批人喜欢使用fetch进行项目开发；但是Fetch的缺点也很明显，首先需要明确的是

antdesign库的简单使用实现如下的栗子：可以添加评论，进行评论的删除，观察到时间等点击删除第二个之后文件的路径如下所示index.js文件import React from 'react';import ReactDOM from 'react-dom';import 'moment/locale/zh-hk';import 'antd/dist/antd.css';import App from './comment/App';ReactDOM.render( &

1.AntDesign简介AntDesign ，简称 antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。AntDesign的特点：???? 提炼自企业级中后台产品的交互语言和视觉风格。???? 开箱即用的高质量 React 组件。???? 使用 TypeScript 开发，提供完整的类型定义文件。⚙️ 全链路开发和设计工具体系。???? 数十个国际化语言支持。???? 深入每个细节的主题定制能力。全链路开发和设计指的是什么？全链

1. 内联样式style 接受一个采用小驼峰命名属性的 JavaScript 对象，，而不是 CSS 字符串；并且可以引用state中的状态来设置相关的样式；export default class App extends PureComponent { constructor(props) { super(props); this.state = { titleColor: "red" } } render() { return (

ref转发import React, { PureComponent, createRef, forwardRef } from 'react';class Home extends PureComponent { render() { return <h2>Home</h2> }}// 高阶组件forwardRefconst Profile = forwardRef(function(props, ref) { return <p ref={

一、高阶组件高阶组件的英文是 Higher-Order Components，简称为 HOC；官方的定义：高阶组件是参数为组件，返回值为新组件的函数；可以进行如下的分析：首先， 高阶组件 本身不是一个组件，而是一个函数；其次，这个函数的参数是一个组件，返回值也是一个组件；高阶组件的调用过程：const EndComponent = higherOrderComponent(WrappedComponent);编写过程：function higherOrderComponent

一. refs的使用在React的开发模式中，通常情况下不需要、也不建议直接操作DOM原生，但是某些特殊的情况，确实需要获取到DOM进行某些操作：管理焦点，文本选择或媒体播放。触发强制动画。集成第三方 DOM 库。1. 创建ref的方式如何创建refs来获取对应的DOM呢？目前有三种方式：方式一：传入字符串使用时通过 this.refs.传入的字符串格式获取对应的元素；方式二：传入一个对象对象是通过 React.createRef() 方式创建出来的；使用时获取到创建的对象其

React更新React在props或state发生改变时，会调用React的render方法，会创建一颗不同的树。React需要基于这两颗不同的树之间的差别来判断如何有效的更新UI：如果一棵树参考另外一棵树进行完全比较更新，那么即使是最先进的算法，该算法的复杂程度为 O(n 3 )，其中 n 是树中元素的数量；这个开销太过昂贵了，React的更新性能会变得非常低效；于是，React对这个算法进行了优化，将其优化成了O(n)，如何优化的呢？同层节点之间相互比较，不会垮节点比较；不同

为什么使用setState以一下栗子讲解：import React, { Component } from 'react'export default class App extends Component { constructor(props) { super(props); this.state = { message: "Hello World" } } render() { return ( <div>

Context应用场景非父子组件数据的共享：在开发中，比较常见的数据传递方式是通过props属性自上而下（由父到子）进行传递。但是对于有一些场景：比如一些数据需要在多个组件中进行共享（地区偏好、UI主题、用户登录状态、用户信息等）。如果我们在顶层的App中定义这些信息，之后一层层传递下去，那么对于一些中间层不需要数据的组件来说，是一种冗余的操作。import React, { Component } from 'react';function ProfileHeader(props) {

组件嵌套组件化的核心思想应该是对组件进行拆分，拆分成一个个小的组件，再将这些组件组合嵌套在一起，最终形成我们的应用程序；我们来分析一下下面代码的嵌套逻辑：import React, { Component } from 'react';function Header() { return <h2>Header</h2>}function Main() { return ( <div> <Banner/>

三、生命周期很多的事物都有从创建到销毁的整个过程，这个过程称之为是生命周期；React组件也有自己的生命周期，了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能；我们谈React生命周期时，主要谈的类的生命周期，因为函数式组件是没有生命周期函数的生命周期是一个抽象的概念，在生命周期的整个过程，分成了很多个阶段；比如装载阶段（Mount），组件第一次在DOM树中被渲染的过程；比如更新过程（Update），组件状态发生变化，重新更新渲染的过程；比如卸载过程（Unmount），组件从D

组件化一、React的组件化组件化是React的核心思想，前面我们封装的App本身就是一个组件：组件化提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何的应用都会被抽象成一颗组件树。组件化思想的应用：有了组件化的思想，我们在之后的开发中就要充分的利用它。尽可能的将页面拆分成一个个小的、可复用的组件。这样让我们的代码更加方便组织和管理，并且扩展性也更强。React的组件相对于Vue更加的灵活和多样，按照不同的方式可以分成很多类组件：根据组件的定义方式，

jsx本质bable.js作用浏览器不能直接解析jxs代码，需要bable转译为纯JS代码才能运行只要用了JXS，都要加上type=“text/bable”，声明需要bable来处理JSX 代表 Objects实际上，jsx 仅仅只是 React.createElement(component, props, …children) 函数的语法糖。Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用。 const element = (

条件渲染1.条件判断class App extends React.Component { constructor(props) { super(props); this.state = { isLogin: true } } render() { let titleJsx = null; if (this.state.isLogin) { titleJsx = <h2>欢迎回来~</h2>

json1.JSON是一种传输数据的格式(以对象为样板，本质上就是对象，但用途有区别，对象就是本地用的，json是用来传输的)，属性名必须加双引号 var obj = { "name":"deng", "age" : 23 }//json var str = JSON.srtingify(obj);//将json obj转化为字符串格式JSON.parse(); ...

二. 自定义Hook1. 认识自定义hook自定义Hook本质上只是一种函数代码逻辑的抽取，严格意义上来说，它本身并不算React的特性。自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。需求：所有的组件在创建和销毁时都进行打印组件被创建：打印 组件被创建了；组件被销毁：打印 组件被销毁了；export default function CustomHookDemo() { useEffect(() => { console.lo

一. Hook高级使用1. useReducer很多人看到useReducer的第一反应应该是redux的某个替代品，其实并不是。useReducer仅仅是useState的一种替代方案：在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分；或者这次修改的state需要依赖之前的state时，也可以使用；useReducer中有三个参数：第一个传入的是一个纯函数，reducer第二个是初始化的值，可以是数字，也可以是对象类型，第三个是一个函数

二. hooks基础1. State HookState Hook的API就是 useState，我们在前面已经进行了学习：useState会帮助我们定义一个 state变量，useState 是一种新方法，它与 class 里面的 this.state 提供的功能完全相同。一般来说，在函数退出后变量就会”消失”，而 state 中的变量会被 React 保留。useState接受唯一一个参数，在第一次组件被调用时使用来作为初始化值。（如果没有传递参数，那么初始化值为undefined）。use

一. 认识hook1. 为什么需要hookHook 是 React 16.8 的新增特性，它可以让我们在不编写class的情况下使用state以及其他的React特性（比如生命周期）。我们先来思考一下class组件相对于函数式组件有什么优势？比较常见的是下面的优势：1.class组件可以定义自己的state，用来保存组件自己内部的状态；1.函数式组件不可以，因为函数每次调用都会产生新的临时变量；2.class组件有自己的生命周期，我们可以在对应的生命周期中完成自己的逻辑；比如在compon

三. react-router高级使用1. 路由嵌套在开发中，路由之间是存在嵌套关系的。这里我们假设about页面中有两个页面内容：商品列表和消息列表；点击不同的链接可以跳转到不同的地方，显示不同的内容；import React, { PureComponent } from 'react';import { Route, Switch, Link } from 'react-router-dom';//下面是函数式组件function AboutProduct(props) {

二. react-router基本使用1. Router基本使用1.1 安装react-router：安装react-router-dom会自动帮助我们安装react-router的依赖；yarn add react-router-dom1.2 重要的组件react-router最主要的API是给我们提供的一些组件1.2.1 BrowserRouter或HashRouterRouter中包含了对路径改变的监听，并且会将相应的路径传递给子组件；BrowserRouter使用history

一. 认识react-router1. 认识前端路由1.1路由的概念路由其实是网络工程中的一个术语：在架构一个网络时，非常重要的两个设备就是路由器和交换机。路由就是通过互联的网络把信息从源地址传输到目的地址的活动。—维基百科1.2 路由的两种机制当然，目前在我们生产中路由器也是越来越被大家所熟知，因为我们生活中都会用到路由器：路由和转送路由时决定数据报从来源到目的地的路径转送将输入端的数据转移到合适的输出端1.3路由表事实上，路由器主要维护的是一个映射表；映射表会决定数据的流向

一. reducer拆分1. reducer代码拆分我们来看一下目前我们的reducer：当前这个reducer既有处理counter的代码，又有处理home页面的数据；后续counter相关的状态或home相关的状态会进一步变得更加复杂；我们也会继续添加其他的相关状态，比如购物车、分类、歌单等等；function reducer(state = initialState, action) { switch (action.type) { case ADD_NUMBER:

一.redux-saga1. ES6的generatorsaga中间件使用了ES6的generator语法所以我们有必须简单讲解一下：注意：我这里并没有列出generator的所有用法，事实上它的用法非常的灵活，大家可以自行去学习一下。在JavaScript中编写一个普通的函数，进行调用会立即拿到这个函数的返回结果：function foo() { return "Hello World";}foo() // Hello World如果我们将这个函数编写成一个生成器函数：

1. 组件中异步请求在之前简单的案例中，redux中保存的counter是一个本地定义的数据，我们可以直接通过同步的操作来dispatch action，state就会被立即更新。但是真实开发中，redux中保存的很多数据可能来自服务器，我们需要进行异步的请求，再将数据保存到redux中。在之前学习网络请求的时候我们讲过，网络请求可以在class组件的componentDidMount中发送，所以我们可以有这样的结构：我现在完成如下案例操作：在Home组件中请求banners和re

一. react结合redux1. redux融入react代码目前redux在react中使用是最大的，所以我们需要将之前编写的redux代码，融入到react当中去。这里创建两个组件：Home组件：其中会展示当前的counter值，并且有一个+1和+5的按钮；Profile组件：其中会展示当前的counter值，并且有一个-1和-5的按钮；store文件和上次的一样：index中的引入有些改变：其他的名字改变一下store中 index.js 文件// import redux fr

二.redux的使用1. redux使用过程安装redux：npm install redux --save或yarn add redux通过创建一个简单的js文件，先来简单学习一下redux：1.2.搭建项目结构1.2.1 创建一个新的项目文件夹：learn-redux执行初始化操作yarn init安装reduxyarn add redux1.2.2 创建src目录，并且创建index.js文件1.2.3 修改package.json可以执行index.js"s

一.认识Redux1. 为什么需要redux？JavaScript开发的应用程序，已经变得越来越复杂了：JavaScript需要管理的状态越来越多，越来越复杂；这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等，也包括一些UI的状态，比如某些元素是否被选中，是否显示加载动效，当前分页；管理不断变化的state是非常困难的：状态之间相互会存在依赖，一个状态的变化会引起另一个状态的变化，View页面也有可能会引起状态的变化；当应用程序复杂时，state在什么时候，因为什么

一. JavaScript纯函数JavaScript纯函数函数式编程中有一个概念叫纯函数，JavaScript符合函数式编程的范式，所以也有纯函数的概念；在React中，纯函数的概念非常重要，在接下来我们学习的Redux中也非常重要，所以我们有必须来回顾（如果你之前没有学过，那么你就是学习）一下纯函数。纯函数的维基百科定义：在程序设计中，若一个函数符合以下条件，那么这个函数被称为纯函数：此函数在相同的输入值时，需产生相同的输出。函数的输出和输入值以外的其他隐藏信息或状态无关，也和由I/

在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验。当然，我们可以通过原生的CSS来实现这些过渡动画，但是React社区为我们提供了react-transition-group用来完成过渡动画。一. react-transition-group介绍React曾为开发者提供过动画插件 react-addons-css-transition-group，后由社区维护，形成了现在的 react-transition-group。这个库可以帮助我们方便的实现组件的 入场 和 离

reset cssyarn add normalize.css创建reset.css文件导入@import "~normalize.css";在index.js中导入import '@/assets/css/reset.css';补充其他需要重制的css设置craco* yarn add @craco/craco* 修改package.json=>scriptes中react-scripts修改为craco * package.json同级目录下创建craco.config.js

在通过styled-component引入精灵图时,两种方式方式一：通过import引入import img1 from '../../assets/img/sprite_01.png';在img或者background中引入ing1<img src={img1} alt=""/>//或者background-image:url(${img1});方式二：require方式require只能写字符串，不能写变量background-image:url(${require("

一、在a标签中如果使用了 target=“_blank”target=“_blank” 是一种有漏洞的使用方式如果要用的话，那么就需要加上 rel=“noopener noreferrer”>，用来阻止漏洞<a href="http://baidu.com" target="_blank" ref="noopener noreferrer"></a>二、修改配置解决办法运行 npm run eject//添加配置//在package.json文件中添