2021年05月_一颗不甘坠落的流星

12月 11月 09月 08月 07月 06月 05月 04月 03月 02月 01月

原创【React】immutable.js 基础教程

文章目录JS中数据修改问题介绍常用APIobject转Map对象array转List对象JS转immutableimmutable转JSRedux中集成用它的原因是为了解决问题：解决项目当中状态大规模管理的深拷贝的问题（防止对象/数组因为引用传递而在使用过程中出现的各种问题）。JS中数据修改问题我们先来看一段熟悉的代码：import React, { Component } from "react";class App extends Component { state = {

2021-05-28 17:40:59 471

原创【react-transition-group】react 过渡动画插件

文章目录简介基本使用列表过渡动画路由过渡动画简介在项目中可能会有一些动画效果展示或页面切换效果，使用css动画的方式虽然可以实现，但比较局限，涉及到一些js动画的时候就没法处理了。react-transition-group是react的第三方模块，借助这个模块可以更加方便的实现更加复杂的动画效果官网地址：https://reactcommunity.org/react-transition-group/css-transition该三方包的安装命令如下：npm i -S react-

2021-05-28 17:19:19 1734

原创【styled-components】css-in-js 热门库

文章目录简介基本使用样式继承属性传递简介css-in-js 是一种技术，而不是一个具体的库的实现。简单来说 css-in-js 就是将应用的 css 样式写在 JavaScript 文件里面，而不是独立为一些 css、scss或less这类的文件，这样你就可以在 css 中使用一些属于 js 的如模块声明、变量定义、函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义。css-in-js 在react社区的热度是最高的，这是因为 react 本身不会管用户怎么去为组件定义样式问题，而vue有属于框

2021-05-27 20:33:10 2587

原创【React】类组件 state 状态用法

State状态（state）定义状态修改状态状态提升同步和异步状态（state）如果将 state 与 vue 中的某个点做类比的话，则其相当于 vue 组件中的 data ，作用就是用于存储当前组件中需要用到的数据。状态就是组件描述某种显示情况的数据，由组件自己设置和更改，也就是说由组件自己维护，使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理)定义状态切记：不要直接通过this.state.xxx = xxxx形式去更改state的值。否则会包警告，警告如下：Do no

2021-05-20 21:03:41 1464

原创【React】props 属性用法

Props进阶children 属性props-type默认值children 属性介绍：1. children 属性是只存在于 props 对象中的一个属性2. children 属性只有在组件标签中有子节点的时候才会存在3. children 属性的使用就类似于vue中匿名插槽插槽就是在子组件中挖一个坑，坑里填什么由父组件决定（传值：父-子）4. children 属性的值可以是任意的类型（可以是字符串，也可以是对象），并且标签子节点也可以是多个5. 如果子组件标签里只存在一个子节

2021-05-20 20:27:53 500 3

原创【React】JSX 语法及原理

文章目录不用 jsx 语法使用 jsx 语法JSX 总结不用 jsx 语法hello world<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi

2021-05-18 16:42:16 745

原创【React】react-redux 案例

文章目录容器组件和UI组件改写计数器知识点总结容器组件和UI组件React-Redux 将所有组件分成两大类：UI 组件（presentational component）容器组件（container component）UI组件容器组件作用描述如何展现（骨架、样式）描述如何运行（数据获取、状态更新）直接使用Redux否是数据来源props监听Redux state数据修改从props调用回调函数向Redux派发actions

2021-05-13 12:18:51 1166 8

原创【Redex】使用及案例分析

文章目录需求：不用 Redex使用 Redex知识点总结：需求：我们写一个计数器+：点击后 +1-：点击后 -1++：点击后延时后 +1不用 RedexApp.jsx 文件import React ,{Component} from 'react';class App extends Component{ constructor(props) { super(props); this.state = { count:0 } }

2021-05-13 08:32:59 1809 1

原创【Redux】简解及工作流程分析

文章目录Redux 工作流程图Redux 三个核心概念Redux 工作流程图完整版：先来个简单版本的：Store 相当于老板Reducers 相当于厨师Action Creators相当于服务员React Component 相当于顾客打个比方：顾客（React Component）想吃点东西，于是就把吃啥告诉了服务员（Action Creators）服务员（Action Creators）就用菜单（dispatch）记录（action）下来，点了什么菜（type），和数量（d

2021-05-12 19:48:37 6879 3

原创【React Hook】自定义用法（基础案例，一看就会）

自定义一个计数器的 hookcount.js 文件import React, { useState } from 'react';//参数：initNum 加或减的个数初始值function useCount(initNum) { const [count, setCount] = useState(initNum); //加一的函数 const addCount = () => { setCount(count + 1); } .

2021-05-12 16:54:50 703 2

原创【React Hooks】useLayoutEffect 用法

useEffect 不会 block 浏览器渲染，而 useLayoutEffect 会。useEffect 会在浏览器渲染结束后执行，useLayoutEffect 则是在 DOM 更新完成后，浏览器绘制之前执行。

2021-05-12 16:18:23 2062

原创【React Hooks】useImperativeHandle 用法

React 中 useImperativeHandle 的使用方法及案例

2021-05-12 15:29:18 1788

原创【React Hooks】useRef 用法

在函数式组件中，useRef 是一个返回可变引用对象的函数。该对象.current属性的初始值为useRef传入的参数initialVale。

2021-05-12 15:16:06 6603 3

原创【React Hooks】useMemo/useCallback 用法

文章目录useMemo 介绍useMemo 实例useMemo 介绍const memoizedValue = React.useMemo( ()=>computeExpensiveValue(a,b), [a,b]);返回一个 memoized 值把创建函数和依赖项数组作为参数传入useMemo只有在依赖项改变时会重新计算 memoized 值这种优化有助于避免在每次渲染时进行高开销的计算传入useMemo的函数会在渲染期间执行。与渲染无关的操作不要写在里面如果没有提供依

2021-05-12 14:39:59 627

原创【React Hooks】useReducer 用法

文章目录useReducer Hook 介绍useReducer Hook 实例useReducer Hook 介绍const [state, dispatch] = React.useReducer(reducer, initialArg, init);useReducer是useState的替代方案接收：如(state, action)=>newState的 reducer返回：当前 state 和 dispatch 方法useReducer使用场景：state 逻辑复杂且

2021-05-12 14:00:26 318

原创【React Hooks】useContext 用法

文章目录useContext Hook 介绍useContext Hook 实例useContext Hook 介绍一种组件间通信方式，常用于【祖宗组件】与【后代组件】之间的通信useContext Hook 实例

2021-05-12 09:12:36 797

原创【React Hooks】useEffect 用法

在function组件中，每当DOM完成一次渲染，都会有对应的副作用执行，useEffect用于提供自定义的执行内容，它的第一个参数（作为函数传入）就是自定义的执行内容。为了避免反复执行，传入第二个参数（由监听值组成的数组）作为比较(浅比较)变化的依赖，比较之后值都保持不变时，副作用逻辑就不再执行。

2021-05-11 22:46:18 1476

原创【React Hooks】useState 用法

文章目录useState Hook 介绍useState Hook 实例useState Hook 介绍useState Hook 让函数组件也可以有 state 状态，并进行读写操作语法：const [state, setState] = React.useState(initalState)// x代表可以自定义，X代表首字母大写const [xxx, setXxx] = React.useState(initalValue)useState()说明：参数：第一次初始化指定的值

2021-05-11 22:10:19 2212 2

原创【ES6】箭头函数

箭头函数箭头函数是ES6里面有个简写函数的语法方式重点：箭头函数只能简写函数表达式，不能简写声明式函数function fn(){}; //不能简写const fun = function(){}; //可以简写let obj = { fn :function(){}; //可以简写} 语法：(函数的形参) => {函数体内要执行的代码}const fn = function(a,b){ console.log(a); console.log(b);}//可以使用箭

2021-05-08 21:21:27 1161

原创【Flux】基本介绍

文章目录MVC框架缺陷FluxReduxMVC框架缺陷MVC的全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，是一种软件设计典范。M：即是 Model 模型是管理数据，很多业务逻辑都在模型中完成。在MVC的三个部件中，模型拥有最多的处理任务。V：就是View视图是指用户看到并与之交互的界面C：是Controller控制器是指控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处

2021-05-07 21:43:15 1591 2